Introduction

Hi everyone, this is part 10 of PnP React Controls Series. This post will explain the usage of the PnP PeoplePicker control. We will see how we can leverage this control on our SPFx projects and make use of the feature provided by this control. Thanks to the community.

About the Control

This control could be very useful for the developers when they want to do some custom target audience or permision mapping. It allows the users to select different types of users or groups. Once the user(s) or group(s) were selected, there are some additional properties apart from the name and the email are provided to make use of the properties.

Focus on the Code

You can refer Part 1 post on the creation of the SPFx project and installing all the dependencies. In addition to the dependencies mentioned in that post you have to install @pnp/sp – v3.5.1. You should also do some changes to the project files to make the pnpjs version 3 to work on SPFx 1.14.0. Please follow this link to do the changes.

Created a webpart named peoplePickerDemo. Below is the PeoplePickerDemo.tsx file.

import * as React from 'react';
import { FC } from 'react';
import styles from './PeoplePickerDemo.module.scss';
import { IPeoplePickerDemoProps } from './IPeoplePickerDemoProps';
import { PeoplePicker, PrincipalType } from "@pnp/spfx-controls-react/lib/PeoplePicker";

const PeoplePickerDemo: FC<IPeoplePickerDemoProps> = (props) => {
    const {
        description,
        isDarkTheme,
        environmentMessage,
        hasTeamsContext,
        userDisplayName
    } = props;

    const _getPeoplePickerItems = (items: any[]) => {
        console.log('Items:', items);
    }

    return (
        <section className={`${styles.peoplePickerDemo} ${hasTeamsContext ? styles.teams : ''}`}>
            <div className={styles.welcome}>
                <img alt="" src={isDarkTheme ? require('../assets/welcome-dark.png') : require('../assets/welcome-light.png')} className={styles.welcomeImage} />
            </div>
            <div>
                <h2>PnP PeoplePicker Control Demo</h2>
                <div>
                    <PeoplePicker
                        context={props.context as any}
                        titleText="All Users only"
                        personSelectionLimit={3}
                        placeholder="Select the users"
                        required={true}
                        onChange={_getPeoplePickerItems}
                        showHiddenInUI={false}
                        principalTypes={[PrincipalType.User]}
                        resolveDelay={1000} />
                    <PeoplePicker
                        context={props.context as any}
                        titleText="All Security groups only"
                        personSelectionLimit={3}
                        placeholder="Select the Security group"
                        required={true}
                        onChange={_getPeoplePickerItems}
                        showHiddenInUI={false}
                        principalTypes={[PrincipalType.SecurityGroup]}
                        resolveDelay={1000} />
                    <PeoplePicker
                        context={props.context as any}
                        titleText="All SharePoint groups only"
                        personSelectionLimit={3}
                        placeholder="Select the SharePoint group"
                        required={true}
                        onChange={_getPeoplePickerItems}
                        showHiddenInUI={false}
                        principalTypes={[PrincipalType.SharePointGroup]}
                        resolveDelay={1000} />
                </div>
            </div>
        </section>
    );
};

export default PeoplePickerDemo;

Below are the updates done to the file.

• Changed the class component to the react hooks
• Created a method named _getPeoplePickerItems to get the information about the selected user(s) or group(s).
• Following are the properties of the control that allows us to customize based on our requirement
  • context – BaseComponentContext to load the folders from the library
  • titleText – The label to be displayed for the control
  • personSelectionLimit – To limit the number of selection of user(s) or group(s)
  • placeholder – The hint text to be displayed on the control
  • principalTypes – Choose from User or Distribution List or Security Group or SharePoint Group.
  • onChange – Method that will be executed when a user or group is selected. There are some properties that are returned for the selected user or group.
    • Below are the properties returned when selected the User
      • id
      • imageInitials
      • imageUrl
      • loginName
      • optionalText
      • secondaryText
      • tertiaryText
      • text
    • Below are the properties that are returned when selected the Security Group or SharePoint Group
      • id
      • imageInitials
      • loginName
      • secondaryText
      • text
  • defaultSelectedUsers – To pre-populate the control with the selected users.
  • suggestionsLimit – Maximum number of items to be shown in the suggestion list when the user type in the name

Reference URL

PeoplePicker – @pnp/spfx-controls-react

Sample Implementation

Conclussion

I hope you had learned something about one of the pnp control. There are lot to come in future.

Please free to post your comments and let me know if you want me to post article on any particular feature or plugins that relates to SharePoint. Thanks for your support.

sudharsank/pnpcontrols-demo: Demo project on different PnP React Controls. (github.com)

Happy Coding…