Microsoft 365 : SPFx / React – Using PnP PeoplePicker – Part 2 – Saving users selected in PeoplePicker in SharePoint list in single / multi selected “Person” type column

Hi All,

Greetings for the day!!!

In one of previous article Microsoft 365 : SPFx / React – Using PnP PeoplePicker – Part 1 we started discussing about PnP PeoplePicker control

Today we move ahead and in this article we will discuss about how to save PnP PeoplePicker control values in SharePoint list column of type “Person or Group” in our SPFx component

Take away from this article:

• Prerequisites required to use PnP PeoplePicker in SPFx component – Installing require packages
• Using PnP people picker control in SPFx component
  • Single selected PnP PeoplePicker
  • Multi selected PnP PeoplePicker
• Packages require to save / update values in SharePoint list from SPFx control
• How to save people picker values in REACT state
• How to save people picker values in SharePoint list of column type “Person or Group”

Details:

STEP 1 – Creating SharePoint list with single and multiple selection column of type “Person or Group”

• We will create SharePoint list having two columns of “Person or Group”
• Column 1 – “SingleValuePerson” as

• Column 2 – “MultiValuePerson” as

STEP 2 – Creating simple SPFx web part and making sure its working

• Here, again wont go to details of creating SPFx component, please refer my previous article for the same – Microsoft 365 : SPFx / React – Using PnP PeoplePicker – Part 1

STEP 3 – Using PnP PeoplePicker controls in our SPFx component

• To use PnP SPFx controls we need install package – npm install @pnp/spfx-controls-react –save –save-exact as

npm install @pnp/spfx-controls-react --save --save-exact

• We need to import following modules in our solution
• Edit our Kjpnppeoplepicker.tsx file, include following line on the top

import { PeoplePicker, PrincipalType } from "@pnp/spfx-controls-react/lib/PeoplePicker";

• Next step is use the PeoplePicker control in your code
• We are using two PeoplePicker control as
• Single selection :

               <PeoplePicker
                  placeholder='Single value PeoplePicker demo'
                  context={this.props.wpcontext}
                  personSelectionLimit={1}
                  showtooltip={true}
                  required={true}
                  disabled={false}
                  onChange={this._getPeoplePickerItem.bind(this)}
                  showHiddenInUI={false}
                  principalTypes={[PrincipalType.User]}
                  resolveDelay={1000}
                  ensureUser={true}
              />

• Multiple selection :

                <PeoplePicker
                  placeholder='Multi value PeoplePicker demo'
                  context={this.props.wpcontext}
                  personSelectionLimit={10}
                  showtooltip={true}
                  required={true}
                  disabled={false}
                  onChange={this._getPeoplePickerItems.bind(this)}
                  showHiddenInUI={false}
                  principalTypes={[PrincipalType.User]}
                  resolveDelay={1000}
                  ensureUser={true}
                />

• Here, context –
  • we are using WebPartContext from ‘@microsoft/sp-webpart-base’
  • Taking WebPartContext as our SPFx component property

  public render(): void {
    const element: React.ReactElement<IKjpnppeoplepickerProps> =                   React.createElement(
      Kjpnppeoplepicker,
      {
        description: this.properties.description,
        wpcontext: this.context
      }
    );

    ReactDom.render(element, this.domElement);
  }

• We will also add one “Submit” button, on the click of this button we will save respective PeoplePicker control values to SharePoint list

<PrimaryButton text="Submit" onClick={() => this.submit()} />

• Actual UI will looks like

STEP 4 – Saving PeoplePicker values in REACT state

• What is REACT state, I’ll write separate article on it
• For using state variables we will export one interface say – “IKjpnppeoplepickerState“
• State interface having two variables
  • one for storing value of single selection PeoplePicker
  • Other for storing value of multiple selection PeoplePicker

export interface IKjpnppeoplepickerState {
  singleuser:string;
  multiuser:string[];
}

• In our tsx file, in constructor we will initialize the state variables as

export default class Kjpnppeoplepicker extends React.Component<IKjpnppeoplepickerProps, IKjpnppeoplepickerState> {
  
  constructor(props) {
    super(props);

    //Initializing state

    this.state = {
      singleuser: "",
      multiuser:[]
    };

  } //constructor 
}//class

• Now we need to get the values from respective PeoplePicker control and update the state variables
• In onChange event we get all selected users
• For single selection PeoplePicker we have method – _GetPeoplePickerItem as

onChange={this._getPeoplePickerItem.bind(this)}

   public _getPeoplePickerItem(items: any[]) {

    alert("ID" + items[0].id);

    let selectedUsers = [];

    for (let item in items) {
      selectedUsers.push(items[item].id);
    }

    this.setState({singleuser:selectedUsers[0]}); //Here taking first value 
                              //only since this is single selection PeoplePicker
 } //_getPeoplePickerItems

• For multiple selection PeoplePicker we have method – _GetPeoplePickerItems as

onChange={this._getPeoplePickerItems.bind(this)}

public _getPeoplePickerItems(items: any[]) { 
      alert("ID" + items[0].id);

      let selectedUsers = [];

      for (let item in items) {
        selectedUsers.push(items[item].id);
      }

      this.setState({multiuser:selectedUsers});

   } //_getPeoplePickerItems

STEP 5 – On Submit button click saving PeoplePicker values in SharePoint list

• We are using latest version of PnPjs version 3
• We are using spfi and SPFx objects for accessing our list and creating new item in list
• Following is the code

public async submit(){
      
      const sp = spfi("https://knowledgejunction1.sharepoint.com/sites/SPFxPnPControlsDemo/")
      .using(SPFx(this.props.wpcontext));
      
       await sp.web.lists.getByTitle("SPFxPeoplePickerDemo").items.add(
        {
          SingleValuePersonId: this.state.singleuser,
          MultiValuePersonId : this.state.multiuser 
        });

      alert("submit done");

  }//submit()

• In above Submit code please note the columns – SingleValuePersonId and MultiValuePersonId – “Id” is postfixed to our actual column name – SingleValuePersonId and MultiValuePerson
• Empty list view

• Lets have users and click on Submit button as

• Finally the result

Thanks for reading!! Feel free to discuss in case any issue / suggestions / questions

HAVE A FANTASTIC TIME AHEAD !!! LIFE IS BEAUTIFUL 🙂