Get Current User information using PnP Library in SPFx

Use the code snippets to get the current users information from the SharePoint Framework webpart with PnP JS library

PnP JavaScript library contains lot of methods and properties for accessing SharePoint Data. We will see how to use this library in SharePoint Framework to get the current user information.

Use the below command to create a SharePoint Framework project,

yo @microsoft/sharepoint

Create a SharePoint Framework project with “No JavaScript” option. So the below code snippet which does not have any javascript frameworks and you can reuse it in any javascript framework apis.

After the project creation, use the below npm command to install the PnP Javascript dependencies to the SharePoint Framework project.

npm install –save @pnp/common @pnp/sp @pnp/logging @pnp/odata

[code lang=”js”]
import { sp } from "@pnp/sp";
import { CurrentUser } from ‘@pnp/sp/src/siteusers’;
[/code]

sp object is the starting point for accessing all SharePoint related PnP objects and methods.
CurrentUser object returns the following properties for now. In future it may change based on the new properties introduced to the SharePoint and open source contributions to this library. We have to import CurrentUser object from SiteUsers class from the @pnp/sp.

Email: string;
Id: number;
IsHiddenInUI: boolean;
IsShareByEmailGuestUser: boolean;
IsSiteAdmin: boolean;
LoginName: string;
PrincipalType: number;
Title: string;

Add the below code snippet under the _WebPart class in _webpart.ts file in the project. getSPData method calls the PnP request method to fetch the current users data from SharePoint. renderData method used to generate the html and pass the value for rendering. render method renders the html in the browser.

[code lang=”js”]
//Get Current User Display Name
private getSPData(): void {
sp.web.currentUser.get().then((r: CurrentUser) => {
this.renderData(r[‘Title’]);
});
}

private renderData(strResponse: string): void {
const htmlElement = this.domElement.querySelector("#pnpinfo");
htmlElement.innerHTML = strResponse;
}

public render(): void {
this.domElement.innerHTML = `
<div class="${ styles.pnPDemos}">
<div class="${ styles.container}">
<div class="${ styles.row}">
<div class="${ styles.column}">
<div id="pnpinfo"></div>
</div>
</div>
</div>
</div>`;
this.getSPData();
}

[/code]

Below is the output based on the code snippet. This returns only user title value. We can also use other user property to display in the webpart.

Output: Current User from SharePoint Framework

Get Groups of Current User

CurrentUser.Groups returns the collection of SharePoint Groups associated to the current user. The following fetches the groups associated by the current user in SharePoint site.

[code lang=”js”]
//Get collection of SharePoint Groups for the current User
private getSPData(): void {
sp.web.currentUser.groups.get().then((r: any) => {
let grpNames: string ="";
r.forEach((grp: SiteGroup) =>{
grpNames += "<li>"+grp["Title"]+"</li>"
});
grpNames = "<ul>"+grpNames+"</ul>";
this.renderData(grpNames);
});
}
[/code]

Shantha Kumar
Shantha Kumar
Articles: 295

24,849 Comments

  1. Getting the error – Uncaught (in promise) TypeError: r.forEach is not a function
    r.forEach((grp: SiteGroup) =>{

  2. We need to keep on mind while installing npm use below command. This is because now the version is changed and the code will give error if we are using latest npm

    npm install @pnp/sp@1.3.8 @pnp/odata@1.3.8 @pnp/logging@1.3.8 @pnp/common@1.3.8

    Thanks
    Nil

  3. Hi,

    1. I used npm install @pnp/sp@1.3.8 @pnp/odata@1.3.8 @pnp/logging@1.3.8 @pnp/common@1.3.8W as suggested which removed errors in the code, thanks.

    2. It works on the workbench in IE11 and Chrome, but not in Edge.

    3. When packaged and deployed the current username is not displaying in all browsers, any ideas how to resolve.

    Regards

  4. looks like the npm install line is slightly incorrect – should be
    npm install @pnp/common @pnp/sp @pnp/logging @pnp/odata –save
    remember it has the – – save at the end else it complains.

Comments are closed.