Retrieve User Profile Properties Using SPFx And PnP JS In SharePoint Online

SharePoint Framework is the new development model in which a lot of work has been going on since it went for General Availability on Feb 23, 2017. It is a page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data, and support for open source tooling. With the SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to build productive experiences and apps in SharePoint.

In a previous article, we saw how to set up the development environment for SharePoint Framework. We also saw the basic Hello World web part creation and how to retrieve and display list items using SharePoint Framework.

In this section, we will see another example of SPFx and PnP in action, here we will be using this combo to retrieve the user profile properties and display them in the web part. The major project files used in this solution have been zipped and uploaded along with this article. Feel free to download it.

Create the Web Part Project

Spin up Node.js command prompt, using which we will be creating the Web part project structure. We can create the directory where we will be adding the solution, using the command given below.

md GetUserProfileProperties

Let’s move to the newly created working directory, using the command.

cd GetUserProfileProperties

We will then create the client Web part by running the Yeoman SharePoint Generator.

yo @microsoft/sharepoint

This will display the prompt which we will have to fill up so as to proceed with the project creation.

• What is your solution name? : Set it to ‘GetUserProfileProperties’.

On pressing enter, we will be asked to chose the working folder for the project.

• Where do you want to place your files? - Use current folder.
• What framework would you like to start with? - Select “No javaScript web framework” for the time being, as this is a sample Web part.
• What is your Webpart name? - We will specify it as ‘GetUserProfileProperties’ and press Enter.
• What is your Webpart description? - We will specify it as ‘Retrieve User Properties using SharePoint Framework’.
  
  
  

Edit the web part

Run code to open the project in Visual Studio Code.

Now, we have to load PnP JS file which we will use within the project to create a list. We will be using npm to add the PnP JS file as shown below.

npm install sp-pnp-js --save

Retrieve User Profile data

In order to use PnP methods, we can refer the PnP file in the project as below.

import * as pnp from 'sp-pnp-js';

We will then make use of the below function to fetch the user profile properties of the user and display it within the web part. Th pnp.sp.profiles.myProperties.get() will return the current user’s profile properties which can be iterated to return the required information.

TS File content to retrieve User Profile Data

The entire TS file content is shown below. The this.GetUserProperties() in the render method will call the function that gets the User Profile properties of the user. It will be then displayed within the div element declared in the render method.