How to set a SharePoint list field using a pnp.sp People Picker

Question

I do not know the code to add the user, selected in a People Picker from the pnp.sp library.

I've tried the below code example (by using State) but this I understand is not saving the users selection.

private _getPeoplePickerItems() {
    pnp.sp.web.siteUsers.get().then((data) =>{
      this.setState({
        DeptContact: data
      });
    });
}

And the people picker in the render:

<PeoplePicker
            context={this.props.context}
            titleText="People Picker"
            personSelectionLimit={3}
            groupName={''} 
            showtooltip={false}
            isRequired={false}
            disabled={false}
            selectedItems={this._getPeoplePickerItems}
            showHiddenInUI={false}
            principalTypes={[PrincipalType.User]}
            resolveDelay={1000} 
            />  
          </div>
          </div>

I expect a user to be able to enter a user into the people picker and resolve it and then submit it. This user is then added to a 'Person' column in a sharepoint list.

Lee_MSFT Lee_MSFT · Accepted Answer · 2019-08-20T08:44:16

My test code for your reference(react framework).

import * as React from 'react';
import styles from './PnpReact.module.scss';
import { IPnpReactProps } from './IPnpReactProps';
import { escape } from '@microsoft/sp-lodash-subset';
import pnp from "@pnp/pnpjs";

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


export interface IDefaultData{ 
  PeoplePickerDefaultItems:string[];
}
export default class PnpReact extends React.Component<IPnpReactProps, IDefaultData> {

  public constructor(props: IPnpReactProps,state: IDefaultData){ 
    super(props); 
    this.state = { 
      PeoplePickerDefaultItems:[] 
    }; 
  }

  //get users from peoplepicker
  private _getPeoplePickerItems(items: any[]) {      
    console.log(items);      
}

public componentDidMount(){
  this.GetDefaultUsers();  
}
private GetDefaultUsers() {    
  pnp.sp.web.siteUsers.get().then((items: any[]) =>{        
    var defaultUsers:string[]=[];
    //get last 2 users    
    for(var i=items.length-1;i>items.length-3;i--){      
      defaultUsers.push(items[i].Email);
    }    
    this.setState({ 
      PeoplePickerDefaultItems:defaultUsers
    });     
  });  
}

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

    return (
      <div className={ styles.pnpReact }>
        <div className={ styles.container }>
          <div className={ styles.row }>
          <PeoplePicker
            context={this.props.context}
            titleText="People Picker"
            personSelectionLimit={3}
            groupName={''} 
            showtooltip={false}
            isRequired={false}
            disabled={false}
            selectedItems={this._getPeoplePickerItems}   
            defaultSelectedUsers={this.state.PeoplePickerDefaultItems}          
            showHiddenInUI={false}
            principalTypes={[PrincipalType.User]}
            resolveDelay={1000} 
            />  
            <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>
      </div>
    );
  }
}

How to set a SharePoint list field using a pnp.sp People Picker

1 Answers