Scenario


We have a pnp people picker field (PropertyFieldPeoplePicker) in SPFx property pane. We need to read and show the value of the selected user from the people picker control.

We have given LeadershipName as the property name for our PropertyFieldPeoplePicker.



Quick answer

//For single user field:
let jobTitle    = this.properties.LeadershipName[0].jobTitle;
let email       = this.properties.LeadershipName[0].email;
let fullName    = this.properties.LeadershipName[0].fullName;
let id          = this.properties.LeadershipName[0].id;
let imageUrl    = this.properties.LeadershipName[0].imageUrl;
let initials    = this.properties.LeadershipName[0].initials;
let login       = this.properties.LeadershipName[0].login;

//For multiple users field:
let peopleObj = [];
this.properties.LeadershipName.map(Leadership => {    
    peopleObj.push(Leadership.email);
})

Description

When you use pnp people picker (PropertyFieldPeoplePicker) in your SPFx property pane you will always need to read it's value to perform different operations. 

pnp people picker provides below details about the selected properties:
  • jobTitle
  • email
  • fullName
  • id
  • imageUrl
  • initials
  • login

We know that pnp people picker property can be configured to have single or multiple users selected.

When we need to read a people picker value which is configured for single user, we can use below syntax:

let jobTitle    = this.properties.LeadershipName[0].jobTitle;
let email       = this.properties.LeadershipName[0].email;
let fullName    = this.properties.LeadershipName[0].fullName;
let id          = this.properties.LeadershipName[0].id;
let imageUrl    = this.properties.LeadershipName[0].imageUrl;
let initials    = this.properties.LeadershipName[0].initials;
let login       = this.properties.LeadershipName[0].login;

When we have multiple users selected in a single people picker field, we have loop through each user using ma function as shown below: 

let peopleObj = [];
this.properties.LeadershipName.map(Leadership => {    
    peopleObj.push(Leadership.email);
})