Pnp-JS-Core: Gets all users from Site Collection

This post contains the syntax and code example to get all users from site collection using PnP JavaScript Library.

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

This post explains,

How to get all users from site collection using PnP JavaScript Library.

Syntax:

pnp.sp.web.siteUsers  – Gets all users from site collection.

Example:

The below steps and code snippet used to get all user’s id and title of each user from the site collection using PnP JavaScript library,

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

    <div id="sample"></div>

    <script type="text/javascript">
    //The below PnP property used to returns all users from site collection
    $pnp.sp.web.siteUsers.get().then(function(data) {
    var users = "";
    for (var i = 0; i < data.length; i++) {
    users += data[i].Id + " – " + data[i].Title + "<br/>";
    }
    document.getElementById("sample").innerHTML = users;
    });
    </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.
  6. Now the page displays all users from site collection using PnP JavaScript method .

Output:

Get site users using PnP-JS-Core
Fig 1: Get site users using PnP-JS-Core
Shantha Kumar
Shantha Kumar
Articles: 278

24,849 Comments

    • Nope. It won’t expose the users under Active Directory group. It will only returns the users present in the Site Collection.

  1. I have to display active directory group user names in a webpart respective to each site. Which is best way? And this is for office 365.

Comments are closed.