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

%3CLINGO-SUB%20id%3D%22lingo-sub-1017073%22%20slang%3D%22en-US%22%3EHow%20to%20set%20the%20default%20for%20a%20pnp.sp%20people%20picker%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1017073%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSPAN%3EI%20want%20a%20pnp.sp%20people%20picker%20to%20auto%20populate%20with%20the%20logged%20in%20user.%20Here's%20the%20render%20and%20the%20people%20picker%3A%3C%2FSPAN%3E%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-markup%22%3E%3CCODE%3E%3CPEOPLEPICKER%20context%3D%22%7Bthis.props.context%7D%22%20personselectionlimit%3D%22%7B1%7D%22%20groupname%3D%22%7B''%7D%22%3E%3C%2FPEOPLEPICKER%3E%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EThe%20defaultSelectedUsers%20doesn't%20seem%20to%20work%20the%20way%20it's%20described.%20It%20requires%20a%20string%20array%20but%20if%20I%20put%20a%20state%20object%20of%20the%20logged%20in%20users%20email%20or%20login%20name%20(a%20string%20array%20type)%20into%20it%20nothing%20happens%2C%20the%20people%20picker%20stays%20blank.%20I%20have%20a%20getUser()%20function%20setting%20the%20state%20here%3A%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-markup%22%3E%3CCODE%3Epublic%20_getUser()%20%7B%20%2F%2FgetUser%20sets%20the%20state%20for%20multiple%20properties%20of%20the%20user.%0A%20%20%20%20sp.web.currentUser.get().then((user)%20%3D%26gt%3B%20%7B%0A%20%20%20%20%20%20%20%20this.setState(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20CurrentUserTitle%3A%20user.Title%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20CurrentUser%3A%20user.LoginName%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20CurrentUserID%3A%20user.Id%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20CurrentUserEmail%3A%20user.Email%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EHere's%20the%20function%20on%20change%3A%20This%20allows%20the%20people%20picker%20to%20be%20changed%2C%20if%20items%20is%20blank%20etc.%20Otherwise%20it%20populates%20the%20state.%20I'm%20not%20sure%20which%20state%20to%20use%20for%20the%20people%20picker.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-markup%22%3E%3CCODE%3Eprivate%20_loggedInUser(items)%20%7B%0A%0A%20%20%20%20if(items%20!%3D%3D%20null%20%26amp%3B%26amp%3B%20items.length%20%26gt%3B%200)%7B%0A%20%20%20%20this.setState(%7B%0A%20%20%20%20%20%20LoggedInUser%3A%20items%5B0%5D.id%2C%0A%20%20%20%20%20%20LoggedInUserPPDefaultItems%3A%20%5Bitems%5B0%5D.secondaryText%5D%0A%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D%20%0A%0A%20%20%7D%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EMy%20states%20involved%3A%3C%2FP%3E%3CP%3ESet%20in%20constructor%3A%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-markup%22%3E%3CCODE%3ELoggedInUserPPDefaultItems%3A%20%5B%5D%2C%0ALoggedInUser%3A%20null%2C%0A%0ACurrentUserTitle%3A%20null%2C%0ACurrentUser%3A%20null%2C%0ACurrentUserGroups%3A%20null%2C%0ACurrentUserID%3A%20null%2C%0ACurrentUserEmail%3A%20null%2C%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3EIn%20state%20file%20(separate%20interface)%3A%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-markup%22%3E%3CCODE%3ELoggedInUserPPDefaultItems%3A%20string%5B%5D%3B%0ALoggedInUser%3A%20string%3B%0A%0ACurrentUserTitle%3A%20string%3B%0ACurrentUser%3A%20string%5B%5D%3B%0ACurrentUserGroups%3A%20string%3B%0ACurrentUserID%3A%20string%3B%0ACurrentUserEmail%3A%20string%3B%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3Eany%20ideas%3F%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1018740%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20set%20the%20default%20for%20a%20pnp.sp%20people%20picker%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1018740%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F142793%22%20target%3D%22_blank%22%3E%40Thomas%20Pipkin%3C%2FA%3E%26nbsp%3B%2C%3C%2FP%3E%3CP%3EI%20think%20it%20is%20a%20timing%20issue%2C%20try%20to%20call%20your%20method%20inside%26nbsp%3B%20componentDidMount%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-markup%22%3E%3CCODE%3Epublic%20componentDidMount()%20%7B%0A%20%20%20%20this._getUser()%3B%0A%20%20%7D%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fen.reactjs.org%2Fdocs%2Freact-component.html%23componentdidmount%22%20target%3D%22_self%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3ELearn%20more%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ECheers%2C%3C%2FP%3E%3CP%3EFederico%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1019209%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20set%20the%20default%20for%20a%20pnp.sp%20people%20picker%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1019209%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F142793%22%20target%3D%22_blank%22%3E%40Thomas%20Pipkin%3C%2FA%3E%26nbsp%3B%2C%3C%2FP%3E%3CP%3Eplease%20tag%20me%2C%20or%20I%20don't%20receive%20notifications%20%3A)%3C%2Fimg%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESo%2C%20if%20you%20debug%20render%20method%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-markup%22%3E%3CCODE%3E%20%20%20%20defaultSelectedUsers%3D%7Bthis.state.LoggedInUserPPDefaultItems%20%3F%20this.state.LoggedInUserPPDefaultItems%20%3A%20%5B%5D%7D%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Ethis.state%20is%20populated%20correctly%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EFollowing%20%3CA%20href%3D%22https%3A%2F%2Fsharepoint.github.io%2Fsp-dev-fx-controls-react%2Fcontrols%2FPeoplePicker%2F%22%20target%3D%22_self%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Edocs%3C%2FA%3E%2C%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CTABLE%3E%3CTBODY%3E%3CTR%3E%3CTD%3EdefaultSelectedUsers%3C%2FTD%3E%3CTD%3Estring%5B%5D%3C%2FTD%3E%3CTD%3Eno%3C%2FTD%3E%3CTD%3EDefault%20selected%20user%20emails%20or%20login%20names%3C%2FTD%3E%3C%2FTR%3E%3C%2FTBODY%3E%3C%2FTABLE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EDid%20you%20try%20do%20add%20a%20mocked%20value%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-markup%22%3E%3CCODE%3E%20%20%20%20defaultSelectedUsers%3D%7B%5B%22user%40email.sample%22%5D%7D%0A%20%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ECheers%3C%2FP%3E%3CP%3EFederico%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1019288%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20set%20the%20default%20for%20a%20pnp.sp%20people%20picker%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1019288%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F142793%22%20target%3D%22_blank%22%3E%40Thomas%20Pipkin%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20feel%20you%20are%20setting%20the%20state%20of%20the%3C%2FP%3E%3CPRE%3ELoggedInUserPPDefaultItems%20%3C%2FPRE%3E%3CP%3E%26nbsp%3B%20in%20the%26nbsp%3B%3C%2FP%3E%3CPRE%3E_loggedInUser%3C%2FPRE%3E%3CP%3Emethod%20which%20will%20be%20called%20onChange.%3C%2FP%3E%3CP%3ESo%20it%20wont%20get%20prepopulated%20%2Cwhen%20you%20load%20the%20form%20%2CHowever%20is%20it%20getting%20populated%20when%20you%20focus%20or%20doing%20a%20key%20press%20%2Cas%20that%20will%20trigger%20onchange.%3C%2FP%3E%3CP%3ERemember%20setState%20is%20async%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1019886%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20set%20the%20default%20for%20a%20pnp.sp%20people%20picker%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1019886%22%20slang%3D%22en-US%22%3EHi%20Federico%2C%3CBR%20%2F%3ENot%20sure%20how%20to%20to%20tag%20you.%20It%20will%20allow%20me%20to%20put%20in%20the%20mocked%20value%20yes.%20That%20works.%20But%20how%20to%20get%20the%20logged%20in%20user.%20I%20will%20attempt%200365%20Developer's%20advice%20below.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1035677%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20set%20the%20default%20for%20a%20pnp.sp%20people%20picker%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1035677%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F453843%22%20target%3D%22_blank%22%3E%40O365Developer%3C%2FA%3E%26nbsp%3BI%20think%20that%20you%20are%20correct%20but%20I'm%20not%20sure%20how%20to%20force%20the%20people%20picker%20to%20change%20on%20render.%20How%20would%20I%20do%20this%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1041481%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20set%20the%20default%20for%20a%20pnp.sp%20people%20picker%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1041481%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F142793%22%20target%3D%22_blank%22%3E%40Thomas%20Pipkin%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHi%20THomas%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EYou%20need%20to%20set%20the%20state%20of%26nbsp%3B%3C%2FP%3E%3CPRE%3ELoggedInUserPPDefaultItems%3C%2FPRE%3E%3CP%3E%26nbsp%3Bto%20the%20current%20user%20values%20%2Cin%20the%20getUser()%20method%20which%20is%20invoked%20from%20componentDidMount()%20if%20I%60m%20not%20wrong%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1019120%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20set%20the%20default%20for%20a%20pnp.sp%20people%20picker%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1019120%22%20slang%3D%22en-US%22%3EHi%2C%3CBR%20%2F%3EGetUser()%20is%20running%20in%20componentDidMount.%3CBR%20%2F%3EAny%20other%20ideas%3F%3CBR%20%2F%3EThanks%2C%3CBR%20%2F%3ETom%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1339302%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20set%20the%20default%20for%20a%20pnp.sp%20people%20picker%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1339302%22%20slang%3D%22en-US%22%3EHow%20did%20you%20resolve%20ur%20issue%20%3F%20Even%20i%20m%20trying%20to%20default%20users..%20basically%20i%20get%20more%20than%205%20users%20email%20from%20webservice%2C%20always%20these%20people%20new%20means%20(info%20wont%20be%20available%20in%20user%20information%20list)%20its%20a%20hidden%20people%20picker%20would%20like%20to%20prepopulate%20and%20save%20the%20item..%20any%20idea%20how%20do%20i%20auto%20bind%20and%20trigger%20change%20event%20and%20capture%20usersid%20list%20so%20i%20can%20create%20item%20with%20the%20people%20picker%20column%20in%20the%20list%3F%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1341526%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20set%20the%20default%20for%20a%20pnp.sp%20people%20picker%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1341526%22%20slang%3D%22en-US%22%3E%3CP%3EHey%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F637671%22%20target%3D%22_blank%22%3E%40Guruprasad1380%3C%2FA%3E%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20was%20able%20to%20get%20the%20default%20user%20using%20its%20title%20as%20the%20key%20for%20the%20defaultSelectedUsers%20property.%20In%20my%20componentDidMount%2C%20I%20get%20the%20user%20using%20the%26nbsp%3B%3CSPAN%3Esp%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eweb%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EcurrentUser%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eget%3C%2FSPAN%3E%3CSPAN%3E()%20method%2C%20store%20it%20in%20the%20state%20and%20then%20pass%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3E%5B%3C%2FSPAN%3E%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Estate%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eme%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3ETitle%5D%20to%20the%26nbsp%3B%3C%2FSPAN%3EdefaultSelectedUsers%20property%20of%20the%20picker.%20Let%20me%20know%20if%20it%20doesn't%20work%20for%20you.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ERegards%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
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
Highlighted

Hi @Thomas Pipkin ,

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

 

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

Learn more

 

Cheers,

Federico

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

Hi @Thomas Pipkin ,

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

 

Highlighted

@Thomas Pipkin 

 

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

 

 

Highlighted

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

Highlighted

@Thomas Pipkin 

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

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

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