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.
  1. declare var SPClientPeoplePicker: any;
Install @microsoft/sp-core-library,Jquery and sp-pnp-js to your .tsx file as shown below.
  1. npm install --save sp-pnp-js
  2. npm install --save jquery
  3. npm install --save @microsoft/sp-core-library
Install @microsoft/sp-core-library,Jquery and sp-pnp-js to your .tsx file as shown below.
  1. import * as pnp from "sp-pnp-js";
  2. import $ from "jquery";
  3. 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.
  1. /* Set PeoplePicker values on retriveing the items from the list*/
  2. private setPeoplePickerValues(oListItemID): void {
  3. try {
  4. 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)
  5. .then((items: any[]) => {
  6. if (items) {
  7. if (items["d"].Invitees.results !== undefined) {
  8. var tempArr = [];
  9. $.each(items["d"].Invitees.results, function (index, value) {
  10. this.setSinglePeoplePicker($("div[title='Invitees']").attr('id'),value.EMail);
  11. });
  12. }
  13. if (items["d"].CopyTo.results !== undefined) {
  14. var tempArr = [];
  15. $.each(items["d"].CopyTo.results, function (index, value) {
  16. this.setSinglePeoplePicker($("div[title='CopyTo']").attr('id'),value.EMail);
  17. });
  18. }
  19. }
  20. });
  21. } catch (error) {
  22. console.log(`Error occured in setPeoplePickerValues method Error message: ${error.message}`);
  23. }
  24. }
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.
  1. /** set single people picker value */
  2. public setSinglePeoplePicker(divID, emailAddress): void {
  3. try {
  4. SPClientPeoplePicker.SPClientPeoplePickerDict[divID].AddUnresolvedUser({'Key':emailAddress},true);
  5. } catch (error) {
  6. console.log(`Error occured in setSinglePeoplePicker method - Error message: ${error.message}`);
  7. throw error;
  8. }
  9. }
Usage: Call the method in your componentDidMount Function.
  1. /* componentDidMount() */
  2. public componentDidMount(){
  3. let queryParameters = new UrlQueryParameterCollection(window.location.href);
  4. let itemID: number = parseInt(queryParameters.getValue("ID"));
  5. if (itemID != null && itemID > 0) {
  6. let strCurrentItemID: string = itemID.toString();
  7. this.setPeoplePickerValues(strCurrentItemID);
  8. }
  9. }
Please feel free to share your comments.
Hope this helps!!!!!