PnP People Picker Control For SPFx

Hi nanddeep-nachan, How do we enable the people picker in spfx to search guest users as well. as currently this is not searching guest accounts from the tenant instead only site level guests are shown. did enable ShowPeoplePickerSuggestionsForGuestUsers to True , but still no luck. could you please help on this.

Hi Nanddeep, Is there any chance to show live persona card while hover on the particular user?

You haven't assigned any user in addUsers array in _getPeoplePickerItems method, how will it be saved ?

Thanks for the article, how can i call this react component in SPFX angular component?

Thanks for the article, I used this people picker in my spfx webpart, got issue in form level validation, on my submit click even though the people picker control is empty it is not firing the error message, it fires only when I delete any selected user in the control, I have made the required property to true, can you please help..

In PayLoad , it should be UsersId: this.state.addUsers instead of just Users

How can we make People Picker values as read-only?

Hi I am trying to add 2 or more people picker controls in my spfx page, how do i retrieve each control values I dont see ID property for peoplepicker

@autobind private addSelectedUsers(): void { sp.web.lists.getByTitle("SPFx Users").items.add({ Title: getGUID(), UsersId: { results: this.state.addUsers } }).then(i => { console.log(i); }); }

import { sp } from '@pnp/sp/presets/all';

I got it to finally work when I set the People field in Sharepoint to multiple selection. And reference the Sharepoint field not by internal name but adding Id to it.So if the field internal name was User then add UserId to the addSelectedUsers(). Also I had to download your code to see that you have that private _getPeoplePickerItems(items: any[]) { console.log('Items:', items); } modified in your .zip but not in the article. Big fan of what you do. Thanks for sharing your knowledge and resources!!

Hi, I can add item from form to SP List Item. But not able to populate Drop Down and People Picker control value from SP List Item to form. Can you help? It's urgent.Thanks

Madhan Thurai thank you.. it helped me..

Public submitClicked = ():void =>{ pnp.sp.web.lists.getByTitle('ListName').items.add({ Title: $("#title_id").val().toString(), Manager : "what command I need to type here"

Hello, I have 4 people picker coulmns in my list. I have created form to save the people from these people picker to my list. I am using something like below for my other text box columns. But unable to do it for my people column to get it saved

How to copy paste multiple user ids or emails on the control? Will it resolve ?

Before that enable multiple value in the settings

Store in the format for eg Person is your columname ,store as PersonId:5

In Sharepoint list randomly generated ID is stored properly but in Users column Name is not getting stored

I have tried a lot still people picker value is not getting stored in sharepoint list. I have followed the same procedure

Hi There! Some small suggestion, I think that if the column is named "Users", then the name you should use for the update request is "UsersId"

And this outside the render method, but it does not work.private _onChange = (e: React.KeyboardEvent) => { const name = this.props.data.Name; const value = (e.target as HTMLInputElement).value; this.props.onChange(name, value);

I've got the People Picker working, but my Sharepoint list has other fields that I would like to update using input boxes and drop down boxes. How do I add the relevant code to the render method? I tried this in the render method. <input type="text" value={this.props.data.Value} onChange={this._onChange}/>

How could I do the reverse, as in, add people from a SharePoint list to the People Picker web part?

Its working i do some alteration,also i need an code for populating people picker field from list

Var peoplepicarray=[]; for(let i=0;i<this.state.addUsers.length;i++){ peoplepicarray.push(this.state.addUsers[i]["id"]); } let projectname=$("#ProjectName").val(); let projectdetail=$("#ProjectDetails").val(); sp.web.lists.getByTitle("ProjectMaster").items.add({ "ProjectName":projectname, "ProjectManagerId": { "results": peoplepicarray}, "ProjectDetails":projectdetail /* ProjectManager: { results: this.state.addUsers } */ })

The state become empty when storing the data,so peoplepicker field not get updated

This is my user id "i:0#.f|membership|[email protected]" and i am using the below options to create the user field. But it throws the error. Manager, ManagerId and ManagerStringId but not yet created the user. Uncaught (in promise) ProcessHttpClientResponseException: Error making HttpClient request in queryable: [400] at new ProcessHttpClientResponseException (https://localhost:4321/dist/react-crud-web-part.js:109734:28) at https://localhost:4321/dist/react-crud-web-part.js:109775:24 -------- We were not facing any issue while adding the user by SPUserId

Can we add the people picker column value to the list without PnP?

It gets tricky when we want to bind the users value to this control which is retrieved from SharePoint list. could you please add the same?