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.   
  58.                     }, function(sender, args)   
  59.                      {  
  60.                         //Item updated fail  
  61.                         console.log("Request Failed to get projectlist Items :" + args.get_message());  
  62.                     });  
  63.                 } else  
  64.                 {  
  65.                     dfd.resolve();  
  66.                 }  
  67.             },  
  68.             function(sender, args)  
  69.              {  
  70.                 $('.loader').hide();  
  71.                 console.log("Request failed in Portfolio List " + args.get_message());  
  72.             });  
  73.         returndfd.promise();  
  74.     }  
  75.     //method for read query string value  
  76. functionmanageQueryStringParameter(paramToRetrieve)  
  77. {  
  78.     varparams = document.URL.split("?")[1].split("&");  
  79.     varstrParams = "";  
  80.     for (var i = 0; i < params.length; i = i + 1)  
  81.     {  
  82.         varsingleParam = params[i].split("=");  
  83.         if (singleParam[0] == paramToRetrieve)  
  84.         {  
  85.             returnsingleParam[1];  
  86.         }  
  87.     }  
  88. }  
Summary

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