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.


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.


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>) => {

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 + "))";
            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;                         

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

  • Would you be able to explain how I'd practically use this? Can I store the array IPersonaProps in a People or Groups field in a SharePoint list then populate it using this? – dmc91 May 4 '18 at 12:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.