PnP-JS-Core: Get SharePoint User

PnP-JS-Core library contains the number of extensible methods and properties. By using that we can achieve the various actions in a simple code. To know more about this library component, visit the below links,

Simplified JavaScript Library for SharePoint

PnP-JS-Core Library

I have explained on how to get the user collections from below articles using the same PnP library,

•  Get User collection from Site Collection in Pnp-JS-Core: Gets all users from Site Collection and 
• Get User collection from SharePoint Group in PnP-JS-Core: Get users from SharePoint Group

In this post I’ll explain the different options available in PnP JavaScript Library to retrive the SharePoint User from a website,

1. By filter
2. By User Email Id
3. By User ID
4. By User Login Name

By Filter:

The below example returns the user object with properties based on filter query.

[code language=”javascript”]

$pnp.sp.web.siteUsers.filter("Title eq ‘<User Display Name>’").get().then(function(result) {
var singleUser = result[0];
var userInfo = "";
for (prop in singleUser) {
userInfo += prop + " : " + singleUser[prop] + "<br/>";
}
document.getElementById("sample").innerHTML = userInfo;
});

[/code]

siteUsers.filter( "<Property> condition <Value>" ) returns the SharePoint user based on the filter condition from the user collection.

By User Email ID:

The below example returns the user object with properties based on User’s email id.

[code language=”javascript”]

$pnp.sp.web.siteUsers.getByEmail("<User Email ID>").get().then(function(result) {
var userInfo = "";
for (prop in result) {
userInfo += prop + " : " + result[prop] + "<br/>";
}
document.getElementById("sample").innerHTML = userInfo;
});

[/code]

siteUsers.getByEmail( "<User Email ID>" ) returns the SharePoint user based on the user email id from the user collection.

By User ID:

The below example returns the user object with properties based on User’s ID available in SharePoint site.

[code language=”javascript”]

$pnp.sp.web.siteUsers.getById(<User ID>).get().then(function(result) {
var userInfo = "";
for (prop in result) {
userInfo += prop + " : " + result[prop] + "<br/>";
}
document.getElementById("sample").innerHTML = userInfo;
});

[/code]

siteUsers.getById( <User ID> ) returns the SharePoint user based on the user id from the user collection.

By User Login Name:

The below example returns the user object with properties based on User’s login name.

[code language=”javascript”]

//Format for Office 365 LoginName: ‘i:0#.f|membership|user@sitedomain.onmicrosoft.com’

$pnp.sp.web.siteUsers.getByLoginName("'<User Login Name>’").get().then(function(result) {
var userInfo = "";
for (prop in result) {
userInfo += prop + " : " + result[prop] + "<br/>";
}
document.getElementById("sample").innerHTML = userInfo;
});

[/code]

siteUsers.getByLoginName( "'<User Login Name>'" ) returns the SharePoint user based on the User login name from the user collection.

To run the above examples, we have the file dependencies, PnP.js, fetch.js and promise.js. Follow the below steps for executing the examples.

1. Download Required files to use PnP-JS-Core library from the below links and upload that to Site Asstes or Style Library
   • Download pnp.js  PnP JS file
   • Download fetch.js Used by PnP js file to handle web requests and responses (Required in IE)
   • Download promise.js Used by PnP js file to handle web requests and responses (Required in IE)
2. Create new web part page and insert Content Editor web part
3. Create a sample.html file in Site Assets or Style library and insert the example code snippet

   [code language=”javascript”]

   <script type="text/javascript" src="/siteassets/scripts/fetch.js"></script>
   <script type="text/javascript" src="/siteassets/scripts/promise.min.js"></script>
   <script type="text/javascript" src="/siteassets/scripts/pnp.min.js"></script>

   <script type="text/javascript">
   // Insert PnP example script
   </script>

   [/code]

4. Add the URL of sample.html file to the content editor web part
5. Click ok to apply the changes to the web part and save the page.