Setting default value office ui fabric react people picker

Question

I'm currently using the CompactPeoplePicker component however I'm looking to extend it using the selectedItems property to set the people picker from a rest call.

<CompactPeoplePicker
            onResolveSuggestions={this._onFilterChanged.bind(this)}
            onChange={this._onPersonChanged.bind(this)}
            itemLimit={1}
            className={"ms-PeoplePicker"}
            selectedItems={this.state.riskOwner}
/>

This is the code I'm currently using for the people picker, my state.riskOwner is a userID I'm storing in a SharePoint list however I'm uncertain what properties I need to pass back to the selectedItems and the documentation is unclear.

Any help would be greatly appreciated.

Answer 1

Ref. your comment, here's how it works:

You resolve suggestions using onResolveSuggestions, i've explained it below. When you've resolved people you want to store them in your state and set them using the selectedItems attribute. selectedItems should contain an Array<IPersonaProps>.

onResolveSuggestions can take a Promise as input. You should resolve to an array of IPersonaProps.

Here's a shortened code for my PeoplePicker implementation, in the actual solution i've added a setTimeout that clears out every time the function is called, that way you don't overload the system with irrelevant requests.

I've created a helper function called SPUtilities.searchUsers that simply returns a Promise<Array<IPersonaProps>> with the users that match the filtertext.

onFilterChanged(filterText: string, currentPersonas: IPersonaProps[], limitResults?: number) {
    return new Promise((resolve, reject) => {            
        SPUtilities.searchUsers(filterText.toLowerCase()).then((result: Array<IPersonaProps>) => {
            resolve(result)
        })
    });
}

My helper-function users the built in UserInformationList and the ListData.svc to query it, since the SharePoint REST api currently doesn't have a good tolower-function. I've shortened it and simplified it a little, also note that the UserInformationList is localized so it may be named something else in your language.

public static searchUsers(title: string): Promise<Array<IPersonaProps>> {
    return new Promise((resolve, reject) => {            
        var filter = "substringof('Account',tolower(" + title + "))";
        $.ajax({
            headers: { "Accept": "application/json;odata=verbose" },
            url: _spPageContextInfo.siteAbsoluteUrl + "/_vti_bin/listdata.svc/UserInformationList/?$top=10&$select=Account,Title,ID,WorkEmail,Picture&$filter=" + filter,
            success: (result: ListDataResponse) => {                    
                var users = result.d.map((item) => {
                    var pictureUrl = (item.Picture !== null) ? item.Picture : "";
                    return  {
                        title: item.Title,
                        id: item.ID,
                        imageUrl: pictureUrl,
                        primaryText: item.Title,
                        secondaryText: item.WorkEmail
                    } as IPersonaProps;                         
                });                    
                resolve(users);
            }
        });
    });
}

Answer 2

Let me answer your actual question; selectedItems takes an Array<IPersonaProps>.