Add and Remove people from SharePoint groups using Jquery and Rest Api

Adding or removing a people from a SharePoint group involves lot of clicks and trips. In this article i am going to provide a j query and Rest api solutions that i used which allows to add a user to a SharePoint group and also remove an existing user from that SharePoint group.

Rest APis Used

/_api/web/sitegroups?$select=LoginName,Id,OwnerTitle
1. Returns all the groups from the site collection
/_api/web/sitegroups/getbyID(“+groupid+”)/users
1. Returns all the members inside a group with groupid
“/_api/web/sitegroups/GetById(‘” + encodeURIComponent(groupid) + “‘)/users/removebyloginname(@u)?@u='” + encodeURIComponent(userLoginName) + “‘”
1. Removes the user with login name “userLoginName” from group with groupid “groupid

Minus & Images used in the code. Plus minus

CSS Used

[css]
<style>
.expand{
 background-image:URL('/Style%20Library/SiteImages/plus.jpg');
 background-repeat:no-repeat;
 float: left;
 height: 14px;
 padding-right: 18px;
}
.collapse{
 background-image:URL('/Style%20Library/SiteImages/minus.jpg');
 background-repeat:no-repeat;
 float: left;
 padding-right: 18px;
 height: 14px;
}

.main{
min-height:20px;
padding:5px;
margin-bottom:5px;
color:white;
background-color: #0072C6;
width:50%;
}
.users a{
 color:white;
&nbsp;padding:2px;
&nbsp;text-decoration:underline;
&nbsp;font-weight:normal !important;
 }
.remove{
&nbsp;font-weight:normal !important;
&nbsp;&nbsp;float:right;
}
.grpid{
color: transparent;
width: 0px;
height: 0px;
}
.grpid:text{
   text-decoration:none !important;
}
.userpermission{
background: white;
color: red;
padding: 5px;
}
div#adduser {
float:right;
text-decoration: underline;
}
#addnewuser{
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 40%;
top: 30%;
background-color: #d1d4e6;
color: #1d1c1c;
font-weight: bold;
padding: 25px;
}

input#txtbox
{
width: 350px;
height: 30px;
}
input#btnadduser
{
float: right;
margin-top: 15px;
color: #1d1c1c;
font-weight: bold;
margin-right: 2px;
}

.close {
color: #131212;
font-size: 28px;
font-weight: bold;
top: -5%;
position: absolute;
right: 1%;
}
</style>

Scripts Used


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/_layouts/15/SP.RequestExecutor.js"></script>
<script type="text/javascript">
$(document).ready(function () {

var siteUrl=_spPageContextInfo.siteAbsoluteUrl;
// Function that loads all the groups inside a particular Web
 $.ajax({
 url: siteUrl + "/_api/web/sitegroups?$select=LoginName,Id,OwnerTitle",
 method: "GET",
 headers: { "Accept": "application/json; odata=verbose" },
 success: function (data) {
 $.each(data.d.results, function() {
 $("#currentindex").append("

<div class='main'>

<div id="+this.Id+" class='expand'></div>

div><b> "+this.LoginName+"</b>

<div id='adduser'>Add User</div>

</div>

<b> Owner: </b><i>"+this.OwnerTitle+"</i>

<div id='permission'></div>

</div>

");
                       });
             }
  });

//End function that loads all the groups inside a particular web

 /*Adding the users inside the groups and adding them to the div dynamically on the expand button click*/

 $(document).on('click', '.expand', function()
 {
 var currid= this.id;
 var groupname= $(this).next().html();
 groupname= groupname.replace('

<div id="adduser">Add User</div>

','');
 groupname= groupname.replace('<b>','');
 groupname= groupname.replace('</b>','');
 groupname=groupname.trim();
 $(this).removeClass("expand");
 $(this).addClass("collapse");
 $(this).parent().append("

<div class='users'><b style='color:#e3f178;font-size:16px;'>Members</b></div>

");

$.ajax({
 url: siteUrl + "/_api/web/sitegroups/getbyID("+currid+")/users",
 method: "GET",
 headers: { "Accept": "application/json; odata=verbose" },
 success: function (data)
 {if (data.d.results.length<1)
 {
 $("#"+currid).parent().find('.users').append("

<div class='users'>No MembersPresent</div>

/br>");
 }
 else
 {
 $.each(data.d.results, function()
 {
 var loginname= this.LoginName;
 $("#"+currid).parent().find('.users').append("<a href=mailto:"+this.Email+">"+this.Title+"</a>


<div class='remove'><u>Remove</u>

<div class='grpid'>"+loginname+"</div>


</div>


");
 });
 }
 }
});
 });

 /*Adding the users inside the groups and adding them to the div dynamically*/

 /*Hiding the users inside the groups and adding them to the div dynamically on the collapse button click*/

 $(document).on('click', '.collapse', function()
 {

 var currid= this.id;
 $(this).removeClass("collapse");
 $(this).addClass("expand");
 $("#"+currid).parent().find('.users').remove();
 $("#"+currid).parent().find('#permission').empty();
 });

 /*Hiding the users inside the groups and adding them to the div dynamically on the collapse button click*/

 /*calling the function to remove the users from the group*/
 $(document).on('click','.remove', function()
 {
 var userLoginName= $(this).children('div').html();
 var groupid= $(this).parent().parent().children('.collapse').attr('id');
 removeUserFromGroup(siteUrl,userLoginName,groupid).done(function(data)
 {
 alert(userLoginName +"has been removed from Group");
 location.reload();
 })
 .fail(
 function(error){
 alert(JSON.stringify(error));
 });

 });

 /*calling the function to remove the users from the group*/

 /*Funciton to add user*/

 var modal = document.getElementById('addnewuser');
 var span = document.getElementsByClassName("close")[0];

 $(document).on('click','#adduser', function(){
 var GroupName = $(this).parent('div').text();
 GroupName = GroupName.replace('Add User','');
 GroupName= GroupName.split(' ').join('_');
 var CurrGroupId= $(this).parent().prev().attr('id');
 modal.style.display = "block";
 $("#addnewuser").find('#txtbox').val('');
 $("#addnewuser").find('.modalgrpname').remove();
 $("#addnewuser").find('.modalgrpid').remove();
 $("#addnewuser").append("

<div id="+GroupName+" class='modalgrpname'></div>



<div id="+CurrGroupId+" class='modalgrpid'></div>

");

 });

 span.onclick = function() {
 modal.style.display = "none";
 }

 $(document).on('click','#btnadduser', function(){ 

 var Email= $(this).parent().find('#txtbox').val();
 var GroupId=$(this).parent().find('.modalgrpid').attr('id');
 var GroupName= $(this).parent().find('.modalgrpname').attr('id');
 GroupName= GroupName.replace('_',' ');

 var executor;
 executor = new SP.RequestExecutor(siteUrl);
 executor.executeAsync({
 url: siteUrl+"/_api/web/sitegroups("+GroupId+")/users?@target='"+siteUrl+"'",
 method: "POST",
 body: "{ '__metadata': { 'type': 'SP.User' }, 'LoginName':'i:0#.f|membership|"+Email+"' }",
 headers: {
 "accept": "application/json; odata=verbose",
 "content-type": "application/json; odata=verbose"
 },
 success:function(data)
 {
 alert("New User:"+Email+" added successfully in SharePoint Group: "+GroupName);
 location.reload();
 },
 error: function(err)
 {
 alert("error: " + JSON.stringify(err));
 }
 });

 });

 function getJson(url)
 {
 return $.ajax({
 url: url,
 type: "GET",
 contentType: "application/json;odata=verbose",
 headers: {
 "Accept": "application/json;odata=verbose"
 }
 });
 }

 /*Funciton to add user*/

/* end of document.ready*/ 

 });

 /* Declaring the funciton that removes user from the group*/

 function removeUserFromGroup(webUrl,userLoginName,groupid)
{
 var url = webUrl + "/_api/web/sitegroups/GetById('" + encodeURIComponent(groupid) + "')/users/removebyloginname(@u)?@u='" + encodeURIComponent(userLoginName) + "'";
 return $.ajax({
 url: url,
 method: "POST",
 contentType: "application/json;odata=verbose",
 headers: {
 "Accept": "application/json;odata=verbose",
 "X-RequestDigest": $("#__REQUESTDIGEST").val()
 }
 });
}

 /* Declaring the funciton that removes user from the group*/

</script>

Html Used

//To load the groups
<div id='currentindex'></div>
//adding the dialog for the add user pop up
<div id="addnewuser">
<span class="close">×</span>
<label for="txtbox">Enter the email address of a user</label>
<input id="txtbox" type="text">

How to implement.

Copy and paste everything in a single html file and save it to your document library.
Then in a page add a content editor web part and add link to this file in the web part edit tool part.
Once the html is added it should work like the images below

so what it displays

Groups with Name and Owner name of the group
Expand button that displayed the members existing with in the group
Each user has a corresponding remove button which will remove the user from the group
Add user button to add a new user with valid email address that adds the user in the particular group.

addusers — UI result of the scripts combined in a HTML.

popupuser — Add user pop up that accepts a valid user email address to add to the particular group.

6 thoughts on “Add and Remove people from SharePoint groups using Jquery and Rest Api”

Eleazer Patil says:

February 12, 2018 at 11:41 pm

For some reason,its not working….can you plz check and let me know

LikeLike

1. Alearner says:
  
  February 13, 2018 at 4:10 pm
  
  start piece by piece. there might a typo or something. First get to a point then add rest. Don’t do it in a a single attempt. Also make sure you are using a good editor. What is the error you are getting.
  
  LikeLike
  
MA says:

June 12, 2018 at 7:09 am

Excellent code. Thanks.

LikeLike

Bandar Taruhan Judi says:

September 28, 2019 at 7:11 am

I do agree with all the ideas you have introduced for your post.
They are very convincing and can certainly work.
Still, the posts are too quick for beginners. Could you please extend
them a little from next time? Thank you for the post.

LikeLike

9pokerceme.com says:

September 29, 2019 at 5:33 am

you’re in point of fact a excellent webmaster. The web site loading velocity is incredible.
It kind of feels that you are doing any distinctive trick.
In addition, The contents are masterpiece. you’ve performed a
excellent activity in this topic!

LikeLike

informative post says:

June 20, 2020 at 1:45 am

Everything is very open with a precise description of the issues.

It was truly informative. Your website is extremely helpful.
Many thanks for sharing!

LikeLike