Trigger SharePoint Designer Workflow using SP Services

Posted on March 6, 2018 by dsouzajoel30

There are times when you want to first process some information in your code and then pass those information as parameter in the workflow and start it. Fortunately you can trigger the SharePoint workflow using SP Services You will need 2 files jquery.SPServices.min.js spservices-startworkflow.js Include the below references:

<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.core.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.workflowservices.js"></script>
<script type="text/javascript" src="../SiteAssets/js/jquery.SPServices.min.js"></script>
<script type="text/javascript" src="../SiteAssets/js/spservices-startworkflow.js"></script>

Below is the code:

startWorkflow({
  listName:"List Name here",
  itemID:id, //Item ID here
  parameters:[{Name:"Parameter1", Value:"Value1"},{Name:"Parameter2", Value:"Value2"}],
  workflowName:"Workflow Name here"
})

startWorkflow({

listName:"List Name here",

itemID:id, //Item ID here

parameters:[{Name:"Parameter1", Value:"Value1"},{Name:"Parameter2", Value:"Value2"}],

workflowName:"Workflow Name here"

})

World Clock

Posted on July 26, 2017 by dsouzajoel30

To implement the World Clock first store the list of Locations with their Latitude and Longitude in a list Then we need to calculate the timestamp of our location. By passing the information we will receive the timezone as a response. Using this information will convert the data and show it like the image above. Read more about World Clock[…]

Current Location Weather

Posted on July 26, 2017 by dsouzajoel30

In order to get the current location weather we need to use Geo-location of HTML5 supported browsers. It will give ask you to allow access to your location, Click on allow It will then get the latitude and longitude of the device. Then it will call the Yahoo Api for the weather information and then Read more about Current Location Weather[…]

Export Infopath Form to Word

Posted on April 23, 2017 by dsouzajoel30

To export any HTML to word you can you JQuery Word Export. Here I will show you how to convert Infopath Form to Word The JQuery requires a container containing html, but you can modify it to take the html as in input instead of the JQuery container Here is my Code below:

<!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>
</head>

<body>
    <button onclick="return Download()" value="Download" type="button">Download</button>
    <div id="content" style="background-color:white"></div>
    <div id="editor"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js" type="text/javascript"></script>
    <script src="/sites/joel/SiteAssets/InfopathPOC/FileSaver.js" type="text/javascript"></script>
    <script src="/sites/joel/SiteAssets/InfopathPOC/jquery.wordexport.js" type="text/javascript"></script>
    <script type="text/javascript">
        var html;
        $.ajax({
            type: 'GET',
            url: '<siteURL>/<Infopath Library>/<Infopath Form>.xml?NoRedirect=true',
            datatype: 'xml',
            cache: false,
            contentType: "text/xml; charset=\"utf-8\"",
            success: function(xmlContent) {
                html = '<div id="tableformat"><table>';
                for (var i = 0; i < xmlContent.children[0].children.length; i++) {
                    var element = xmlContent.children[0].children[i];
                    html += '<tr>';
                    html += '<td >';
                    html += element.localName;
                    html += '</td>';
                    if (element.localName == "ColorTest") {
                        html += '<td style="background-color:' + element.textContent + ';color:white">'
                        html += element.textContent;
                    } else if (element.localName == "ImageTest1") {
                        html += '<td>';
                        if (element.textContent == "Red")
                            html += '<img src="/sites/joel/SiteCollectionImages/red.png"/>';
                    } else if (element.localName == "ImageTest2") {
                        html += '<td>';
                        if (element.textContent == "Coffee")
                            html += '<img src="/sites/joel/SiteCollectionImages/coffee.png"/>';
                    } else {
                        html += '<td>';
                    }
                    html += '</td>';
                    html += '</tr>';
                }
                html += '</table></div>';
                $el = $(html).find("#tableformat"); // Here i have created a temporary container without actually rendering the HTML as i dont want to render it on a page
                $test = $el.prevObject;
            },
            error: function() {
                console.log('failed');
            }
        });

        function Download() {
            $($test).wordExport();
            return false;
        }
    </script>
</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Untitled 1</title>

</head>

<body>

<button onclick="return Download()" value="Download" type="button">Download</button>

var html;

$.ajax({

type: 'GET',

url: '<siteURL>/<Infopath Library>/<Infopath Form>.xml?NoRedirect=true',

datatype: 'xml',

cache: false,

contentType: "text/xml; charset=\"utf-8\"",

success: function(xmlContent) {

html = '<div id="tableformat"><table>';

for (var i = 0; i < xmlContent.children[0].children.length; i++) {

var element = xmlContent.children[0].children[i];

html += '<tr>';

html += '<td >';

html += element.localName;

html += '</td>';

if (element.localName == "ColorTest") {

html += '<td style="background-color:' + element.textContent + ';color:white">'

html += element.textContent;

} else if (element.localName == "ImageTest1") {

html += '<td>';

if (element.textContent == "Red")

html += '<img src="/sites/joel/SiteCollectionImages/red.png"/>';

} else if (element.localName == "ImageTest2") {

html += '<td>';

if (element.textContent == "Coffee")

html += '<img src="/sites/joel/SiteCollectionImages/coffee.png"/>';

} else {

html += '<td>';

}

html += '</td>';

html += '</tr>';

}

html += '</table></div>';

$el = $(html).find("#tableformat"); // Here i have created a temporary container without actually rendering the HTML as i dont want to render it on a page

$test = $el.prevObject;

error: function() {

console.log('failed');

}

});

function Download() {

$($test).wordExport();

return false;

}

</script>

</body>

</html>

Add users to Person or Group – SharePoint List

Posted on April 8, 2017 by dsouzajoel30

Below code shows how to add multiple users to person or group column in SharePoint List using JSOM. Image: Code:

<!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" />
    <style type="text/css">
        .sp-peoplepicker-topLevel,
        .sp-peoplepicker-topLevelDisabled {
                width: 274px !important;
        }
        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;
}
#choices{
	 padding: 15px 32px;
	  border: none;
    color: white;
    padding: 15px 32px;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;

}
/*.row input[type=text] {
    width: 100%;
   padding: 15px 32px;
    margin: -4px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
.sp-peoplepicker-topLevel{
	border:none !important;
}*/
    </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="/_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">
    var listURL = "/_api/web/lists/GetByTitle('Test List')/fields?$select=Choices,Title,StaticName&$filter=EntityPropertyName eq 'Role'";
    $(document).ready(function(){
    
    initializePeoplePicker('riskowner');
    });
    
 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);
        }

	$.ajax({
        url: _spPageContextInfo.webAbsoluteUrl + listURL,
        type: "GET",
        contentType: "application/json;odata=nometadata",
                headers: {
                    "accept": "application/json;odata=nometadata"
                },
        success: function (data) {
        $.each(data.value[0].Choices, function(i, item) {
        $('#choices').append($('<option>', {
                                    value: item,
                                    text: item
                                }));
                                     
        });
        

       }
});

$("body").on("click","#add",function(){
   $("#errortext").html("");
   $("#errortext").css('color', 'red');
 if ($("#riskowner_TopSpan_HiddenInput").val() != "") {
    SP.UI.ModalDialog.showWaitScreenWithNoClose('Adding...', 'Please wait while add is in progress...');
 var pickerValue = $.parseJSON($("#riskowner_TopSpan_HiddenInput").val());
 var clientContext = new SP.ClientContext(_spPageContextInfo.webAbsoluteUrl);
  var web = clientContext.get_web();
 var oList  = web.get_lists().getByTitle("Test List");
  var itemCreateInfo = new SP.ListItemCreationInformation();
  var oListItem = oList.addItem(itemCreateInfo);
 var choices = $('#choices option:selected').val();
 var users = new Array();

  if (pickerValue.length > 0) {
 $.each(pickerValue, function(i, item) {
  var lookupVal1 = new SP.FieldUserValue();
  //lookupVal1.set_lookupId(parseInt(item.EntityData.SPUserID))
  //lookupVal1.fromUser(item.EntityData.Email);
 users.push(SP.FieldUserValue.fromUser(item.Key));
 });
oListItem.set_item('User', users);
oListItem.set_item('Role', choices);
oListItem.update();
clientContext.executeQueryAsync(function(){
 $("#errortext").css('color', 'green');
 $("#errortext").html("Users added successfully");
 SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel);

},  function(sender, args) {
                            console.log('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
                        });  
  }

}
else{
   $("#errortext").html("Input atleast one user");
}
});

    </script>
</head>

<body>
<div class="row">
 <div class="col-lg-2">
<label>Users:</label>
            <div class="" id="riskowner" required></div>
        </div>
        </div>
<div class="row">
 <div class="col-lg-2">
<label style="margin-top: 9%;">Role:</label>
<select id="choices" class="btn-primary btn-select-light">

            </select>
</div>
</div>
<input type="button" id="add" value="Submit" style="margin-top: 2%;" />
 <label id="errortext" style="color:red"></label>
</body>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Untitled 1</title>

.sp-peoplepicker-topLevel,

.sp-peoplepicker-topLevelDisabled {

width: 274px !important;

}

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;

}

#choices{

padding: 15px 32px;

border: none;

color: white;

padding: 15px 32px;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

}

/*.row input[type=text] {

width: 100%;

padding: 15px 32px;

margin: -4px 0;

display: inline-block;

border: 1px solid #ccc;

border-radius: 4px;

box-sizing: border-box;

}

.sp-peoplepicker-topLevel{

border:none !important;

}*/

</style>

var listURL = "/_api/web/lists/GetByTitle('Test List')/fields?$select=Choices,Title,StaticName&$filter=EntityPropertyName eq 'Role'";

$(document).ready(function(){

initializePeoplePicker('riskowner');

});

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

}

$.ajax({

url: _spPageContextInfo.webAbsoluteUrl + listURL,

type: "GET",

contentType: "application/json;odata=nometadata",

headers: {

"accept": "application/json;odata=nometadata"

success: function (data) {

$.each(data.value[0].Choices, function(i, item) {

$('#choices').append($('<option>', {

value: item,

text: item

}));

});

}

});

$("body").on("click","#add",function(){

$("#errortext").html("");

$("#errortext").css('color', 'red');

if ($("#riskowner_TopSpan_HiddenInput").val() != "") {

SP.UI.ModalDialog.showWaitScreenWithNoClose('Adding...', 'Please wait while add is in progress...');

var pickerValue = $.parseJSON($("#riskowner_TopSpan_HiddenInput").val());

var clientContext = new SP.ClientContext(_spPageContextInfo.webAbsoluteUrl);

var web = clientContext.get_web();

var oList = web.get_lists().getByTitle("Test List");

var itemCreateInfo = new SP.ListItemCreationInformation();

var oListItem = oList.addItem(itemCreateInfo);

var choices = $('#choices option:selected').val();

var users = new Array();

if (pickerValue.length > 0) {

$.each(pickerValue, function(i, item) {

var lookupVal1 = new SP.FieldUserValue();

//lookupVal1.set_lookupId(parseInt(item.EntityData.SPUserID))

//lookupVal1.fromUser(item.EntityData.Email);

users.push(SP.FieldUserValue.fromUser(item.Key));

});

oListItem.set_item('User', users);

oListItem.set_item('Role', choices);

oListItem.update();

clientContext.executeQueryAsync(function(){

$("#errortext").css('color', 'green');

$("#errortext").html("Users added successfully");

SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel);

}, function(sender, args) {

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

});

}

else{

$("#errortext").html("Input atleast one user");

}

});

</script>

</head>

<body>

<label>Users:</label>

</div>

</select>

</div>

</body>

</html>

Add/Delete User from Group – Custom HTML Form Permission

Posted on April 8, 2017 by dsouzajoel30

Below is a sample HTML UI Page to control User Group Permission Image: Code:

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Untitled 1</title>

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>

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

<label style=" margin-top: 12%;">Users :</label>

</div>

</div>

<label>Site Group :</label>

</select>

</div>

<div>

</div>

</ul>

</body>

</html>

Get Site Title using Rest Api

Posted on September 21, 2016 by dsouzajoel30

Well i needed to get the Title of site just for displaying on to a page. The below post will tell you how to Get Site Title using Rest Api With the launch of Sharepoint 2013, Microsoft provided REST(Representational State Transfer) interface which is a data service that allows you to use construct HTTP requests Read more about Get Site Title using Rest Api[…]

Add Custom menu Item in ECB Menu using Javascript

Posted on March 22, 2016 by dsouzajoel30

SharePoint provides a build in JavaScript, which has two functions for ECB AddListMenuItems and AddDocLibMenuItems.These methods are executed by SharePoint to display context menu. The below code will help you to add a Custom Menu in ECB using JavaScript. By default the ECB menu comes for the Title column where user can click on the ECB menu Read more about Add Custom menu Item in ECB Menu using Javascript[…]

Follow a Video in SharePoint

Posted on February 14, 2016 by dsouzajoel30

Now in SharePoint, the videos are actually stored as Document Sets . And you cannot follow a Document Set. Which is why you do not get the option to follow a video. The following content types can be followed : User Document Site Tag Now we can follow a Document Set using JavaScript based on Read more about Follow a Video in SharePoint[…]