Adding Role Definition to SharePoint Groups Using JavaScript Object Model

SharePoint recommends assigning role-based permissions. All permissions are managed through roles. Roles are classified into two sections,

  • Role Definition and
  • Role Assignment

Role definition, also known as permission level, is the list of permissions associated with the role. Full control, contribute, read, design, and limited access are some of the role definitions available. Role assignment is the relationship established between users/groups and the role definition. Hence when we assign a role programmatically, it is a two-step process: instantiation of role definition and implementation of role assignment to the user/group.

Let’s see how we can add a role to user/group using JavaScript object model.

  • Add reference to jquery file,
    1. <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>  
    2. <script language="javascript" type="text/javascript">  
  • Within the document ready function call SP.SOD.executeFunc so as to load the on demand script SP.js . Call the main starting point function, say: addRole.
    1. SP.SOD.executeFunc('sp.js', 'SP.ClientContext', addRole); 
  • Instantiate client context and get the web instance. Once the web object is retrieved, get the group to be assigned the role,
    1. var clientContext = new SP.ClientContext();  
    2. var oWeb = clientContext.get_web();  
    3. //Get the group to be assigned the role  
    4. var oGroupoWeb.get_siteGroups().getByName("HR Group");  
  • Get role definition and role definition binding collection,
    1. var oRoleDef = oWeb.get_roleDefinitions().getByName('Contribute');  
    2. var oBindingColl = SP.RoleDefinitionBindingCollection.newObject(clientContext);   
    3. // Add the role to the collection.  
    4. oBindingColl.add(oRoleDef);  
  • Get the role assignment collection for the target web and assign the group to the new role definition binding collection.
    1. var oCurrentRoleAssignments = oWeb.get_roleAssignments();  
    2. var roleAssignmentContribute = oCurrentRoleAssignments.add(oGroup, oBindingColl);  
  • Load the client context and execute the batch which will send the request to the server and perform the entire JavaScript object model operation as a batch.
    1. clientContext.load(oGroup);  
    2. clientContext.executeQueryAsync(QuerySuccess, QueryFailure);  

Output

Output

Full Code

  1. <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>  
  2.   
  3. <script language="javascript" type="text/javascript">  
  4.     $(document).ready(function()  
  5.     {  
  6.         SP.SOD.executeFunc('sp.js', 'SP.ClientContext', addRole);  
  7.     });  
  8.   
  9.   
  10.     var oSubWebs;  
  11.   
  12.     function addRole()  
  13.     {  
  14.         //Get client context and web object  
  15.         var clientContext = new SP.ClientContext();  
  16.         var oWeb = clientContext.get_web();  
  17.         //Get the group to be assigned the role  
  18.         var oGroup = oWeb.get_siteGroups().getByName("HR Group");  
  19.   
  20.         //Get Role definition and role definition binding collection  
  21.         var oRoleDef = oWeb.get_roleDefinitions().getByName('Contribute');  
  22.         var oBindingColl = SP.RoleDefinitionBindingCollection.newObject(clientContext);  
  23.   
  24.         // Add the role to the collection.  
  25.         oBindingColl.add(oRoleDef);  
  26.   
  27.         // Get the RoleAssignmentCollection for the target web.  
  28.         var oCurrentRoleAssignments = oWeb.get_roleAssignments();  
  29.   
  30.         // assign the group to the new RoleDefinitionBindingCollection.  
  31.         var roleAssignmentContribute = oCurrentRoleAssignments.add(oGroup, oBindingColl);  
  32.   
  33.         //Load the client context and execute the batch  
  34.         clientContext.load(oGroup);  
  35.         clientContext.executeQueryAsync(QuerySuccess, QueryFailure);  
  36.     }  
  37.   
  38.     function QuerySuccess()  
  39.     {  
  40.         console.log("Role definition added Successfully.");  
  41.     }  
  42.   
  43.     function QueryFailure(sender, args)  
  44.     {  
  45.         console.log('Request failed - ' + args.get_message());  
  46.     }  
  47. </script>  
We can test this in SharePoint by adding it to the Content Editor Web part as below,

 

  • Save the above code to a text file and save it into one of the SharePoint Libraries, say: Site Assets.

  • Go to the edit settings of the SharePoint page and click on Web part from the Insert tab,

    Insert
  • Add Content Editor Web part,

    Web part

  • Click on Edit Web art from Content Edit Web part. Assign the url of the script text file and click on Apply.
    Editor

Click on Apply. This will add the new role definition to the SharePoint Group. Thus we have seen how to define the role definition and do the role assignment to the group in SharePoint 2016 and SharePoint Online in Office 365 using JavaScript object model.