Post
Ask Question

How To Manage SharePoint Groups Using REST API In SharePoint Framework (SPFx)

SharePoint Groups are helpful while grouping the users and allocating them the same set of permissions or permission level. Groups help us to manage the permissions of the same set of users just through a couple of clicks. Technically, how to manage the groups in SharePoint Framework applications? Let’s discuss in this blog.

How to build SharePoint Framework Applications

The following blog posts will help you for sure in detail about building SPFx applications,

Who can access SharePoint group in SPFx?

SharePoint Framework is completely functioning based on the user permissions we cannot elevate through additional tokens like Provided Hosted app.

So, the current user who is manipulating the SharePoint groups in the SPFx app must have enough permission to access SP. Group resource.

How to authenticate in SPFx?

In SPFx, we don't need to worry about that because SPFx takes care of that authentication by using the current user’s context in SPHttpClient class, the only thing we need to do is to pass the Url with some headers and post body.

Below are the parameter details to make a REST API call in SPFx.

  • URL
    SP Rest API URL to access your data

  • configuration
    SPHttpClientConfiguration which uses predefined objects required for SPHttpClient class

  • options
    ISPHttpClientOptions which is optional in GET request and required in POST request, with this parameter we can pass custom headers and payload to post.

Let’s see some real examples.

Get the current web URL in SPFx like below,

  1. let currentWebUrl = this.context.pageContext.web.absoluteUrl;  

How to create a SharePoint Group in SPFx?

In SPFx, while posting the data to SharePoint Online through REST API we need to mention the metadata type. It depends on the resources we are accessing. Metadata type to create a SharePoint group is SP.Group

Method - POST

URL - {ReplaceYourSiteUrl}/_api/web/sitegroups

  1. let requestUrl = currentWebUrl.concat(/_api/web / sitegroups”);  
  2. let dataToPost = JSON.stringify({  
  3.     '__metadata': {  
  4.         'type': 'SP.Group'  
  5.     },  
  6.     'Title': ‘Group Name here’  
  7. });  
  8. let spOpts = {  
  9.     headers: {  
  10.         'Accept': 'application/json;odata=nometadata',  
  11.         'Content-type': 'application/json;odata=verbose',  
  12.         'odata-version': ''  
  13.     },  
  14.     body: dataToPost  
  15. };  
  16. this.context.spHttpClient.post(requestUrl, SPHttpClient.configurations.v1, spOpts).then((response: SPHttpClientResponse) => {  
  17.     if (response.ok) {  
  18.         response.json().then((responseJSON) => {  
  19.             console.log(responseJSON);  
  20.         });  
  21.     }  
  22. });  

How to get users from SharePoint Group in SPFx?

There are two ways to do that. The first one is by using the Group ID and the next approach is to use the group name itself. The API calling terminology is same for both the ways, however, the URL is different.

Method - GET

Get group users by Id,

URL - {ReplaceYourSiteUrl}/_api/Web/SiteGroups/GetById({GroupId})/Users

Get group users by group name,

URL - {ReplaceYourSiteUrl}/_api/Web/SiteGroups/GetByName(‘{GroupName}’)/Users

  1. let requestUrl = currentWebUrl.concat(/_api/Web / SiteGroups / GetByName(‘{  
  2.     GroupName  
  3. }’) / Users”);  
  4. this.context.spHttpClient.get(requestUrl, SPHttpClient.configurations.v1).then((response: SPHttpClientResponse) => {  
  5.     if (response.ok) {  
  6.         response.json().then((responseJSON) => {  
  7.             if (responseJSON != null && responseJSON.value != null) {  
  8.                 console.log(responseJSON.value);  
  9.             }  
  10.         });  
  11.     }  
  12. });  

How to add users to a SharePoint Group in SPFx?

Like retrieval, there are two ways to add a user to a group. The first one is by using the Group ID and the next approach is to use group name itself. The API invoking terminology is the same for both ways, only the URL is different. The metadata type for adding the user is SP.User.

The problem to consider is that we cannot add/remove multiple users from a SharePoint Group through REST API in a single call. You should iterate through each user and make a separate call for every user.

Method - POST

Add group users by group Id,

URL - {ReplaceYourSiteUrl}/_api/Web/SiteGroups/GetById({GroupId})/Users

Get group users by group name,

URL - {ReplaceYourSiteUrl}/_api/Web/SiteGroups/GetByName(‘{GroupName}’)/Users

  1. let requestUrl = currentWebUrl.concat(/_api/Web / SiteGroups / GetByName(‘{  
  2.     GroupName  
  3. }’) / Users”);  
  4. let dataToPost = JSON.stringify({  
  5.     '__metadata': {  
  6.         'type': 'SP.User'  
  7.     },  
  8.     'LoginName': ‘user loginname’  
  9. });  
  10. let spOpts = {  
  11.     headers: {  
  12.         'Accept': 'application/json;odata=nometadata',  
  13.         'Content-type': 'application/json;odata=verbose',  
  14.         'odata-version': ''  
  15.     },  
  16.     body: dataToPost  
  17. };  
  18. this.context.spHttpClient.post(requestUrl, SPHttpClient.configurations.v1, spOpts).then((response: SPHttpClientResponse) => {  
  19.     if (response.ok) {  
  20.         response.json().then((responseJSON) => {  
  21.             console.log(responseJSON);  
  22.         });  
  23.     }  
  24. });  

How to remove users from a SharePoint Group in SPFx?

Like retrieval, removing a user in a group also has two ways to do that. The first one is by using the Group ID and the next approach is to use group name itself.

You could see in the below post body of API request, I have commented out the metadata type. Even though we are posting the data, there is no need to mention metadata type because we are not creating a record, just removing. Metadata type is required in creation only.

Method - POST

Add group users by group Id,

URL - {ReplaceYourSiteUrl}/_api/Web/SiteGroups/GetById({GroupId})/Users/removeByLoginName

Get group users by group name,

URL - {ReplaceYourSiteUrl}/_api/Web/SiteGroups/GetByName(‘{GroupName}’)/Users/removeByLoginName

  1. let requestUrl = currentWebUrl.concat(/_api/Web / SiteGroups / GetByName(‘{  
  2.     GroupName  
  3. }’) / Users / removeByLoginName”);  
  4. let dataToPost = JSON.stringify({  
  5.     // '__metadata': { 'type': 'SP.User' },  
  6.     'loginName': ‘user loginname’  
  7. });  
  8. let spOpts = {  
  9.     headers: {  
  10.         'Accept': 'application/json;odata=nometadata',  
  11.         'Content-type': 'application/json;odata=verbose',  
  12.         'odata-version': ''  
  13.     },  
  14.     body: dataToPost  
  15. };  
  16. this.context.spHttpClient.post(requestUrl, SPHttpClient.configurations.v1, spOpts).then((response: SPHttpClientResponse) => {  
  17.     if (response.ok) {  
  18.         console.log(responseJSON.value);  
  19.     }  
  20. });  

 We have discussed the secrets of manipulating SharePoint Groups in SPFx. Look for my next article about managing user/group permissions in SharePoint using REST API in SPFx.

If you have any questions/issues about this article, please let me know in comments.


Similar Articles