Bulk Update In SharePoint List Using JSOM
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).