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

PnP PeoplePicker demo in SPFx control
PnP PeoplePicker demo in SPFx control

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 Groupin 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 1Creating 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
M365 - SPFx - Using PnP People Picker - Creating single selection column of type Person or Group
fig : M365 – SPFx – Using PnP People Picker – Creating single selection column of type Person or Group
  • Column 2 – “MultiValuePerson” as
M365 - SPFx - Using PnP People Picker - Creating multiple selection column of type Person or Group
fig2 : M365 – SPFx – Using PnP People Picker – Creating multiple selection column of type Person or Group

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

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";

M365 - SPFx - Using PnP People Picker - importing PnP PeoplePicker control
fig4 : M365 – SPFx – Using PnP People Picker – importing PnP PeoplePicker control

  • 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);
  }

SPFx – using PnP PeoplePicker control – passing current SPFx web part context
Fig : SPFx – using PnP PeoplePicker control – passing current SPFx web part context

  • 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

M365 - SPFx - Using PnP People Picker
fig 6 : M365 – SPFx – Using PnP People Picker

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

M365 - SharePoint list with respective single selection and multiple selection columns
fig 7 : M365 – SharePoint list with respective single selection and multiple selection columns

  • Lets have users and click on Submit button as

M365 - SPFx - Submitting the values
fig 8 : M365 – SPFx – Submitting the values

  • Finally the result

M365 - SPFx - PeoplePicker values stored in SharePoint list
fig 9 : M365 – SPFx – PeoplePicker values stored in SharePoint list

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

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

Prasham Sabadra

LIFE IS VERY BEAUTIFUL :) ENJOY THE WHOLE JOURNEY :) Founder of Knowledge Junction and live-beautiful-life.com, Author, Learner, Passionate Techie, avid reader. Certified Professional Workshop Facilitator / Public Speaker. Scrum Foundation Professional certificated. Motivational, Behavioral , Technical speaker. Speaks in various events including SharePoint Saturdays, Boot camps, Collages / Schools, local chapter. Can reach me for Microsoft 365, Azure, DevOps, SharePoint, Teams, Power Platform, JavaScript.

You may also like...

1 Response

  1. August 13, 2023

    […] Microsoft 365 : SPFx / React – Using PnP PeoplePicker – Part 2 – Saving users selected in PeoplePicker in SharePoint list in single / multi selected “Person” type column – https://knowledge-junction.in/2022/04/25/microsoft-365-spfx-react-using-pnp-peoplepicker-part-2-savi&#8230; […]

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: