How to set the default for a pnp.sp people picker

Contributor

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?

 

8 Replies

Hi @Cardinal_Night ,

I think it is a timing issue, try to call your method inside  componentDidMount 

 

public componentDidMount() {
    this._getUser();
  }

Learn more

 

Cheers,

Federico

Hi,
GetUser() is running in componentDidMount.
Any other ideas?
Thanks,
Tom

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

 

defaultSelectedUsersstring[]noDefault selected user emails or login names

 

Did you try do add a mocked value?

 

    defaultSelectedUsers={["user@email.sample"]}
 

 

Cheers

Federico

 

@Cardinal_Night 

 

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

 

 

@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?

@Cardinal_Night 

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

How 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?

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