Walk Through SharePoint 2013: Admin Screen

Hi,

We had a requirement for the screen to the Admin i.e.

He should be able to select the document library.

Post selection. the respective document library groups should be populated.

Admin should be able to view the group users on selection of the group.

After that he should be able to Add/Remove users of the selected groups.

For this, below is the ECMA script that has been written

var groupCollection;

var groupUsers;

/* var userarray = [];

var usercount = 0;

var clientContext;

var userCollection; */

//if(localStorage.hasOwnProperty('ClientPeoplePickerMRU')){}

document.title = 'Nucleus Admin';

window.localStorage.removeItem('ClientPeoplePickerMRU');

window.localStorage.removeItem('SPSuiteLinksJson');

function getSiteGroups() {

//alert('entered getSiteGroups method')

var clientContext = new SP.ClientContext();

//alert('after clientContext')

this.groupCollection = clientContext.get_web().get_siteGroups();

//alert('after groupCollection')

clientContext.load(groupCollection);

//alert('after load')

clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

if(document.getElementById("doclib").value == "PreSales" || document.getElementById("doclib").value == "Sales Tools"){

setTimeout(function(){ provideAccess() }, 1000);

}

else{

setTimeout(function(){ HideControls() }, 1000);

alert('Please select any document library');

}

function ShowUsers(){

//$('#groupTableDiv').show();

//var tbl = document.getElementById('groupTable'); // table reference

var tbl = document.getElementById('datatable'); // table reference

//var x = document.getElementById("groupTable").rows.length;

var x = document.getElementById("datatable").rows.length;

//alert(x);

//int lastRow = tbl.rows.length - 1, // set the last row index

// delete rows with index greater then 0

// for(int i = tbl.rows.length - 1; i > 0; i--){tbl.deleteRow(i);}

//console.log(x);

if(x>1)

{

var tableRows = tbl.getElementsByTagName('tr');

var rowCount = tableRows.length;

for (var i=x-1; i>0; i--){

//tbl.removeChild(tableRows[x]);

//alert(i+'row deleted');

tbl.deleteRow(i);

}

//alert('Entered into Show Users Method')

var clientContext = new SP.ClientContext();

var groupCollection = clientContext.get_web().get_siteGroups();

var oGroup = groupCollection.getByName(document.getElementById("lstdoclibgroups").value);

//alert(document.getElementById("lstdoclibgroups").value);

groupUsers = oGroup.get_users();

clientContext.load(groupCollection);

clientContext.load(oGroup);

clientContext.load(groupUsers);

//alert('after load')

clientContext.executeQueryAsync(Function.createDelegate(this, this.onUserShowSucceeded), Function.createDelegate(this, this.onUserShowFailed));

/* this.collUser = oGroup.get_users();

clientContext.load(collUser); */

}

function onUserShowSucceeded(){

var userEnumerator = groupUsers.getEnumerator();

while (userEnumerator.moveNext()) {

var oUser = userEnumerator.get_current();

//console.log(oUser.get_title()) ;

//var table = document.getElementById("groupTable");

var table = document.getElementById("datatable");

var row = table.insertRow(-1);

var cell1 = row.insertCell(0);

var cell2 = row.insertCell(1);

cell1.innerHTML = oUser.get_title();

/* var arr = new Array();

arr.push(oUser.get_title());

var sorting = new Array();

sorting =arr.sort();

for(var i=0;i<sorting.length;i++){

cell1.innerHTML = sorting[i];

row.appendChild(cell1);

} */

//document.getElementById('lblgroupusernames').innerHTML = oUser.get_title();

//cell1.innerHTML = document.getElementById('lblgroupusernames').innerHTML;

if(oUser.get_loginName().startsWith("MINDTREE\\"))

cell2.innerHTML = (oUser.get_loginName().replace("MINDTREE\\",""));

else

cell2.innerHTML = (oUser.get_loginName().replace("i:0#.w|mindtree\\",""));

}

pagination();

document.getElementById('lbladdusersstatus').innerHTML = '';

$('#groupTableDiv').show();

}

function onUserShowFailed(sender, args){

//alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());

document.getElementById('lbladdusersstatus').innerHTML = 'Please select the group to display users';

$('#groupTableDiv').hide();

}

function HideControls(){//debugger;

//alert('entered HideControls method')

$('#showlistgroupsDiv').hide();

$('#showpeoplepickerDiv').hide();

$('#groupTableDiv').hide();

}

function provideAccess(){//debugger;

//alert('entered one')

//$('#lstdoclibgroups').show();

$('#showlistgroupsDiv').show();

$('#groupTableDiv').hide();

//$('#lblMID').show();

//$('#pp1').show();

$('#showpeoplepickerDiv').show();

$("#peoplePickerDiv").spPeoplePicker();

$('#peoplePickerDiv').spPeoplePicker();

$('#pp1').on('click',function(e){

$("#peoplePickerDiv").spPeoplePicker();

if($('.sp-peoplepicker-resolveList').text() == ''){

//alert('Please Enter MID!!!');

e.preventDefault();

return false;

}else{

resolvedMidNominees = '';

newArrayATeam = [];

$('#peoplePickerDiv .sp-peoplepicker-userSpan').each(function () {

currentMid = $(this).attr('sid').split('\\')[1];

console.log(currentMid);

resolvedMidNominees = currentMid;

newArrayATeam.push(resolvedMidNominees);

});

console.log(newArrayATeam);

return false;

}

});

$('#pp2').on('click',function(e){

$("#peoplePickerDiv").spPeoplePicker();

if($('.sp-peoplepicker-resolveList').text() == ''){

//alert('Please Enter MID!!!');

e.preventDefault();

return false;

}else{

resolvedMidNominees = '';

newArrayATeam = [];

$('#peoplePickerDiv .sp-peoplepicker-userSpan').each(function () {

currentMid = $(this).attr('sid').split('\\')[1];

console.log(currentMid);

resolvedMidNominees = currentMid;

newArrayATeam.push(resolvedMidNominees);

});

console.log(newArrayATeam);

return false;

}

});

}

function AddUsers() {

if($('.sp-peoplepicker-resolveList').text() == '')

{

alert('Please enter Employee ID')

}

else

{

var user;

var Group;

//alert('entered into AddUsers method');

//alert(document.getElementById("#peoplePickerDiv").value);

//alert(document.getElementById("txtUserid").value);

var clientContext = new SP.ClientContext();

var groupCollection = clientContext.get_web().get_siteGroups();

//alert('Sales Tools Contribute Group');

//Group = groupCollection.getByName('Sales Tools Contribute Group');

Group = groupCollection.getByName(document.getElementById("lstdoclibgroups").value);

//To add multiple users

var userarray = [];

var usercount = 0;

var userCollection = Group.get_users();

$('#peoplePickerDiv .sp-peoplepicker-userSpan').each(function() {

currentMid = $(this).attr('sid').split('\\')[1];

//alert(currentMid);

//Uncomment if user exists doesn't work

userarray[usercount] = clientContext.get_web().ensureUser('mindtree\\' + currentid);

userCollection.addUser(userarray[usercount]);

clientContext.load(userarray[usercount]);

usercount++;

//console.log(userCollection);

users=Group.get_users();

//var currentuser=clientContext.get_web().get_currentUser();

//clientContext.load(currentuser);

//console.log(currentuser.get_id());

});

clientContext.load(userCollection);

clientContext.load(Group);

clientContext.executeQueryAsync(Function.createDelegate(this, this.onUserAddedSucceeded), Function.createDelegate(this, this.onUserAddedFailed));

//alert('Users have been added into the group')

//document.getElementById('lbladdusersstatus').innerHTML = 'Users have been added into the group';

}

function onUserAddedSucceeded() {

document.getElementById('lbladdusersstatus').innerHTML = 'User(s) have been added into the group';

}

function onUserAddedSucceededDone()

{

//alert('Done');

}

function onUserAddedFailedDone()

{

//alert('Failed');

}

function onUserAddedFailed(sender, args) {

//alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());

document.getElementById('lbladdusersstatus').innerHTML = 'Please select the group to add users';

}

function RemoveUsers()

{

//alert('Entered into RemoveUsers method')

if($('.sp-peoplepicker-resolveList').text() == '')

{

alert('Please enter MID')

}

else

{

//alert('Entered into else loop')

var user;

var Group;

var clientContext = new SP.ClientContext();

var groupCollection = clientContext.get_web().get_siteGroups();

//alert('Sales Tools Contribute Group');

//alert(document.getElementById("lstdoclibgroups").value);

//Group = groupCollection.getByName('Sales Tools Contribute Group');

Group = groupCollection.getByName(document.getElementById("lstdoclibgroups").value);

//To Remove multiple users

var userarray = [];

var usercount = 0;

var userCollection = Group.get_users();

$('#peoplePickerDiv .sp-peoplepicker-userSpan').each(function() {

currentMid = $(this).attr('sid').split('\\')[1];

//alert(currentMid);

//Uncomment if user exists doesn't work

userarray[usercount] = clientContext.get_web().ensureUser('mindtree\\' + currentMid);

userCollection.remove(userarray[usercount]);

clientContext.load(userarray[usercount]);

usercount++;

});

clientContext.load(userCollection);

clientContext.load(Group);

clientContext.executeQueryAsync(Function.createDelegate(this, this.onUserRemoveSucceeded), Function.createDelegate(this, this.onUserRemoveFailed));

//alert('Users have been added into the group')

//document.getElementById('lbladdusersstatus').innerHTML = 'Users have been removed from the group';

}

function onUserRemoveSucceeded()

{

document.getElementById('lbladdusersstatus').innerHTML = 'User(s) have been removed from the group';

}

function onUserRemoveFailed()

{

//alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());

document.getElementById('lbladdusersstatus').innerHTML = 'Please select the group to remove users';

}

function onQuerySucceeded() {

var groupName = 'Site Groups: \n';

var groupsEnumerator = this.groupCollection.getEnumerator();

while (groupsEnumerator.moveNext()) {

var group = groupsEnumerator.get_current();

groupName += group.get_title() + '\n';

if(document.getElementById("doclib").value == "PreSales" && group.get_title()=="PreSales Group"){

//alert(group.get_title());

document.getElementById('lblsitegroups').innerHTML = 'PreSales Group List';

//alert('presales')

var opt = document.createElement("option");

opt.text = group.get_title();

opt.value = group.get_title();

document.getElementById("lstdoclibgroups").options.length = 0;

document.getElementById("lstdoclibgroups").options.add(opt);

}

else if(document.getElementById("doclib").value == "Sales Tools" && group.get_title()=="Sales Tools Contribute Group"){

document.getElementById('lblsitegroups').innerHTML = 'Sales Tools Group List';

//alert('sales tools')

var opt = document.createElement("option");

opt.text = group.get_title();

opt.value = group.get_title();

document.getElementById("lstdoclibgroups").options.length = 0;

document.getElementById("lstdoclibgroups").options.add(opt);

}

//alert(groupName);

}

function onQueryFailed(sender, args) {

alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());

}

</script>

<h1>Document Library</h1>

<label class="add-label">Select Library</label>

</div>

<option value="select">--Select--</option>

<option value="Sales Tools">Sales Tools</option>

<option value="PreSales">PreSales</option>

</select>

</div>

<!-- <select id="doclib" class="select">

<option value="select">--Select--</option>

<option value="Sales Tools">Sales Tools</option>

<option value="PreSales">PreSales</option>

</select>

</br>

</div>

</div>

<!--<table class="spPeoplePickerTable" width="50%" cellpadding="10" cellspacing="1">

<tr>

</tr>

<tr>

</tr>

</table>-->

</div>

<div>

</div>

<tbody>

<tr>

<th>

<b>

Group Members

</b>

</th>

<th>

<b>

MID

</b>

</th>

</tr>

</tbody>

</table>

<ol>

</ul>

</ol>

<tr>

</tr>

</table>

</div>

<!-- <div>

</div> -->

$(function () {

//SP.SOD.executeFunc("sp.js", "SP.ClientContext",provideAccess);

//setTimeout(function () { provideAccess() }, 3000);

function provideAccess(){//debugger;

alert('entered two')

$("#peoplePickerDiv").spPeoplePicker();

$('#peoplePickerDiv').spPeoplePicker();

$('#pp1').on('click',function(e){

$("#peoplePickerDiv").spPeoplePicker();

if($('.sp-peoplepicker-resolveList').text() == ''){

//alert('Please Enter MID!!!');

e.preventDefault();

return false;

}else{

resolvedMidNominees = '';

newArrayATeam = [];

$('#peoplePickerDiv .sp-peoplepicker-userSpan').each(function () {

currentMid = $(this).attr('sid').split('\\')[1];

console.log(currentMid);

resolvedMidNominees = currentMid;

newArrayATeam.push(resolvedMidNominees);

});

console.log(newArrayATeam);

return false;

}

});

$('#pp2').on('click',function(e){

$("#peoplePickerDiv").spPeoplePicker();

if($('.sp-peoplepicker-resolveList').text() == ''){

//alert('Please Enter ID!!!');

e.preventDefault();

return false;

}else{

resolvedMidNominees = '';

newArrayATeam = [];

$('#peoplePickerDiv .sp-peoplepicker-userSpan').each(function () {

currentMid = $(this).attr('sid').split('\\')[1];

console.log(currentMid);

resolvedMidNominees = currentMid;

newArrayATeam.push(resolvedMidNominees);

});

console.log(newArrayATeam);

return false;

}

});

}

});

</script>

function pagination(){

var Imtech = {};

Imtech.Pager = function() {

this.paragraphsPerPage = 2;

this.currentPage = 1;

this.pagingControlsContainer = '#pagingControls';

//this.pagingContainerPath = '#groupTable';

this.pagingContainerPath = '#datatable';

this.numPages = function() {

var numPages = 0;

if (this.paragraphs != null && this.paragraphsPerPage != null) {

numPages = Math.ceil(this.paragraphs.length / this.paragraphsPerPage);

}

return numPages;

};

this.showPage = function(page) {

this.currentPage = page;

var html = '';

this.paragraphs.slice((page-1) * this.paragraphsPerPage,

((page-1)*this.paragraphsPerPage) + this.paragraphsPerPage).each(function() {

html += '<tr>' + $(this).html() + '</tr>';

});

$(this.pagingContainerPath).html(html);

renderControls(this.pagingControlsContainer, this.currentPage, this.numPages());

}

var renderControls = function(container, currentPage, numPages) {

var pagingControls = 'Page : <table>';

for (var i = 1; i <= numPages; i++) {

if (i != currentPage) {

pagingControls += '<tr><a href="#" onclick="pager.showPage(' + i + '); return false;">' + i + '</a></tr>';

} else {

pagingControls += '<tr>' + i + '</tr>';

}

pagingControls += '</table>';

$(container).html(pagingControls);

}

pager = new Imtech.Pager();

pager.paragraphsPerPage = 10; // set amount elements per page

//pager.pagingContainer = $('#groupTable'); // set of main container

pager.pagingContainer = $('#datatable'); // set of main container

pager.paragraphs = $('tr', pager.pagingContainer); // set of required containers

pager.showPage(1);

}

</script>

#documentoryLibrary select#doclib{font:12px open_sansregular,helvetica,arial;display:inline;width:300px;margin:5px 0 10px;padding:2px 0 5px 5px;}

#DeltaPlaceHolderMain td {font-weight:normal!important;text-transform:initial;display:block;font:12px 'open_sanssemibold';color:#333;Margin:0 5px 8px 0;}

#peoplePickerDiv.sp-peoplepicker-topLevel{width:280px;}

#content h1{font:18px open_sansbold,helvetica,arial;margin-bottom:20px;color:#666;}

.spPeoplePickerTable input[type=submit],.spPeoplePickerTable input[type=button] {color:#fff;background:#3baed6;border:0;font:15px open_sansbold;min-width:inherit;margin: 10px 1px 0 0;}

#documentoryLibrary p#lbladdusersstatus{color:#388038;}

.frm-field select#lstdoclibgroups{width:300px;font:12px/16px open_sansregular,helvetica,arial;color:#333;margin-top:1px;word-break:break-all;padding-left:5px;margin-bottom:10px;}

.frm-field .add-label{font:12px 'open_sanssemibold';padding:1px 10px 1px 0px;}

table#groupTable, #datatable{width:382px !important;}

table#groupTable tr, #datatable tr{border:1px solid grey !important;}

table#groupTable td, #datatable td{border:1px solid grey !important;padding:5px !important;}

table#groupTable th{border:1px solid grey !important;padding:5px !important;}

#datatable p{text-indent:20px;text-align:justify;}

#pagingControls table{padding-left:0.5em}

#pagingControls tr{display:inline;padding:0 0.5em}

div#pagingControls a{padding: 5px;background: #7f9cce;color: #fff;height: 10px;display: inline-block;line-height: 12px;margin: 8px 5px 0;}

div#pagingControls{margin-top: 15px;float: right;clear: left;}

#datatable tr td:first-child {width: 274px;}

.sp-peoplepicker-topLevel {width: 274px !important;}

table#groupTable {margin-top: 20px;}

div#groupTableDiv{width: 382px;}

input[type=button], input[type=reset], input[type=submit], button {padding: 6px 7px;}

#btnGetSiteGroups{margin-left: 0;color: #fff;background: #3baed6;border: 0;font: 15px open_sansbold;min-width: inherit;padding:3px 10px;margin-bottom:5px;}

</style>

Page Load