Microsoft 365 : SPFx / React – Using PnP PeoplePicker – Part 1

SPFx - using PnP PeoplePicker control
SPFx - using PnP PeoplePicker control

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

SPFx - Creating simple SPFx component
fig : SPFx – Creating simple SPFx component

  • Make sure our SPFx webpart created successfully as

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

SPFx - SPFx component created successfully - Folder structure in Visual Studio
fig : SPFx – SPFx component created successfully – Folder structure in Visual Studio

  • 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
SPFx - Updating  - testing our component using gulp serve command - Changing the URL for "intialPage" property in serve.json file in config folder
fig : SPFx – Updating – testing our component using gulp serve command – Changing the URL for “intialPage” property in serve.json file in config folder
  • 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

SPFx component - gulp serve - adding SPFx on page
fig : SPFx – gulp serve – adding SPFx on page

  • Make sure its working successfully as

SPFx - successfully created
fig : SPFx – successfully created

  • 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

fig : SPFx - successfully created
fig : SPFx – successfully created – cleaned up

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

SPFx - installing library - pnp spfx controls for react
fig : SPFx – installing library – pnp spfx controls for react

SPFx - library - pnp spfx controls for react
Fig : SPFx – installed successfully library – pnp spfx controls for react

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

SPFx - importing PnP PeoplePicker control
Fig : SPFx – importing PnP PeoplePicker control

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

SPFx - using PnP PeoplePicker control - passing current SPFx web part component
Fig : SPFx – using PnP PeoplePicker control – passing current SPFx web part context
  • Refresh the workbench.aspx page OR do again gulp serve

SPFx - using PnP PeoplePicker control
Fig : SPFx – using PnP PeoplePicker control

SPFx - using PnP PeoplePicker control
Fig : SPFx – using PnP PeoplePicker control

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

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. April 25, 2022

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

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

%d bloggers like this: