Set multiple values to OOTB SharePoint client people picker control on page load using SharePoint Framework (SPFx)

This post shows the required steps to set multiple values to OOTB SharePoint client people picker control using SharePoint framework (SPFx).

Introduction 

 

In this blog, we will learn to set multiple users to SharePoint OOTB people picker control on a page load using the SharePoint framework (SPFx).

 

People picker is used to select one or more entities. Pickers are used to manage a group of people by selecting from the list of people within a group.

 

Steps Involved

 

Declare SPclientPeoplePicker as global variable in your .tsx file as shown below. 

declare var SPClientPeoplePicker: any;

Install @microsoft/sp-core-library,Jquery and sp-pnp-js to your .tsx file as shown below. 

npm install --save sp-pnp-js
npm install --save jquery
npm install --save @microsoft/sp-core-library

Install @microsoft/sp-core-library,Jquery and sp-pnp-js to your .tsx file as shown below.

import * as pnp from "sp-pnp-js";
import $ from "jquery";
import { UrlQueryParameterCollection } from "@microsoft/sp-core-library";

ListItemId is passed as a parameter to the below function to fetch the people picker values from sharepoint list.

In the below example, I have used the Invitees and CopyTo columns as a people picker with multiple values. 

 

Note: I have used the factory model to fetch the values from a SharePoint list. You can make use of rest API to get the data.

 

You can refer my other blogs to perform CRUD operation in SPFx using factory model. 

/* Set PeoplePicker values on retriveing the items from the list*/
  private setPeoplePickerValues(oListItemID): void {
    try {
      factory.getItems(this.props.spHttpClient, this.props.siteUrl, "SharePointListName", "$select=Invitees/ID,Invitees/EMail,Invitees/Title,CopyTo/ID,CopyTo/EMail,CopyTo/Title&$expand=Invitees,CopyTo", oListItemID)
        .then((items: any[]) => {
          if (items) {
            if (items["d"].Invitees.results !== undefined) {
              var tempArr = [];
              $.each(items["d"].Invitees.results, function (index, value) {
                this.setSinglePeoplePicker($("div[title='Invitees']").attr('id'),value.EMail);
              });
            }
            if (items["d"].CopyTo.results !== undefined) {
              var tempArr = [];
              $.each(items["d"].CopyTo.results, function (index, value) {
                this.setSinglePeoplePicker($("div[title='CopyTo']").attr('id'),value.EMail);
              });
            }
          }
        });
    } catch (error) {
      console.log(`Error occured in setPeoplePickerValues method Error message: ${error.message}`);
    }
}

Below function accepts, DivId and EmailAddress as input parameters to set the values to people picker control.

 

divID - ID of the people picker control for which the default values to be inserted.

 

emailAddress - Email Address of the user. 

/** set single people picker value */
public setSinglePeoplePicker(divID, emailAddress): void {
    try {
      SPClientPeoplePicker.SPClientPeoplePickerDict[divID].AddUnresolvedUser({'Key':emailAddress},true);
    } catch (error) {
      console.log(`Error occured in setSinglePeoplePicker method - Error message: ${error.message}`);
      throw error;
    }
}

Usage: Call the method in your componentDidMount Function. 

/* componentDidMount() */
    public componentDidMount(){
        let queryParameters = new UrlQueryParameterCollection(window.location.href);
        let itemID: number = parseInt(queryParameters.getValue("ID"));
        if (itemID != null && itemID > 0) {
            let strCurrentItemID: string = itemID.toString();
            this.setPeoplePickerValues(strCurrentItemID);
        }
    }

Please feel free to share your comments.

 

Hope this helps!!!!!