Sp-dev-fx-controls-react: PeoplePicker Control needs property to initialize control with person(s) or group(s).

[rchivert]

Category

[x] Enhancement

[ ] Bug

[ ] Question

Version

Please specify what version of the library you are using: [ 1.6 ]

Expected / Desired Behavior / Question

I have a need for a property to initialize the peoplepicker control with a person or group.

Observed Behavior

I do not see how to do this with current set of properties.

[AsishP]

@rchivert. could you please elaborate? Are you suggesting to prefill the control with a set of users on load? If you would like limit the search, use groupName to limit the search to a SharePoint group.

[phettz]

@AsishP Yes prefill the controller with an entity (eg. [email protected]). So you can use the controller for editing stored data etc without the need to show the current value another place.

[rchivert]

@AsishP - echoing @phettz ...... yes.

[AsishP]

@rchivert @phettz , sure. Will open up the selecteditems property which will allow an array of selected emails to prepopulate the control.

The only catch is how do we validate that the emails are valid users of this site. Or what happens if the users are not part of the Site Users list. Should we validate them and show error or still add in the control?

[phettz]

@AsishP, that sounds great

Hm, could use /_api/web/ensureuser if you open up for sending in LoginName(email in most cases)? Then they should be added to the Site Users list too if they don't exists.

If the user is not valid one could show a validation error and not return that object in the items returned by the selectedItems prop?

if (selectedItems) {
      // dont return not valid users here
      selectedItems(items);
 }

Just a thought, maybe there is a more clever way of doing it

[rchivert]

Hmmm indeed. We need to consider the case where the user has left the tenant.... we still want to be able to pre-populate the peoplepicker, I'd think. But it would no longer allow an update... since user is no longer valid. I recommend looking at how the "classic" peoplepicker handles this scenario. Also, this React Peoplepicker has a nice initialization... without validating the users... so at least it can be pre-populated. But man oh man... it was a pain for me to figure out how to initialize the user : SharePointUserPersona[] arrary.

[XopherDesign]

Agree, the control can only be used on new forms if you can't send it a user to preload. How would the edit form work if a user has already been entered?

[AsishP]

@phettz , I don't know if we should add users to the site, if not present, only for prefilling the control. Love the idea of validation. We could do that?

@rchivert , the example you have mentioned is a web part so showing the property pane section is possible in that case. Peoplepicker is only a control, so how do you think of acheiving that functionality. Currently only thinking of an array of emails to preset users ? What additional features could be helpful?

@XopherDesign , the edit control will have a list of users prefilled when the control is loaded. The control initial state is empty right now. After the implementation, it would allow users to be prefilled if provided with selectedItemsproperty.

[XopherDesign]

@AsishP , is the edit control in development or available now?

[AsishP]

@XopherDesign, not available yet, starting development but should be done soon. I just have to cater for exceptions of user not present in the web scenario.

[AsishP]

Hi All, this functionality is implemented now. Added a property - defaultSelectedUsers = {["[email protected]", "[email protected]"]} , to which we can give an array of emails to select users.

If the users, don't exist, the users are added to the control by a random unique Id. They cannot be added later as they are not part of the Site users list. Please let me know if this looks ok.

@estruyf, fyi, the above is merged with the existing PR.

[estruyf]

Thanks @AsishP will be processed soon!

[estruyf]

This enhancement is merged and planned to be released with the 1.7.0 release.

[Saroj-K-Panda]

Thanks alot @AsishP, I had a requirement to fetch person/group field data from list like TO, CC, From.

I was wondering to get the solution, After reading your comment, i implemented perfectly this defaultSelectedUsers in people picker.

Here is the code snippet

getItemspnp = (id: number) => {

  var reactHandler = this; 
  pnp.setup({
    spfxContext: this.props.context
  }); 
pnp.sp.web.lists.getByTitle("EmailAlert").items.getById(id).select("Title","ListName","Subject","Body","To/EMail","To/ID","User/EMail","User/ID","CC/ID","CC/EMail").expand("To","User","CC").get().then((item: any) => {

    let ccEMAils = item.CC && item.CC.map((item)=>{return item.EMail});         
    let toEMails = item.To && item.To.map((item)=>{return item.EMail});

    let toIDs = item.To && item.To.map((item)=>{return item.ID.toString()});
    let ccIDs = item.CC && item.CC.map((item)=>{return item.ID.toString()});

    console.log("ccEMAils===============:", ccEMAils);   
    console.log("toEMails===============:", toEMails);   

    reactHandler.setState({
      SiteUrl: item.Title,
      ListName: item.ListName,
      Subject: item.Subject,
      Body: item.Body,
      defaultSelectedUserFrom: item.User?[item.User.EMail]:[],
      defaultSelectedUsersCC: ccEMAils? [...ccEMAils]:[],
      defaultSelectedUserTo: toEMails?[...toEMails]:[],
      From: item.User?item.User.ID.toString():"",
      CC: ccIDs?[...ccIDs]:[],
      To: toIDs?[...toIDs]:[]
    });
});

}

---

context={this.props.context}
titleText="From"
personSelectionLimit={1}
groupName={""} // Leave this blank in case you want to filter from all users
showtooltip={true}
isRequired={true}
disabled={false}
selectedItems={this._getPeoplePickerItemsFrom}
**defaultSelectedUsers={this.state.defaultSelectedUserFrom?this.state.defaultSelectedUserFrom:null}**
showHiddenInUI={false}
principalTypes={[PrincipalType.User]}
resolveDelay={1000}
ensureUser={true} />

[webdes03]

Tagging onto an old thread here in the hopes that someone here has already solved my problem...

How should the defaultSelectedUsers be constructed to initialize groups? I'm using the PeoplePicker control to select AD groups, and no combination of defaultSelectedUsers values appear to set the default state of the people picker for an edit scenario.

It correctly stores the values when I pick a group from the list:

But when reloading the form, I just get a blank people picker even though defaultSelectedUsers is "properly" set per the documentation...

Is there maybe some voodoo I need to do to modify the "loginName" reported by the original selection in order to make it correctly find the group for default initialization?

[srilakshmiradhakrishnan]

Hi All,

I am also facing the above mentioned issue. Couldn't initialize user field with other than user name like sharepoint group, security group or distribution list name.

We have a client requirement to allow people picker to resolve all type of entries.

Kindly help on this.

Thanks

[Sarah4x]

Hey Everyone,

Same here. The defaultSelectedUsers should be updated to something like defaultSelectedUsersGroups.
Ideally it would make the most sense to accept the same array format as the output from selectedItems. That way you can store the data and you can load the data, but right now it takes a string array which isn't flexible to handle the different principal types.

Thanks

[unnieayilliath]

@webdes03 Did you find any workaround to show the security groups using defaultSelectedUsers attribute?

[webdes03]

@webdes03 Did you find any workaround to show the security groups using defaultSelectedUsers attribute?

Sort of, but not really... I ended up just implementing a TagPicker control and throwing away the PeoplePicker because I couldn't get the PeoplePicker to work.

[brianpmccullough]

@Sarah4x @unnieayilliath @webdes03

Setting "principalTypes" to include PrincipalType.SecurityGroup and then specifying the name of the security group in the defaultSelectedUsers does the trick?

[vishalshitole]

Above approach works for me. Thanks @brianpmccullough for sharing. However, I wonder how it works with the group name but not with the group item id. Group id more likely qualifies to be unique identifier than group name :-).