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

Steps for Implementation

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