<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/sites/joel/SiteAssets/Permissions/jquery.collapsibleCheckboxTree.css" />
<style type="text/css">
ul.tree,
ul.tree ul {
list-style-type: none;
background: url(/sites/joel/SiteAssets/Permissions/vline.png) repeat-y;
margin: 0;
padding: 0;
}
ul.tree ul {
margin-left: 10px;
}
ul.tree li {
margin: 0;
padding: 0 12px;
line-height: 20px;
background: url(/sites/joel/SiteAssets/Permissions/node.png) no-repeat;
color: #369;
}
ul.tree li.last {
background: #fff url(/sites/joel/SiteAssets/Permissions/lastnode.png) no-repeat;
}
#example ul {
padding-left: 0px;
}
.collapsed,
.expanded {
font-size: 18px;
color: black !important;
font-weight: bold;
}
#default {
display: none;
}
.sp-peoplepicker-topLevel,
.sp-peoplepicker-topLevelDisabled {
width: 230px !important;
}
#riskowner_TopSpan {
margin-left: -25%;
margin-top: 3%;
}
button,button:hover,input[type="button"],input[type="button"]:hover{
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
#sitegroups{
padding: 15px 32px;
border: none;
color: white;
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="/sites/joel/SiteAssets/Permissions/jquery.collapsibleCheckboxTree.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.init.js"></script>
<script type="text/javascript" src="/_layouts/15/ScriptResx.ashx?name=sp.res&culture=en-us"></script>
<script type="text/javascript" src="/_layouts/15/sp.ui.dialog.js"></script>
<script type="text/javascript" src="/_layouts/15/clienttemplates.js"></script>
<script type="text/javascript" src="/_layouts/15/clientforms.js"></script>
<script type="text/javascript" src="/_layouts/15/clientpeoplepicker.js"></script>
<script type="text/javascript" src="/_layouts/15/autofill.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.core.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.ui.controls.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
LoadList();
initializePeoplePicker('riskowner');
});
var clicked = false;
$(document).ajaxStop(function() {
$('ul#example').collapsibleCheckboxTree();
});
function LoadList(){
$('#example').html("");
$( "#expand" ).remove();
$( "#collapse" ).remove();
$( "#default" ).remove();
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/RoleAssignments/Groups?$select=Title,Id&$orderby=Title",
type: "GET",
contentType: "application/json;odata=nometadata",
headers: {
"accept": "application/json;odata=nometadata"
},
success: function(groups) {
$('#sitegroups').empty();
$.each(groups.value, function(i, item) {
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/sitegroups(" + item.Id + ")/Users?$select=Title,Id",
type: "GET",
contentType: "application/json;odata=nometadata",
headers: {
"accept": "application/json;odata=nometadata"
},
success: function(users) {
$('#sitegroups').append($('<option>', {
value: item.Id,
text: item.Title
}));
var html = '<li class="list-group-item">';
html += "<b>" + item.Title + "</b>";
html += "<ul>";
$.each(users.value, function(i, user) {
html += '<li class="list-group-item">';
html += '<input type="checkbox" data-group="' + item.Id + '" data-user="' + user.Id + '" name="usercheck" />';
html += user.Title;
html += '</li>';
});
html += '</ul>';
html += '</li>';
$("#example").append(html);
},
async:false
});
});
}
});
}
function initializePeoplePicker(peoplePickerElementId) {
// Create a schema to store picker properties, and set the properties.
var schema = {};
schema['PrincipalAccountType'] = 'User';
schema['SearchPrincipalSource'] = 15;
schema['ResolvePrincipalSource'] = 15;
schema['MaximumEntitySuggestions'] = 10;
schema['AllowMultipleValues'] = true;
// Render and initialize the picker.
// Pass the ID of the DOM element that contains the picker, an array of initial
// PickerEntity objects to set the picker value, and a schema that defines
// picker properties.
SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);
}
$('body').on('click', '#delete', function() {
clicked = true;
$("#errortext").html("");
$("#errortext").css('color', 'red');
var count = $('input[name = usercheck]:checked');
var loopcount = 0;
console.log(count);
if (count.length > 0) {
SP.UI.ModalDialog.showWaitScreenWithNoClose('Deleting...', 'Please wait while delete is in progress...');
$.each(count,
function(e) {
var groupID = count[e].dataset.group;
var userID = count[e].dataset.user;
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/sitegroups(" + groupID + ")/users/removeById(" + userID + ")/",
type: "POST",
contentType: "application/json;odata=verbose",
headers: {
"Accept": "application/json; odata=verbose",
'content-type': 'application/json;odata=verbose',
"X-RequestDigest": $("#__REQUESTDIGEST").val()
},
success: function(users) {
loopcount = loopcount + 1;
if (loopcount == count.length) {
LoadList();
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel);
$("#errortext").css('color', 'green');
$("#errortext").html("Users deleted successfully");
}
}
});
});
} else {
$("#errortext").html("Select atleast one checkbox");
}
});
$('body').on('click', '#add', function() {
var addcount = 0;
clicked = true;
$("#errortext").html("");
$("#errortext").css('color', 'red');
if ($("#riskowner_TopSpan_HiddenInput").val() != "") {
var pickerValue = $.parseJSON($("#riskowner_TopSpan_HiddenInput").val());
var groupid = $('#sitegroups option:selected').val();
if (pickerValue.length > 0) {
SP.UI.ModalDialog.showWaitScreenWithNoClose('Adding...', 'Please wait while add is in progress...');
$.each(pickerValue, function(i, item) {
var clientContext = new SP.ClientContext(_spPageContextInfo.webAbsoluteUrl);
var web = clientContext.get_web();
var collGroup = web.get_siteGroups();
var oGroup = collGroup.getById(groupid);
var user = web.ensureUser("i:0#.f|membership|" + item.EntityData.Email);
clientContext.load(web);
clientContext.load(oGroup);
clientContext.load(user);
var oUser = oGroup.get_users().addUser(user);
clientContext.load(oUser);
clientContext.executeQueryAsync(function() {
addcount = addcount + 1;
if (addcount == pickerValue.length) {
LoadList();
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel);
$("#errortext").css('color', 'green');
$("#errortext").html("Users added successfully");
}
}, function(sender, args) {
console.log('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
});
});
}
} else {
$("#errortext").html("Input atleast one user");
}
});
function clearPeoplePicker() {
var userField = $("#riskowner_TopSpan");
var ppobject = SPClientPeoplePicker.SPClientPeoplePickerDict[userField];
var usersobject = ppobject.GetAllUserInfo();
usersobject.forEach(function (index) {
ppobject.DeleteProcessedUser(usersobject[index]);
});
}
</script>
</head>
<body>
<div class="row">
<div class="col-lg-1">
<label style=" margin-top: 12%;">Users :</label>
</div>
<div class="col-lg-2">
<div class="" id="riskowner" required></div>
</div>
<div class="col-lg-5">
<label>Site Group :</label>
<select id="sitegroups" class="btn-primary btn-select-light">
</select>
<input type="button" id="add" value="Add" />
</div>
</div>
<div>
<label id="errortext" style="color:red"></label>
</div>
<input type="button" id="delete" value="Delete" />
<ul id="example" class="list-group expand">
</ul>
</body>
</html>