PnP People Picker Control in SPFx

PnP initiative is awesome because, among many other things like sample codes, guidance documentation, community calls. it has also provided some reusable controls which can be used in SPFx web parts and extension. You can refer to this link for details.

There are 2 types of controls which one which can be used in content of web part and other controls which can be used in property pane of SPFx web part.

In this article, we will learn how to use PnP People picker control in SPFx webpart.

Create WebPart

Run below commands in sequence.

Open a command prompt and create a directory for SPFx solution.

md PnPControlsDemo

Let us now go to root of above directory

cd PnPControlsDemo

Let us now create our solution

yo @microsoft/sharepoint

Select below options

Once you select all options in wizard one by one, it will take some time to generate the code structure.

Now let us install required npm packages to use PnP controls.

Run below command

npm install @pnp/spfx-controls-react --save

After it is completed, open same folder in Visual Studio code( you can use any other editor also).

Now let us modify code to use these controls.

Step – Passing WebPart context to React components

People picker requires Sharepoint site context to work with, hence we will pass it from our web part file to react components.

Open src\webparts\controls\components\IControlsProps.ts

Modify code to below

import { WebPartContext } from '@microsoft/sp-webpart-base';  

export interface IControlsProps {
  description: string;
  context: WebPartContext;  
}

Open src\webparts\controls\ControlsWebPart.ts

Modify render method to pass context.

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

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

Please note we have just added line ‘context:this.context’ .

Step – Modify React component associated with web part.

Open src\webparts\controls\components\Controls.tsx

Import the PeoplePicker Control

import { PeoplePicker, PrincipalType } from "@pnp/spfx-controls-react/lib/PeoplePicker";

Create Interface to Store State, add below code below last import statement

export interface IControlsState {  
  users: any[];  
}

Modify component class as below

export default class Controls extends React.Component<IControlsProps, IControlsState> {

  constructor(props: IControlsProps, state: IControlsState) {    
    super(props);    
    this.state = {users: []};    
  } 


public render(): React.ReactElement<IControlsProps> {
....
....
....

Modify render method

public render(): React.ReactElement<IControlsProps> {
   return (
     <div className={ styles.controls }>
       <div className={ styles.container }>
         <div className={ styles.row }>
           <div className={ styles.column }>
             <span className={ styles.title }>Welcome to SharePoint!</span>
             <p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
             <p className={ styles.description }>{escape(this.props.description)}</p>
             <a href="https://aka.ms/spfx" className={ styles.button }>
               <span className={ styles.label }>Learn more</span>
             </a>

             
           </div>
         </div>
       </div>
       <PeoplePicker    
               context={this.props.context}    
               titleText="People Picker"    
               personSelectionLimit={3}    
               groupName={""} // Leave this blank in case you want to filter from all users    
               showtooltip={true}    
               isRequired={true}    
               disabled={false}    
               ensureUser={true}    
               selectedItems={this._getPeoplePickerItems}    
               showHiddenInUI={false}    
               principalTypes={[PrincipalType.User]}    
               resolveDelay={1000} />    

     </div>
   );
 }

Add event to set state when value in people picker is changed. These state values then can be used any button click to save values to SharePoint list.

private _getPeoplePickerItems(items: any[]) {  
  console.log('Items:', items);  
  this.setState({ users: items });
}

For now, let us see this web part in action. Run gulp serve

gulp serve

Open workbench in context of any SharePoint online site.

https://spevents.com/sites/spsahmd2019/_layouts/15/workbench.aspx

Empty People picker, but when you click on control.

When you start typing

Once you select any user, check chrome console developer. We can see selected users as array. Please check below.

We can use these attributes to make REST API call to update PeoplePicker column in list or library.  That’s it for now.

Thanks for reading, hope you enjoyed it.