Forum Discussion
Cardinal_Night
Nov 19, 2019Brass Contributor
How to set the default for a pnp.sp people picker
I want a pnp.sp people picker to auto populate with the logged in user. Here's the render and the people picker:
<PeoplePicker
context={this.props.context}
personSelectionLimit={1}
groupName={''} // Leave this blank in case you want to filter from all users
showtooltip={false}
isRequired={false}
disabled={false}
selectedItems={this._loggedInUser}//This is the 'onChange'
showHiddenInUI={false}
defaultSelectedUsers={this.state.LoggedInUserPPDefaultItems ? this.state.LoggedInUserPPDefaultItems : []}
principalTypes={[PrincipalType.User]}
resolveDelay={1000}
ensureUser={true}
/>
The defaultSelectedUsers doesn't seem to work the way it's described. It requires a string array but if I put a state object of the logged in users email or login name (a string array type) into it nothing happens, the people picker stays blank. I have a getUser() function setting the state here:
public _getUser() { //getUser sets the state for multiple properties of the user.
sp.web.currentUser.get().then((user) => {
this.setState({
CurrentUserTitle: user.Title,
CurrentUser: user.LoginName,
CurrentUserID: user.Id,
CurrentUserEmail: user.Email
}
}
}
Here's the function on change: This allows the people picker to be changed, if items is blank etc. Otherwise it populates the state. I'm not sure which state to use for the people picker.
private _loggedInUser(items) {
if(items !== null && items.length > 0){
this.setState({
LoggedInUser: items[0].id,
LoggedInUserPPDefaultItems: [items[0].secondaryText]
});
}
}
My states involved:
Set in constructor:
LoggedInUserPPDefaultItems: [],
LoggedInUser: null,
CurrentUserTitle: null,
CurrentUser: null,
CurrentUserGroups: null,
CurrentUserID: null,
CurrentUserEmail: null,
In state file (separate interface):
LoggedInUserPPDefaultItems: string[];
LoggedInUser: string;
CurrentUserTitle: string;
CurrentUser: string[];
CurrentUserGroups: string;
CurrentUserID: string;
CurrentUserEmail: string;
any ideas?
- O365DeveloperBrass Contributor
Hi,
I feel you are setting the state of the
LoggedInUserPPDefaultItems
in the
_loggedInUser
method which will be called onChange.
So it wont get prepopulated ,when you load the form ,However is it getting populated when you focus or doing a key press ,as that will trigger onchange.
Remember setState is async
- Cardinal_NightBrass Contributor
O365Developer I think that you are correct but I'm not sure how to force the people picker to change on render. How would I do this?
- Guruprasad1380Copper ContributorHow did you resolve ur issue ? Even i m trying to default users.. basically i get more than 5 users email from webservice, always these people new means (info wont be available in user information list) its a hidden people picker would like to prepopulate and save the item.. any idea how do i auto bind and trigger change event and capture usersid list so i can create item with the people picker column in the list?
Hi Cardinal_Night ,
I think it is a timing issue, try to call your method inside componentDidMount
public componentDidMount() { this._getUser(); }
Cheers,
Federico
- Cardinal_NightBrass ContributorHi,
GetUser() is running in componentDidMount.
Any other ideas?
Thanks,
TomHi Cardinal_Night ,
please tag me, or I don't receive notifications 🙂
So, if you debug render method
defaultSelectedUsers={this.state.LoggedInUserPPDefaultItems ? this.state.LoggedInUserPPDefaultItems : []}
this.state is populated correctly?
Following docs,
defaultSelectedUsers string[] no Default selected user emails or login names Did you try do add a mocked value?
defaultSelectedUsers={["user@email.sample"]}
Cheers
Federico