Categories:

How to manage SharePoint Groups using REST API in SharePoint Framework (SPFx)

SharePoint Groups are helpful to group the users and allocate them same set of permissions or permission level. Groups help us to manage the permissions of the same set of users just through 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,

Build SPFx webparts with Angular 4

Deep Dive into SPFx webparts configuration

Build SPFx extensions

Integrating SPFx apps with visual Studio

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 SPFx app must have enough permission to access SP.Group resource.

Leaderboard_CDR

How to authenticate in SPFx?

In SPFx, we no need to worry about that because SPFx take care of that authentication by using the current users context in SPHttpClient class, the only thing we need to do is to pass the Url with some headers and post body.

Below is 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,

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

URL: {ReplaceYourSiteUrl}/_api/web/sitegroups

let requestUrl = currentWebUrl.concat(/_api/web/sitegroups”);

let dataToPost = JSON.stringify(

            {

                ‘__metadata’: { ‘type’: ‘SP.Group’ },

                ‘Title’: Group Name here

            });

let spOpts = {

            headers: {

                ‘Accept’: ‘application/json;odata=nometadata’,

                ‘Content-type’: ‘application/json;odata=verbose’,

                ‘odata-version’: ”

            },

            body: dataToPost

        }; 

this.context.spHttpClient.post(requestUrl, SPHttpClient.configurations.v1, spOpts)

          .then((response: SPHttpClientResponse) => {

                   if (response.ok) {

                             response.json().then((responseJSON) => {

                                      console.log(responseJSON);

                             });

                   }

          });

How to get users from SharePoint Group in SPFx?

There are two ways to do that. First one is by using the Group ID and the next approach to use group name itself. The API calling terminology is same for both the ways only 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

let requestUrl = currentWebUrl.concat(/_api/Web/SiteGroups/GetByName({GroupName})/Users);

this.context.spHttpClient.get(requestUrl, SPHttpClient.configurations.v1)

          .then((response: SPHttpClientResponse) => {

                   if (response.ok) {

                             response.json().then((responseJSON) => {

                                      if (responseJSON!=null && responseJSON.value!=null){

                                                console.log(responseJSON.value);

                                      }

                             });

                   }

          });

How to add users to a SharePoint Group in SPFx?

As like retrieval, adding user in a group also has two ways to do that. First one is by using the Group ID and the next approach to use group name itself. The API invoking terminology is same for both the ways only the URL is different. The metadata type for adding user is SP.User.

The problem to consider is 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 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

let requestUrl = currentWebUrl.concat(/_api/Web/SiteGroups/GetByName({GroupName})/Users);

  let dataToPost = JSON.stringify(

            {

                ‘__metadata’: { ‘type’: ‘SP.User’ },

                ‘LoginName’: user loginname

            });

let spOpts = {

            headers: {

                ‘Accept’: ‘application/json;odata=nometadata’,

                ‘Content-type’: ‘application/json;odata=verbose’,

                ‘odata-version’: ”

            },

            body: dataToPost

        }; 

this.context.spHttpClient.post(requestUrl, SPHttpClient.configurations.v1, spOpts)

          .then((response: SPHttpClientResponse) => {

                   if (response.ok) {

                             response.json().then((responseJSON) => {

                                      console.log(responseJSON);

                             });

                   }

          });

How to remove users from a SharePoint Group in SPFx?

As like retrieval, adding user in a group also has two ways to do that. First one is by using the Group ID and the next approach to use group name itself.

You could see in below post body of API request I have commented out the metadata type. Even though we are posting the data, no need to mention metadata type because we 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

let requestUrl = currentWebUrl.concat(/_api/Web/SiteGroups/GetByName({GroupName})/Users/removeByLoginName);

let dataToPost = JSON.stringify(

            {

                // ‘__metadata’: { ‘type’: ‘SP.User’ },

                ‘loginName’: user loginname

            });

let spOpts = {

            headers: {

                ‘Accept’: ‘application/json;odata=nometadata’,

                ‘Content-type’: ‘application/json;odata=verbose’,

                ‘odata-version’: ”

            },

            body: dataToPost

        };

 this.context.spHttpClient.post(requestUrl, SPHttpClient.configurations.v1, spOpts)

          .then((response: SPHttpClientResponse) => {

                   if (response.ok) {

                             console.log(responseJSON.value);

                   }

          });

We have discussed about Manipulating SharePoint groups in SPFx. Look for my next article about managing permissions in SharePoint using REST API in SPFx.

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

Sharing is Caring!

Leave a Reply

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