Pnp-JS-Core: Create 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,

SharePoint has lot of building blocks in collections which are used to form a SharePoint site. Those are used in manage the contents, generate reports based on contents & settings, etc…

In this post,

How to create a SharePoint Site Group using PnP JavaScript Library.

Syntax:

pnp.sp.web.siteGroups.add(GroupWriteableProperties) - 
Add a new Site Group to the SharePoint site collection based on parameters provided in GroupWritableProperties

GroupWritableProperties:

Parameter Type Description
AllowMembersEditMembership boolean Specifies whether the group members can modify the group
AllowRequestToJoinLeave boolean Specifies whether to allow users to request membership and leave from membership in the group
AutoAcceptRequestToJoinLeave boolean Sepcifies whether users are automatically added or removed when they make a request
Description string Description for the group
OnlyAllowMembersViewMembership boolean Specifies whether only group members are allowed to view the list of members in the group
Owner number | SiteUser | SiteGroup Specifies owner of the group in the form of user / group id, user or another group
RequestToJoinLeaveEmailSetting string e-mail address to which membership requests are sent
Title string Title for the group

Note: Title property is mandatory in creating a Site Group and other properties are optional.

Example:

The below steps and code snippets used to new site group to the SharePoint 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

Create Site Group using Title property

<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 create a new SharePoint Group
$pnp.sp.web.siteGroups.add({
    Title: "Group Name"
}).then(function(result) {
    var grpInfo = "";
    var grp = result.data;
    grpInfo += "SharePoint Group '<strong>" + grp.Title + "</strong>' created successfully!<br/>";
    grpInfo += "Below are some of the newly created group properties,<br/>";
    grpInfo += "Description :" + grp.Description; + "<br/>";
    grpInfo += "AllowMembersEditMembership: " + grp.AllowMembersEditMembership + "<br/>";
    grpInfo += "OnlyAllowMembersViewMembership: " + grp.OnlyAllowMembersViewMembership + "<br/>";
    grpInfo += "AllowRequestToJoinLeave: " + grp.AllowRequestToJoinLeave + "<br/>";
    grpInfo += "AutoAcceptRequestToJoinLeave: " + grp.AutoAcceptRequestToJoinLeave + "<br/>";
    grpInfo += "RequestToJoinLeaveEmailSetting: " + grp.RequestToJoinLeaveEmailSetting + "<br/>";

    document.getElementById("sample").innerHTML = grpInfo
});
</script>

Click here to get this code snippet from my github page

Create Site Group using Title and additional properties


$pnp.sp.web.siteGroups.add({
    Title: "Group Name 2",
    Description: "My description for the new group",
    AllowRequestToJoinLeave: true,
    AutoAcceptRequestToJoinLeave: true,
    RequestToJoinLeaveEmailSetting: "myname@email.com",
    AllowMembersEditMembership: true,
}).then(function(result) {
    samgrp = result.data;
    var grpInfo = "";
    var grp = result.data;
    grpInfo += "SharePoint Group '<strong>" + grp.Title + "</strong>' created successfully!<br/>";
    grpInfo += "Below are some of the newly created group properties,<br/>";
    grpInfo += "Description :" + grp.Description; + "<br/>";
    grpInfo += "AllowMembersEditMembership: " + grp.AllowMembersEditMembership + "<br/>";
    grpInfo += "OnlyAllowMembersViewMembership: " + grp.OnlyAllowMembersViewMembership + "<br/>";
    grpInfo += "AllowRequestToJoinLeave: " + grp.AllowRequestToJoinLeave + "<br/>";
    grpInfo += "AutoAcceptRequestToJoinLeave: " + grp.AutoAcceptRequestToJoinLeave + "<br/>";
    grpInfo += "RequestToJoinLeaveEmailSetting: " + grp.RequestToJoinLeaveEmailSetting + "<br/>";

    document.getElementById("sample").innerHTML = grpInfo
});

Click here to get this code snippet from my github page

  1. Add the URL of sample.html file to the content editor web part
  2. Click ok to apply the changes to the web part and save the page.
  3. Now the page displays the success message with the newly created group information.

Output:

Create Site Group in SharePoint
Img 1: Create Site Group in SharePoint

Leave a Reply

Your email address will not be published. Required fields are marked *