Hi All,

Greetings for the day !!!

Today in this article we will discuss how to use PnP PeoplePicker control in our SPFx component

TakeAway from this articles:

• Prerequisites required to use PnP PeoplePicker in SPFx component – Installing require packages
• How to use PnP PeoplePicker control in SPFx

Background:

• As I have started implementing SPFx, on SPFx form we have to use PeoplePicker controls
• After bit googling I have found bit handy to use PeoplePicker from PnP SPFx controls
• But then while implementing those, it took good amount of time, few issues while saving users values in respective SharePoint list
• There are several articles over there on net but those seems to either old or not working or not complete insight
• And hence here sharing my learning – SHARING IS CARING

Details: We will create simple SPFx webpart to demonstrate the PnP people control. Since in one go this will be huge article, I’ll divide this article in two parts :

STEP 1 – Simple adding control in SPFx webpart

STEP 2 – Using CRUD operation in SharePoint list for “PersonGroup” column – storing user values and fetching

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

• Lets create a simple demo SPFx component using following command
• I am using Visual Studio code for the same

yo @microsoft/sharepoint

• Following are the SPFx component details

• Make sure our SPFx webpart created successfully as

• Once we have successfully created SPFx webpart, open it in Visual Studio Code
• Make sure we have correct folder structure in place as

• Next step is to test our component
• We could test by using gulp serve command
• To test using gulp serve command, we need to change the URL for “intialPage” property in serve.json file in config folder as

• Once updated respective file we will use gulp serve command as

gulp serve

• make sure our SPFx webpart available to add on respective page as

• Make sure its working successfully as

• Now I’ll do some clean up so that we can implement PnP PeoplePicker
• I’ll just add one line – Welcome to demonstration of PnP PeoplePicker as

• We are done with our first step, our base is ready
• Now lets move to use – PnP SPFx components
• We will get whole list of PnP SPFx components here – Reusable React controls for your SharePoint Framework solutions 

STEP 2 – Using PnP SPFx controls in our SPFx web part

• 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

• Make sure we have respective PnP spfx-controls-react package installed successfully as

How to use PeoplePicker control in our solution :

• 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 as

<PeoplePicker
        context={this.props.wpcontext}
        personSelectionLimit={1}
        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
  • We are initializing context in Render () of SPFx web part as

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

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

• Refresh the workbench.aspx page OR do again gulp serve

• In onChange event we get all selected users as

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

• And we have method – _getPeoplePickerItems as – for time being just doing alert for ID of first user

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

I’ll stop here, in next article I’ll discuss how to store / fetch the value of PeoplePicker in SharePoint list – basically CRUD operation for Person column type in SharePoint list

Thanks for reading, feel free to discuss in case any issue / suggestions / thoughts

HAVE A WONDERFUL TIME AHEAD 🙂