Auto populate user & manager (using PNPJS + Office UI Fabric Persona + Graph client)

In most of the user request forms users wish to have some of the users details to be auto populated instead of entering manually to avoid human error and to maintain consistency. Especially the manger details, needs to be dynamically loaded from the User Profile.

In this article we will see how to auto populate current user in a people picker and their manger details in a Persona control. We will also see how to update manager details when user is changed in people picker. Thanks for Waldek for sp-starter-kit. It was so helpful.

What is used?

  • PNP SPFX People picker reusable control
  • Office UI Fabric Persona control
  • PNPJS to get user profile details
  • Graph API used to get user picture

Step 1: Create SPFX React webpart

Step 2: Add a People picker

I have used the PnP SPFX reusable react controls people picker. Install it with the below command into the project terminal

Open “.tsx” file and add this import statement just below the default imports

Add the below people picker now into the method return statement

Step 3: Add Persona

To display the Manager photo and details I am going to use an Office UI Fabric Persona. You can still use another people picker and disable it to make it non editable. But I just want to try 😊 with Persona.

Add the below import statement just below the people picker import statement

Add the below persona into the render method return statement

Step 4: Declare State and Props

Create the below interface in the .tsx file just above the default class

Open “ISpfxpeoplepickerProps.ts” and replace it with below code

We are ready now to load the data to the added controls.

Step 4: Load current user people picker

To get current user logged in I am going to use PnP SP JS and load it in people picker

Add these import statement in .tsx file

As we need to load current user on webpart load we will add code inside componentDidMount() method

Add these private methods inside the class to get and load manager details

Step 5: Load manager picture using GraphClient

Open the .ts webpart file. Add this import statement

then add this onInit() method inside default class

Why do we need to use Graph for this?

I tried using “sp.profiles.profileproperties” but for “PictureURL” is empty that’s because users profile picture is stored as “blob” which can be retrieved using Graph client. Graph Explorer is really amazing 😊

Open the .tsx file and add this private method inside the class

As our webpart need to connect to Graph api we need to add this “webApiPermissionRequests” in “package-solution.json” file

Step 6: Add people picker on change event
Step 7: Deploy

Get the spfx package file from “sharepoint\solution” and upload it to your app catalogue site

Once deployed go to SharePoint Admin site –> API Management, and approve it.

We are ready to add our webpart into a SharePoint page. Really superb!!!…

My webpart loads like charm. It loads current user logged and the user’s manager. It also allows me to change the user in the people picker which relatively updates the manage details also in the persona.