Setting default value office ui fabric react people picker
-
16-01-2021 - |
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.
La solution
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);
}
});
});
}
Autres conseils
Let me answer your actual question; selectedItems
takes an Array<IPersonaProps>
.