Create Multiple SharePoint user group using JSOM

In this blog, I would like to share the way for create multiple SharePoint user Group in Single Asynchronous process using JavaScript object model.

Steps for Implementation

  • Get Current Context.
  • Get App web URL and Host Web URL from Query string parameter.
  • Calling CreateMultipleGroup method in document ready.
  • Get web from app context site.
  • Create new group Information
  • Get Role definition by name (permission for the Group)
  • Add group and add the role to the collection.
  • Set Allow membership then set Group Owner
  • Push oMembersGRP in array
  • Then load the array
  • Finally execute

In your JavaScript file write the following code,

  1. // Js code Starts here   
  2. ‘use strict’;
  3. //Get Current Context   
  4. var context = SP.ClientContext.get_current();
  5. //Declaring the variables   
  6. varhostWebURL, appWebURL;
  7. // this code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model   
  8. $(document).ready(function () {
  9.     // Get App web URL and Host Web URL from Query string parameter   
  10.     hostWebURL = decodeURIComponent(manageQueryStringParameter(‘SPHostUrl’));
  11.     appWebURL = decodeURIComponent(manageQueryStringParameter(‘SPAppWebUrl’));
  12.     //Calling Bulk Edit method in document ready   
  13.     CreateMultipleGroup ();
  14. });
  15. function CreateMultipleGroup()
  16. {
  17.     var permission = [“TestGroup”“TestGroup1”“TestGroup2”];
  18.     var membershipArray = [];
  19.     var deferred = $.Deferred();
  20.     //var appCtxSite = new SP.AppContextSite(context, hostWebURL);
  21.     var currentWEB = appCtx.get_web();
  22.     // Create Group information for Group
  23.     var membersGRP = new SP.GroupCreationInformation();
  24.     // Create a new RoleDefinitionBindingCollection.   
  25.     var rdContribute = currentWEB.get_roleDefinitions().getByName(“Contribute”);
  26.     for (var i = 0; i < permission.length; i++)
  27.     {
  28.         var collContribute = SP.RoleDefinitionBindingCollection.newObject(context);
  29.         membersGRP.set_title(permission[i]);
  30.         membersGRP.set_description(‘Use this group to grant people contribute permissions to the SharePoint site:’);
  31.         //add group
  32.         var oMembersGRP = currentWEB.get_siteGroups().add(membersGRP);
  33.         // Add the role to the collection.
  34.         collContribute.add(rdContribute);
  35.         //set Allow membership edit to false
  36.         oMembersGRP.set_allowMembersEditMembership(false);
  37.         //Set group Wowner
  38.         var groupOwner = currentWEB.get_siteGroups().getByName(“GroupName”);
  39.         oMembersGRP.set_owner(groupOwner);
  40.         oMembersGRP.set_onlyAllowMembersViewMembership(false);
  41.         oMembersGRP.update();
  42.         //Push membership in array 
  43.         membershipArray.push(oMembersGRP);
  44.         context.load(membershipArray[membershipArray.length – 1]);
  45.     }
  46.     //Execute Query
  47.     context.executeQueryAsync(
  48.         function () {
  49.             deferred.resolve();
  50.             alert(“Group Created Successfully”);
  51.         },
  52.         function (sender, args) {
  53.             deferred.reject();
  54.             alert(“Failed to create groups “ + args.get_message());
  55.         });
  56.     return deferred.promise();
  57. }
  58. //method for read query string value
  59. function manageQueryStringParameter(paramToRetrieve) {
  60.     var params = document.URL.split(“?”)[1].split(“&”);
  61.     var strParams = “”;
  62.     for (var i = 0; i < params.length; i = i + 1) {
  63.         var singleParam = params[i].split(“=”);
  64.         if (singleParam[0] == paramToRetrieve) {
  65.             return singleParam[1];
  66.         }
  67.     }
  68. }

Summary

In this article we have explored how to create multiple SP user group in single Asynchronous process using JSOM. If we follow the single asynchronous process for creating multiple groups the performance will improve. Happy Coding!

Bulk Update In SharePoint List Using JSOM

In this article I will explain the way for bulk edit in SharePoint list items using JavaScript object model (JSOM)

Steps for Implementation
  • Get Current Context.
  • Get App web URL and Host Web URL from Query string parameter.
  • Calling BulkEdit method in document ready.
  • Get List from app context site.
  • Get list collection by query.
  • Then Update the item by ID.
  • Load the updated item array
  • Finally all item will be updated successfully

In your JavaScript file write the following code,

  1. // Js code Starts here 
  2. ‘use strict’;
  3. //Get Current Context 
  4. var context = SP.ClientContext.get_current();
  5. //Declaring the variables 
  6. varhostWebURL, appWebURL;
  7. // this code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model 
  8. $(document).ready(function()
  9.     {
  10.     // Get App web URL and Host Web URL from Query string parameter 
  11.     hostWebURL = decodeURIComponent(manageQueryStringParameter(‘SPHostUrl’));
  12.     appWebURL = decodeURIComponent(manageQueryStringParameter(‘SPAppWebUrl’));
  13.     //Calling Bulk Edit method in document ready 
  14.     BulkEdit();
  15. });
  16. //Update multiple items
  17. functionBulkEdit()
  18. {
  19.         var title = “Test”;
  20.         vardfd = $.Deferred();
  21.         //Get list from host web 
  22.         varprogramList = appCtx.get_web().get_lists().getByTitle(‘ProgramList’);
  23.         varcamlQuery = newSP.CamlQuery();
  24.         camlQuery.set_viewXml(“<View><Query><Where><Eq><FieldRef Name=’Title’ /><Value Type=’Text’>” + title + “</Value></Eq></Where></Query></View>”);
  25.         //Get items by Query
  26.         varprogColl = programList.getItems(camlQuery);
  27.         //Load item collection
  28.         context.load(progColl);
  29.         context.executeQueryAsync(function()
  30.                 {
  31.                 varcurrentItemArray = [];
  32.                 //Check itemcollection count greater than 0
  33.                 if (progColl.get_count() > 0)
  34.                 {
  35.                     varprogEnum = progColl.getEnumerator();
  36.                     while (progEnum.moveNext())
  37.                     {
  38.                         varcurrentItem = progEnum.get_current();
  39.                         varprogTitle = currentItem.get_item(“Title”);
  40.                         varcurrentId = currentItem.get_item(“ID”);
  41.                         //Get Item by current ID
  42.                         var items = programList.getItemById(currentId);
  43.                         //set isdeleted column to True
  44.                         items.set_item(“IsDeleted”true);
  45.                         //Update the item
  46.                         items.update();
  47.                         //Push item on the array
  48.                         currentItemArray.push(items);
  49.                         //Load the item Array
  50.                         context.load(currentItemArray[currentItemArray.length – 1]);
  51.                     }
  52.                     context.executeQueryAsync(function()
  53.                       {
  54.                         //Item Updated sucess
  55.                         alert(“Items are updated Successfully”);
  56.                         dfd.resolve();
  57.                     }, function(sender, args)
  58.                      {
  59.                         //Item updated fail
  60.                         console.log(“Request Failed to get projectlist Items :” + args.get_message());
  61.                     });
  62.                 } else
  63.                 {
  64.                     dfd.resolve();
  65.                 }
  66.             },
  67.             function(sender, args)
  68.              {
  69.                 $(‘.loader’).hide();
  70.                 console.log(“Request failed in Portfolio List “ + args.get_message());
  71.             });
  72.         returndfd.promise();
  73.     }
  74.     //method for read query string value
  75. functionmanageQueryStringParameter(paramToRetrieve)
  76. {
  77.     varparams = document.URL.split(“?”)[1].split(“&”);
  78.     varstrParams = “”;
  79.     for (var i = 0; i < params.length; i = i + 1)
  80.     {
  81.         varsingleParam = params[i].split(“=”);
  82.         if (singleParam[0] == paramToRetrieve)
  83.         {
  84.             returnsingleParam[1];
  85.         }
  86.     }
  87. }

Summary

In this article we explored how to edit the multiple items on the list using JavaScript object model (JSOM).

Client Side Taxonomy Picker For SharePoint App

In this article I will share how to use the client side taxonomy picker in SharePoint Apps.

Here are the steps,

Add the following CSS and JS files references in app .aspx page as in the following image,
  1. <!– CSS Files –>
  2. < link href = “../Content/Styles/taxonomypickercontrol.css”
  3. rel = “stylesheet” / >
  4.     <!– Javacript Files –>
  5.     < script type = “text/javascript”
  6.         src = “../_layouts/15/SP.Taxonomy.js” >
  7.     < /script>
  8.     < script type = “text/javascript”
  9.         src = “../Scripts/taxonomypickercontrol.js” >
  10.     < /script>
  11.     < script type = “text/javascript”
  12.         src = “../Scripts/taxonomypickercontrol_resources.en.js” >
  13.     < /script>

CSS

Then add the input control in placeholder main part as shown below,

Note: You can change the id of the input control.

  1.    “hidden” id=“taxPickerKeywords” />

control

On Document ready add the following code to bind the term set for the taxonomy picker,

Here I added the Enterprise keyword term set,

$(‘#taxPickerKeywords’).taxpicker({ isMulti: true, allowFillIn: true, termSetId: “bbe229c4-6127-4335-a6bb-c756ddcc6da0” }, context);

Term set ID will vary for each term sets.

From term store we can take the ID of term set,

identifier

Parameters

The first parameter of the Taxonomy Picker sets the options for the control. The properties that can be set include:

 

Parameter Description
isMulti Boolean indicating if taxonomy picker support multiple value.
isReadOnly Boolean indicating if the taxonomy picker is rendered in read only mode.
allowFillIn Boolean indicating if the control allows fill=ins (Open TermSets only).
termSetId The GUID of the TermSet to bind against (available from Term Management).
useHashtags Boolean indicating if the default hashtags TermSet should be used.
useKeyword Boolean indicating if the default keywords TermSet should be used.
maxSuggestions Integer for the max number of suggestions to list (defaults is 10).
lcid The locale ID for creating terms (default is 1033).
language The language code for the control (defaults to en=us) context.

The second parameter is an initialized SP.ClientContext object,

Make sure to provide permission to taxonomy in your appmanifest.xml file,

permission

Finally deploy the solution, Taxonomy picker will be available in your apps page.

Enter page title

Page title

The terms option will be available on the pop up as in the following,

kewword

Summary

In this article we explored how to use the taxonomy picker in SharePoint Hosted apps.