PnP JavaScript library contains a 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 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

After importing the PnP JS dependencies, import the classes from PnP JS to the web part by adding below lines in the _webpart.ts file.

import { sp } from "@pnp/sp";  
import { CurrentUser } from '@pnp/sp/src/siteusers';

1 2	import { sp } from "@pnp/sp"; import { CurrentUser } from '@pnp/sp/src/siteusers';

So the object is the starting point for accessing all the SharePoint related PnP objects and methods.

CurrentUser object returns the following properties for now. In the 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 is used to generate the HTML and pass the value for rendering. Render method renders the HTML in the browser.

//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();  
}

//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>

</div>`;

this.getSPData();

}

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

Get Groups of Current User

Based on the current user, we can also get the groups where the current user is the member. CurrentUser.Groups return the collection of SharePoint Groups associated with the current user. Replace the getSPData method with the following code, which is used to fetch the groups associated by the current user in SharePoint site.

//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);  
  });  
}

//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);

});

}

I hope, you have learned how to access the current user details in SharePoint Framework webpart using PnP JavaScript Library.

SharePoint 2013 Hosting Recommendation

HostForLIFE.eu’s SharePoint 2013 Hosting solution offers a comprehensive feature set that is easy-to-use for new users, yet powerful enough for the most demanding web developer expert. Hosted SharePoint Foundation 2013 is the premiere web-based collaboration and productivity enhancement tool on the market today. With SharePoint 2013 Foundation, you can quickly access and manage documents and information anytime, anywhere though a Web browser in a secure and user friendly way. SharePoint hosting services start at only at €9.99/mo, allowing you to take advantage of the robust feature set for a small business price. HostForLIFE.eu offers a variety of hosted SharePoint Foundation 2013 plans as well as dedicated SharePoint 2013 Foundation options

SharePoint 2013 Hosting – HostForLIFE.eu :: Get Current User Information Using PnP Library In SharePoint Framework

SharePoint 2013 Hosting Recommendation

BLOGROLL

Featured On

SharePoint 2013 Hosting – HostForLIFE.eu :: Get Current User Information Using PnP Library In SharePoint Framework

SharePoint 2013 Hosting Recommendation

BLOGROLL

Featured On

Tags