PnP-JS-Core: Get SharePoint Group

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 all groups from the Site Collection using same pnp library in Pnp-JS-Core: Gets all groups from Site Collection . In this post I’ll explain the different options to retrive the SharePoint group from a website using PnP JavaScript Library

1. By filter
2. By Group name
3. By Group ID

By Filter:

The below example returns the group object based on filter query.

[code language=”javascript”]

$pnp.sp.web.siteGroups.filter("Title eq ‘<Group Name>’").top(1).get().then(function(res) {
var singleGroup = res[0];
var groupInfo = "";
for (k in singleGroup) {
groupInfo += k + " : " + singleGroup[k] + "<br/>";
}
document.getElementById("sample").innerHTML = groupInfo;
});

[/code]

siteGroups.filter( "<Property> condition <Value>" ) returns the SharePoint group based on the filter condition.

By Group Name:

The below example returns the group object and its properties based on the group name from a SharePoint site

[code language=”javascript”]

$pnp.sp.web.siteGroups.getByName("<Group Name>").get().then(function(result) {
var groupInfo = "";
for (k in result) {
groupInfo += k + " : " + result[k] + "<br/>";
}
document.getElementById("sample").innerHTML = groupInfo;
});

[/code]

siteGroups.getByName( <Group Name> ) returns the SharePoint group based on the name.

By Group ID:

The below example returns the group object and its properties based on the group id from a SharePoint site

[code language=”javascript”]

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

[/code]

siteGroups.getById( <Group ID> ) returns the SharePoint group based on the id.

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.