In this article, we 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

001.// Js code Starts here 
002. 
003.'use strict';
004. 
005.//Get Current Context 
006. 
007.var context = SP.ClientContext.get_current();
008. 
009.//Declaring the variables 
010. 
011.varhostWebURL, appWebURL;
012. 
013.// this code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model 
014. 
015.$(document).ready(function () {
016. 
017.    // Get App web URL and Host Web URL from Query string parameter 
018. 
019.    hostWebURL = decodeURIComponent(manageQueryStringParameter('SPHostUrl'));
020. 
021.    appWebURL = decodeURIComponent(manageQueryStringParameter('SPAppWebUrl'));
022. 
023.    //Calling Bulk Edit method in document ready 
024. 
025.    BulkEdit();
026. 
027.});
028. 
029.//Update multiple items
030. 
031.function BulkEdit()
032. 
033.{
034. 
035.    var title = "Test";
036. 
037.    var dfd = $.Deferred();
038. 
039.    //Get list from host web 
040. 
041.    var programList = appCtx.get_web().get_lists().getByTitle('ProgramList');
042. 
043.    var camlQuery = new SP.CamlQuery();
044. 
045.    camlQuery.set_viewXml("<View><Query><Where><Eq><FieldRef Name='Title' /><Value Type='Text'>" + title + "</Value></Eq></Where></Query></View>");
046. 
047.    //Get items by Query
048. 
049.    var progColl = programList.getItems(camlQuery);
050. 
051.    //Load item collection
052. 
053.    context.load(progColl);
054. 
055.    context.executeQueryAsync(function () {
056. 
057.        var currentItemArray = [];
058. 
059.        //Check itemcollection count greater than 0
060. 
061.        if (progColl.get_count() > 0) {
062. 
063.            var progEnum = progColl.getEnumerator();
064. 
065.            while (progEnum.moveNext()) {
066. 
067.                var currentItem = progEnum.get_current();
068. 
069.                var progTitle = currentItem.get_item("Title");
070. 
071.                var currentId = currentItem.get_item("ID");
072. 
073.                //Get Item by current ID
074. 
075.                var items = programList.getItemById(currentId);
076. 
077.                //set isdeleted column to True
078. 
079.                items.set_item("IsDeleted", true);
080. 
081.                //Update the item
082. 
083.                items.update();
084. 
085.                //Push item on the array
086. 
087.                currentItemArray.push(items);
088. 
089.                //Load the item Array
090. 
091.                context.load(currentItemArray[currentItemArray.length - 1]);
092. 
093.            }
094. 
095.            context.executeQueryAsync(function () {
096. 
097.                //Item Updated sucess
098. 
099.                alert("Items are updated Successfully");
100. 
101.                dfd.resolve();
102. 
103.            }, function (sender, args) {
104. 
105.                //Item updated fail
106. 
107.                console.log("Request Failed to get projectlist Items :" + args.get_message());
108. 
109.            });
110. 
111.        }
112. 
113.        else {
114. 
115.            dfd.resolve();
116. 
117.        }
118. 
119.    },
120. 
121.    function (sender, args) {
122. 
123.        $('.loader').hide();
124. 
125.        console.log("Request failed in Portfolio List " + args.get_message());
126. 
127.    });
128. 
129.    return dfd.promise();
130. 
131.}
132. 
133.//method for read query string value
134. 
135.function manageQueryStringParameter(paramToRetrieve) {
136. 
137.    var params = document.URL.split("?")[1].split("&");
138. 
139.    var strParams = "";
140. 
141.    for (var i = 0; i < params.length; i = i + 1) {
142. 
143.        var singleParam = params[i].split("=");
144. 
145.        if (singleParam[0] == paramToRetrieve) {
146. 
147.            return singleParam[1];
148. 
149.        }
150. 
151.    }
152. 
153.}

Summary


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