Nov 19 2019 05:15 AM
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?
Nov 19 2019 01:14 PM
Hi @Cardinal_Night ,
I think it is a timing issue, try to call your method inside componentDidMount
public componentDidMount() {
this._getUser();
}
Cheers,
Federico
Nov 19 2019 03:04 PM
Nov 19 2019 03:58 PM
Hi @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
Nov 19 2019 05:16 PM
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
Nov 27 2019 02:09 AM
@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?
Dec 01 2019 07:06 PM - edited Dec 01 2019 07:06 PM
Hi THomas,
You need to set the state of
LoggedInUserPPDefaultItems
to the current user values ,in the getUser() method which is invoked from componentDidMount() if I`m not wrong
Apr 26 2020 03:48 PM
Apr 27 2020 12:57 PM
Hey @Guruprasad1380,
I was able to get the default user using its title as the key for the defaultSelectedUsers property. In my componentDidMount, I get the user using the sp.web.currentUser.get() method, store it in the state and then pass [this.state.me.Title] to the defaultSelectedUsers property of the picker. Let me know if it doesn't work for you.
Regards