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

Adding or removing people from a SharePoint group involves a lot of clicks and trips. In this article, I am going to provide a jquery and Rest API solution 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

  1. /_api/web/sitegroups?$select=LoginName,Id,OwnerTitle 
    1. Returns all the groups from the site collection
  2. /_api/web/sitegroups/getbyID(“+groupid+”)/users
    1. Returns all the members inside a group with groupid
  3. “/_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 & Plus 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

[code language=”javascript”]

<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>

[/code]

Html Used

[code language=”html”]
//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”>
[/code]

How to implement.

  1. Copy and paste everything in a single HTML file and save it to your document library.
  2. Then in a page add a content editor web part and add the link to this file in the web part edit tool part.
  3. 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 within 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 a 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.

Latest Update

https://sshareasolutions.com/2019/03/26/manage-sharepoint-site-and-list-permissions-from-single-screen-on-premise-or-online

Advertisements

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

    1. 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.

  1. 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.

  2. 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!

Leave a Reply

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