Forum Discussion

Cardinal_Night's avatar
Cardinal_Night
Brass Contributor
Nov 19, 2019

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?

 

  • O365Developer's avatar
    O365Developer
    Brass Contributor

    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

     

     

    • Cardinal_Night's avatar
      Cardinal_Night
      Brass 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?

      • Guruprasad1380's avatar
        Guruprasad1380
        Copper Contributor
        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?
    • Cardinal_Night's avatar
      Cardinal_Night
      Brass Contributor
      Hi,
      GetUser() is running in componentDidMount.
      Any other ideas?
      Thanks,
      Tom
      • FedericoPorceddu82's avatar
        FedericoPorceddu82
        MVP

        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

         

Resources