I have read lots of articles on C# Corner, as well as on other online websites about CRUD operations on Sharepoint List. In most articles, I have found some redundant code which can be reused and utilized in such a way that any new developer or learner can learn from the code.

So, based on that, I have started working on creating SPRest Utility which will do lots of work internally to increase development speed with much less coding. As I am still working and it is not fully optimized, there is still redundant code and methods which I have to delete.
SPRest.js
  1. var SPRest = /** @class */ (function () {
  2. function SPRest(rootWeb) {
  3. var _this = this;
  4. this.Utils = (function () {
  5. /**
  6. * Reference or motivation link : https://github.com/omkarkhair/sp-jello/blob/master/lib/jello.js
  7. * https://github.com/abhishekseth054/SharePoint-Rest
  8. * https://github.com/gunjandatta/sprest
  9. */
  10. var reqUrl = _this.rootUrl + "/_api/web/lists/getbytitle('AWSResponseList')/items";
  11. //var fetch = require("node-fetch");
  12. // TODO- Need to transform this json to closure function to allow only get operation.
  13. //TODO - Need to add support for Field Meta in utils
  14. var spDefaultMeta = {
  15. List: {
  16. BaseTemplate: 100,
  17. // "Title": "List Created with Fetch UTIL1112",
  18. __metadata: { type: "SP.List" }
  19. },
  20. Document: {
  21. __metadata: { type: "SP.List" },
  22. AllowContentTypes: true,
  23. BaseTemplate: 101,
  24. ContentTypesEnabled: true
  25. // 'Description': 'My doc. lib. description',
  26. // 'Title': 'Test'
  27. },
  28. ListItem: {
  29. __metadata: { type: "SP.Data.AWSResponseListListItem" }
  30. // "Title": "Test"
  31. }
  32. };
  33. console.log(_this.rootUrl);
  34. var isOdataVerbose = true;
  35. var _rootUrl = _this.rootUrl;
  36. //Here "Accept" and "Content-Type" header must require for Sharepoint Onlin REST API
  37. var _payloadOptions = {
  38. method: "GET",
  39. body: undefined,
  40. headers: {
  41. credentials: "include",
  42. Accept: "application/json; odata=verbose",
  43. "Content-Type": "application/json; odata=verbose"
  44. }
  45. };
  46. // TODO- To support for param base odata
  47. //No to fetch Metadata, response only requested data.
  48. // Reference link https://www.microsoft.com/en-us/microsoft-365/blog/2014/08/13/json-light-support-rest-sharepoint-api-released/
  49. //Option 1: verbose “accept: application/json; odata=verbose”
  50. //Option 2: minimalmetadata “accept: application/json; odata=minimalmetadata”
  51. //Option 3: nometadata “accept: application/json; odata=nometadata”
  52. //Option 4: Don’t provide it “accept: application/json” This defaults to minimalmetadata option
  53. if (!isOdataVerbose) {
  54. _payloadOptions.headers.Accept = "application/json; odata=nometadata";
  55. }
  56. // Reference from :https://www.tjvantoll.com/2015/09/13/fetch-and-errors/
  57. //Reference rom : https://sharepoint.stackexchange.com/questions/105380/adding-new-list-item-using-rest
  58. // Get List Item Type metadata
  59. var getItemTypeForListName = function (name) {
  60. return ("SP.Data." +
  61. name.charAt(0).toUpperCase() +
  62. name
  63. .split(" ")
  64. .join("")
  65. .slice(1) +
  66. "ListItem");
  67. };
  68. var Get = function (url) {
  69. var _localPayload = _payloadOptions;
  70. _localPayload.method = "GET";
  71. //Internally if body is set for GET request then need to remove it by setting undefined
  72. // otherwise it return with error : Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body
  73. _localPayload.body = undefined;
  74. delete _localPayload.headers["IF-MATCH"];
  75. delete _localPayload.headers["X-HTTP-Method"];
  76. console.log(_localPayload);
  77. return fetch(url, _localPayload).then(function (r) { return r.json(); });
  78. };
  79. var getRequestDigest = function (url) {
  80. if (url === void 0) { url = ""; }
  81. if (url) {
  82. url = _this.rootUrl;
  83. }
  84. url += "/_api/contextinfo";
  85. var _localPayload = _payloadOptions;
  86. _localPayload.method = "POST";
  87. return fetch(url, _payloadOptions).then(function (r) { return r.json(); });
  88. };
  89. var postWithRequestDigestExtension = function (url, _a) {
  90. var _b = _a.headers, headers = _b === void 0 ? {} : _b, payload = _a.payload;
  91. return getRequestDigest().then(function (token) {
  92. // payload.requestDigest = token.d.GetContextWebInformation.FormDigestValue;
  93. headers["X-RequestDigest"] =
  94. token.d.GetContextWebInformation.FormDigestValue;
  95. return PostExtension(url, { headers: headers, payload: payload });
  96. });
  97. };
  98. var postWithRequestDigest = function (url, payload) {
  99. return getRequestDigest().then(function (token) {
  100. payload.requestDigest =
  101. token.d.GetContextWebInformation.FormDigestValue;
  102. return Post(url, payload);
  103. });
  104. };
  105. //Need to refactor below method and need to merge in single method postWithRequestDigestExtension
  106. //Based on Action Type in headers using switch case add or remove extra headers
  107. // Try to add header name same as standard name so it can be replaced with for loop e.g. _extraHeaders
  108. var updateWithRequestDigest = function (url, payload) {
  109. return getRequestDigest(payload.rootUrl + "/_api/contextinfo").then(function (token) {
  110. payload.requestDigest =
  111. token.d.GetContextWebInformation.FormDigestValue;
  112. payload._extraHeaders = {
  113. "IF-MATCH": "*",
  114. "X-HTTP-Method": "MERGE"
  115. };
  116. //For Update operation or Merge Operation no response will return only status will return for http request
  117. payload.isNoJsonResponse = true;
  118. return Post(url, payload);
  119. });
  120. };
  121. var deleteWithRequestDigest = function (url, payload) {
  122. return getRequestDigest(payload.rootUrl + "/_api/contextinfo").then(function (token) {
  123. payload.requestDigest =
  124. token.d.GetContextWebInformation.FormDigestValue;
  125. payload._extraHeaders = {
  126. "IF-MATCH": "*",
  127. "X-HTTP-Method": "DELETE"
  128. };
  129. //For Update operation or Merge Operation no response will return only status will return for http request
  130. payload.isNoJsonResponse = true;
  131. return Post(url, payload);
  132. });
  133. };
  134. var Post = function (url, payload) {
  135. var _localPayload = _payloadOptions;
  136. // TODO For Safety this method can be wrapped with request Digest so always get token.
  137. // But need to ensure it request only when request digest is expired.
  138. _localPayload.method = "POST";
  139. _localPayload.body = payload.data;
  140. var _metaInfo = payload.metaInfo;
  141. //Pre validation Check Before update body or meta detail
  142. if (_metaInfo && spDefaultMeta[_metaInfo.type]) {
  143. //Update Title and Description while creating new List/Column/Fields
  144. var type = _metaInfo.type, title = _metaInfo.title, listName = _metaInfo.listName;
  145. var _body = spDefaultMeta[type];
  146. if (title) {
  147. //Update title if it is present in metaInfo
  148. _body.Title = title;
  149. }
  150. if (type === "ListItem") {
  151. //TODO Extra Efforts
  152. _body.__metadata.type = getItemTypeForListName(listName);
  153. }
  154. //If Extra fields are present then store to payload
  155. //Before Stringify ,store extra fields/columns in body
  156. if (payload.extraFields) {
  157. for (var field in payload.extraFields) {
  158. //Add all extra columns in body
  159. // TODO- Need to ensure that column value is stringify
  160. _body[field] = payload.extraFields[field];
  161. }
  162. // Merge two object
  163. // _localPayload.body = Object.assign({}, _localPayload.body, payload.extraFields)
  164. }
  165. //Pass body data as stringyfy;
  166. _localPayload.body = JSON.stringify(_body);
  167. _localPayload.body.Title = title;
  168. }
  169. //If Extra header is present in payload for update or other operation, Append to existing header
  170. if (payload._extraHeaders) {
  171. for (var _header in payload._extraHeaders) {
  172. _localPayload.headers[_header] = payload._extraHeaders[_header];
  173. }
  174. }
  175. else {
  176. //IF Not present that means it is POST Request, reset Extraheader for this request
  177. _localPayload.headers["IF-MATCH"] = undefined;
  178. _localPayload.headers["X-HTTP-Method"] = undefined;
  179. }
  180. _localPayload.headers["X-RequestDigest"] = payload.requestDigest;
  181. console.log(_localPayload);
  182. //TODO- Naming convention can be updated.
  183. if (payload.isNoJsonResponse) {
  184. return fetch(url, _localPayload).then(function (r) { return r; });
  185. }
  186. else {
  187. return fetch(url, _localPayload).then(function (r) { return r.json(); });
  188. }
  189. };
  190. var PostExtension = function (url, _a) {
  191. var headers = _a.headers, payload = _a.payload;
  192. var _localPayload = {};
  193. _localPayload = _payloadOptions;
  194. // TODO For Safety this method can be wrapped with request Digest so always get token.
  195. // But need to ensure it request only when request digest is expired.
  196. _localPayload.method = "POST";
  197. //If Extra header is present in payload for update or other operation, Append to existing header
  198. if (headers) {
  199. for (var _header in headers) {
  200. _localPayload.headers[_header] = headers[_header];
  201. }
  202. }
  203. //Below code not required to reset functionality
  204. // else {
  205. // //IF Not present that means it is POST Request, reset Extraheader for this request
  206. // __copyPayloadOptions.headers["IF-MATCH"] = undefined;
  207. // __copyPayloadOptions.headers["X-HTTP-Method"] = undefined;
  208. // }
  209. //TODO -Assume payload is in object so applied stringyfy other wise need check before apply
  210. _localPayload.body = JSON.stringify(payload.data);
  211. // console.log(_payloadOptions);
  212. //TODO- Naming convention can be updated.
  213. // if (payload.isNoJsonResponse) {
  214. //Instead of storing extra info in payload use headers
  215. if (payload.isNoJsonResponse) {
  216. return fetch(url, _localPayload).then(function (r) { return r; });
  217. }
  218. else {
  219. return fetch(url, _localPayload).then(function (r) { return r.json(); });
  220. }
  221. };
  222. /**
  223. * Generate GUID in javascript
  224. * Reference from : https://github.com/andrewconnell/sp-o365-rest/blob/master/SpRestBatchSample/Scripts/App.js
  225. */
  226. function generateUUID() {
  227. var d = new Date().getTime();
  228. var uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
  229. var r = (d + Math.random() * 16) % 16 | 0;
  230. d = Math.floor(d / 16);
  231. return (c == "x" ? r : (r & 0x7) | 0x8).toString(16);
  232. });
  233. return uuid;
  234. }
  235. /**
  236. * Prepare batch request in Sharepoint Online
  237. * Reference from : https://github.com/andrewconnell/sp-o365-rest/blob/master/SpRestBatchSample/Scripts/App.js
  238. */
  239. var GenerateBatchRequest = function (_a) {
  240. var _b = _a.listName, listName = _b === void 0 ? "" : _b, data = _a.data, _c = _a.DigestValue, DigestValue = _c === void 0 ? "" : _c, _d = _a.action, action = _d === void 0 ? "ADD" : _d, _e = _a.itemIds, itemIds = _e === void 0 ? [] : _e;
  241. // generate a batch boundary
  242. var batchGuid = generateUUID();
  243. // creating the body
  244. var batchContents = new Array();
  245. var changeSetId = generateUUID();
  246. // get current host
  247. // var temp = document.createElement('a');
  248. // temp.href = this.rootUrl;
  249. // var host = temp.hostname;
  250. // iterate through each employee
  251. ////TODO NEED TO SEPARATE BATCH OPERATION CREATION FOR ADD,UPDATE and DELETE OPERATION
  252. // MIXED INSERT and UPDATE Operation
  253. // MIXED ISERT ,UPDATE and DELETE Operation
  254. for (var _index = 0; _index < data.length; _index++) {
  255. //TODO for payload or "data" need to generate or extract metadata based on type and batch action
  256. var _item = data[_index];
  257. if (action === "UPDATE") {
  258. _item.Title = "##Updated_" + _item.Title;
  259. }
  260. //Generate and prepare request url for each item
  261. switch (action) {
  262. case "ADD":
  263. var endpoint = generateRestRequest({ listName: listName, type: "ListItem" });
  264. break;
  265. case "UPDATE":
  266. var endpoint = generateRestRequest({
  267. listName: listName,
  268. type: "ListItem",
  269. Id: itemIds[_index]
  270. });
  271. _item.Title += _index;
  272. break;
  273. case "DELETE":
  274. var endpoint = generateRestRequest({
  275. listName: listName,
  276. type: "ListItem",
  277. Id: itemIds[_index]
  278. });
  279. break;
  280. }
  281. // create the request endpoint
  282. // create the changeset
  283. batchContents.push("--changeset_" + changeSetId);
  284. batchContents.push("Content-Type: application/http");
  285. batchContents.push("Content-Transfer-Encoding: binary");
  286. batchContents.push("");
  287. if (action === "UPDATE") {
  288. batchContents.push("PATCH " + endpoint + " HTTP/1.1");
  289. batchContents.push("If-Match: *");
  290. batchContents.push("Content-Type: application/json;odata=verbose");
  291. batchContents.push("");
  292. batchContents.push(JSON.stringify(_item));
  293. }
  294. else if (action === "ADD") {
  295. batchContents.push("POST " + endpoint + " HTTP/1.1");
  296. batchContents.push("Content-Type: application/json;odata=verbose");
  297. batchContents.push("");
  298. batchContents.push(JSON.stringify(_item));
  299. }
  300. else if (action === "DELETE") {
  301. batchContents.push("DELETE " + endpoint + " HTTP/1.1");
  302. batchContents.push("If-Match: *");
  303. }
  304. //Commented POST request line and added code for UPDATE as well
  305. // batchContents.push("POST " + endpoint + " HTTP/1.1");
  306. // batchContents.push("Content-Type: application/json;odata=verbose");
  307. // batchContents.push("");
  308. // batchContents.push(JSON.stringify(_item));
  309. batchContents.push("");
  310. }
  311. // END changeset to create data
  312. batchContents.push("--changeset_" + changeSetId + "--");
  313. // batch body
  314. var batchBody = batchContents.join("\r\n");
  315. batchContents = [];
  316. // create batch for creating items
  317. batchContents.push("--batch_" + batchGuid);
  318. batchContents.push('Content-Type: multipart/mixed; boundary="changeset_' +
  319. changeSetId +
  320. '"');
  321. batchContents.push("Content-Length: " + batchBody.length);
  322. batchContents.push("Content-Transfer-Encoding: binary");
  323. batchContents.push("");
  324. batchContents.push(batchBody);
  325. batchContents.push("");
  326. // create request in batch to get all items after all are created
  327. ////Commented below endpoint as we are utilizing same endpoint without orderby
  328. // endpoint = _this.rootUrl +
  329. // "/_api/web/lists/getbytitle('" + listName + "')" +
  330. // '/items?$orderby=Title';
  331. // batchContents.push('--batch_' + batchGuid);
  332. // batchContents.push('Content-Type: application/http');
  333. // batchContents.push('Content-Transfer-Encoding: binary');
  334. // batchContents.push('');
  335. //COmmented below lines of code as I don't need to request GET after insertion
  336. // batchContents.push('GET ' + endpoint + ' HTTP/1.1');
  337. // batchContents.push('Accept: application/json;odata=verbose');
  338. // batchContents.push('');
  339. batchContents.push("--batch_" + batchGuid + "--");
  340. batchBody = batchContents.join("\r\n");
  341. // create the request endpoint
  342. var batchEndpoint = _this.rootUrl + "/_api/$batch";
  343. // var batchRequestHeader = {
  344. // 'X-RequestDigest': DigestValue,
  345. // 'Content-Type': 'multipart/mixed; boundary="batch_' + batchGuid + '"'
  346. // };
  347. return getRequestDigest().then(function (r) {
  348. //SPECIAL CASE IS BATCH REQUEST MODE
  349. var batchRequestHeader = {
  350. "X-RequestDigest": r.d.GetContextWebInformation.FormDigestValue,
  351. "Content-Type": 'multipart/mixed; boundary="batch_' + batchGuid + '"'
  352. };
  353. return fetch(batchEndpoint, {
  354. method: "POST",
  355. headers: batchRequestHeader,
  356. body: batchBody
  357. }).then(function (r) { return r.text(); });
  358. });
  359. //return PostExtension(batchEndpoint,{headers:batchRequestHeader,payload:batchBody})
  360. //fetch(batchEndpoint,{method:'POST',headers:batchRequestHeader,body:batchBody}).then(r=>r.text()).then(r=>console.log(r))
  361. //OLD CODE Commented
  362. // create request
  363. // jQuery.ajax({
  364. // url: endpoint,
  365. // type: 'POST',
  366. // headers: batchRequestHeader,
  367. // data: batchBody,
  368. // success: function(response) {
  369. // var responseInLines = response.split('\n');
  370. // // $("#tHead").append("<tr><th>First Name</th><th>Last Name</th><th>Technology</th></tr>");
  371. // for (var currentLine = 0; currentLine < responseInLines.length; currentLine++) {
  372. // try {
  373. // var tryParseJson = JSON.parse(responseInLines[currentLine]);
  374. // console.log(tryParseJson);
  375. // } catch (e) {
  376. // console.log("Error")
  377. // }
  378. // }
  379. // },
  380. // fail: function(error) {
  381. // }
  382. // });
  383. };
  384. var generateRestRequest = function (_a) {
  385. var _b = _a.listName, listName = _b === void 0 ? "" : _b, _c = _a.Id, Id = _c === void 0 ? "" : _c, type = _a.type, _d = _a.oDataOption, oDataOption = _d === void 0 ? "" : _d, _e = _a.url, url = _e === void 0 ? "" : _e;
  386. if (url) {
  387. return url;
  388. }
  389. var prepareRequest = _this.rootUrl + "/_api/web/lists";
  390. switch (type) {
  391. case "ListItem":
  392. prepareRequest += "/getbytitle('" + listName + "')/items";
  393. if (Id) {
  394. prepareRequest += "(" + Id + ")";
  395. }
  396. if (oDataOption) {
  397. prepareRequest += "?" + oDataOption;
  398. }
  399. break;
  400. case "List":
  401. if (listName) {
  402. prepareRequest += "/getbytitle('" + listName + "')";
  403. }
  404. if (oDataOption) {
  405. prepareRequest += "?" + oDataOption;
  406. }
  407. //TODO
  408. break;
  409. case "MSGraph":
  410. //Special Case
  412. break;
  413. }
  414. //OLDER Code for ListItem
  415. // prepareRequest = `/getbytitle('${listName}')/items`;
  416. // if (Id) {
  417. // prepareRequest += `(${Id})`;
  418. // }
  419. return prepareRequest;
  420. };
  421. //Provide support for odata query so, for specific provided expression append it with base requet
  422. var ListItem = {
  423. Add: function (_a) { },
  424. Update: function (_a) { },
  425. Delete: function (_a) { },
  426. GetItemById: function (_a) { },
  427. GetAllItem: function (_a) { }
  428. };
  429. var List = {
  430. Add: function (_a) { },
  431. Update: function (_a) {
  432. console.log("Implementation is pending");
  433. },
  434. Delete: function (_a) {
  435. console.log("Implementation is pending");
  436. },
  437. GetByTitle: function (_a) {
  438. console.log("Implementation is pending");
  439. },
  440. GetAll: function (_a) { }
  441. };
  442. List.GetAll = function (_a) {
  443. var _b = _a.oDataOption, oDataOption = _b === void 0 ? "" : _b, _c = _a.url, url = _c === void 0 ? "" : _c;
  444. return Get(generateRestRequest({ listName: "", type: "List", oDataOption: oDataOption, url: url }));
  445. };
  446. List.GetByTitle = function (_a) {
  447. var listName = _a.listName, oDataOption = _a.oDataOption, url = _a.url;
  448. return Get(generateRestRequest({ listName: listName, type: "List", oDataOption: oDataOption, url: url }));
  449. };
  450. List.Add = function (_a) {
  451. var listName = _a.listName, data = _a.data;
  452. var _reqUrl = generateRestRequest({ listName: listName, type: "List" });
  453. var _prePayload = preparePayloadData({
  454. action: "ADD",
  455. type: "List",
  456. listName: listName,
  457. data: data
  458. });
  459. return postWithRequestDigestExtension(_reqUrl, _prePayload);
  460. };
  461. ListItem.GetAllItem = function (_a) {
  462. var listName = _a.listName, _b = _a.oDataOption, oDataOption = _b === void 0 ? "" : _b, _c = _a.url, url = _c === void 0 ? "" : _c;
  463. return Get(generateRestRequest({ listName: listName, type: "ListItem", oDataOption: oDataOption, url: url }));
  464. };
  465. ListItem.GetItemById = function (_a) {
  466. var listName = _a.listName, Id = _a.Id, _b = _a.oDataOption, oDataOption = _b === void 0 ? "" : _b, _c = _a.url, url = _c === void 0 ? "" : _c;
  467. return Get(generateRestRequest({ listName: listName, Id: Id, type: "ListItem", oDataOption: oDataOption, url: url }));
  468. };
  469. // Add/Update/Delete require same types of metaData as well as payload only difference is Headers
  470. ListItem.Add = function (_a) {
  471. var listName = _a.listName, data = _a.data;
  472. var _reqUrl = generateRestRequest({ listName: listName, type: "ListItem" });
  473. var _prePayload = preparePayloadData({
  474. action: "ADD",
  475. type: "ListItem",
  476. listName: listName,
  477. data: data
  478. });
  479. return postWithRequestDigestExtension(_reqUrl, _prePayload);
  480. };
  481. ListItem.Update = function (_a) {
  482. var listName = _a.listName, Id = _a.Id, data = _a.data;
  483. var _reqUrl = generateRestRequest({ listName: listName, Id: Id, type: "ListItem" });
  484. var _prePayload = preparePayloadData({
  485. action: "UPDATE",
  486. type: "ListItem",
  487. listName: listName,
  488. data: data
  489. });
  490. return postWithRequestDigestExtension(_reqUrl, _prePayload);
  491. };
  492. ListItem.Delete = function (_a) {
  493. var listName = _a.listName, Id = _a.Id, data = _a.data;
  494. var _reqUrl = generateRestRequest({ listName: listName, Id: Id, type: "ListItem" });
  495. var _prePayload = preparePayloadData({
  496. action: "DELETE",
  497. type: "ListItem",
  498. listName: listName,
  499. data: data
  500. });
  501. return postWithRequestDigestExtension(_reqUrl, _prePayload);
  502. };
  503. var preparePayloadData = function (_a) {
  504. var listName = _a.listName, data = _a.data, action = _a.action, type = _a.type;
  505. var payload = {
  506. data: { __metadata: spDefaultMeta[type] }
  507. };
  508. //payload.data = {};
  509. // let _metaInfo: any = spDefaultMeta["ListItem"];
  510. // _metaInfo.__metadata.type = getItemTypeForListName(listName);
  511. // payload.data.__metadata=spDefaultMeta["ListItem"];
  512. switch (type) {
  513. case "ListItem":
  514. //Update ListItem Content type
  515. payload.data.__metadata.type = getItemTypeForListName(listName);
  516. break;
  517. }
  518. //Need to check is data is object then iterate otherwise not
  519. if (data) {
  520. for (var _key in data) {
  521. payload.data[_key] = data[_key];
  522. }
  523. }
  524. //TODO Verify about extra header
  525. // //Pass body data as stringyfy;
  526. // // _payloadOptions.body = JSON.stringify(_body);
  527. // // _payloadOptions.body.Title = title;
  528. // return postWithRequestDigest(_reqUrl);
  529. var _headers = {};
  530. switch (action) {
  531. case "ADD":
  532. _headers = {
  533. "IF-MATCH": undefined,
  534. "X-HTTP-Method": undefined
  535. };
  536. break;
  537. case "UPDATE":
  538. _headers = {
  539. "IF-MATCH": "*",
  540. "X-HTTP-Method": "MERGE"
  541. };
  542. //For Update operation or Merge Operation no response will return only status will return for http request
  543. payload.isNoJsonResponse = true;
  544. break;
  545. case "DELETE":
  546. _headers = {
  547. "IF-MATCH": "*",
  548. "X-HTTP-Method": "DELETE"
  549. };
  550. //For Update operation or Merge Operation no response will return only status will return for http request
  551. payload.isNoJsonResponse = true;
  552. break;
  553. }
  554. return { headers: _headers, payload: payload };
  555. };
  556. return {
  557. ListItem: ListItem,
  558. Get: Get,
  559. getRequestDigest: getRequestDigest,
  560. Post: postWithRequestDigest,
  561. Update: updateWithRequestDigest,
  562. Delete: deleteWithRequestDigest,
  563. BatchInsert: GenerateBatchRequest
  564. };
  565. })();
  566. this.rootUrl = rootWeb;
  567. }
  568. return SPRest;
  569. }());
You might be wondering how to use SPRest for CRUD Operation in SharePoint.
First of all, save the above code in a file and then, add the reference to it on the page wherever you want to use it.
If you want to use this SPRest utility in your SPFx web part or add it using TypeScript, then you can find compatible SpRest.ts at my repo.
Once you have added references, then create the instance of SPRest with one parameter which accepts Sharepoint rootUrl used internally or generating request URL for REST API.
  1. var spRest=new SPRest("https://brgrp.sharepoint.com")
For demonstration purposes, I am using "PlaceHolderList" that is having the following columns.
  • Title -Single line of Text
  • UserId - Number
  • Completed -Single line of Text

Get All List Items from Sharepoint List

By default, SharePoint List returns the top 100 records if you have more than 100 records in the list.
  1. // Get All Item from List item
  2. spRest.Utils.ListItem.GetAllItem({listName:"PlaceHolderList"}).then(function(r){
  3. console.log(r);
  4. // Response received. TODO bind record to table or somewhere else.
  5. });

Get All List Items from Sharepoint List using URL or with oDataOption

Get Selected columns using $select and use $top in oDataOptions from the list or you can use full URL which will directly pass to get data based on the option in URL.
Here you can request list item with your selected column and filter in URL, you can use all supported odata option in URL to get full
response,
Or
you can just pass list name other oDataOption as shown below without adding a question mark at starting to get same data and if you required next paginated response you can just pass "__next" in url.
  1. //Get all selected column Data using full URL
  2. util.Utils.ListItem
  3. .GetAllItem({
  4. url:"https://brgrp.sharepoint.com/_api/web/lists/getbytitle('PlaceHolderList')/items?$select=Id,Title&$top=200"
  5. }).then(function(r){console.log(r);
  6. //Response Received
  7. });
  9. //Get all selected column data with listName and oDataOption
  11. util.Utils.ListItem.GetAllItem(
  12. {"listName":"PlaceHolderList"
  13. ,oDataOption:"$select=Id,Title&$top=200"
  14. }).then(function(r){console.log(r);
  15. //Response Received
  16. });

Note
Here if you have passed both listname and url then query will be executed based on only url, listName and oDataOption value not considered.

Get List Item from SharePoint List by Id
  1. // Get List Item By Id
  2. spRest.Utils.ListItem.GetItemById({listName:"PlaceHolderList",Id:201}).then(function(r){
  3. console.log(r);
  4. // Response received.
  5. });

Add New List Item to SharePoint List

  1. // Add ListItem to Sharepoint List
  2. spRest.Utils.ListItem.Add({listName:"PlaceHolderList",data:{Title:"New Item Created For Demo",UserId:1,Completed:"true"}}).then(function(r){
  3. console.log(r);
  4. // Added New List item response received with newly created item
  5. });

Update New List Item By Id in SharePoint List

  1. // Update List item based on ID with new data in SharePoint List
  2. spRest.Utils.ListItem.Update({listName:"PlaceHolderList",Id:201,data:{Title:"Updated List Item",UserId:1,Completed:"true"}}).then(function(r){
  3. // List Item Updated and received response with status 204
  4. console.log(r);
  5. });

Delete New List Item By Id in SharePoint List

  1. // Delete List item based on ID
  2. spRest.Utils.ListItem.Delete({listName:"PlaceHolderList",Id:201}).then(function(r){
  3. // List Item Deleted and received response with status 200
  4. console.log(r);
  5. });
As per the above code example for CRUD functionality, it looks like a cleaner and easier way to perform the CRUD opeation on SharePoint List. It has a lot of redundant code.
  • Generate Request Url Based on Root Site and List Name and Id
  • Header accept and Content type
  • RequestDigest Headers
  • Combined Delete/Update/Add Code with reusable functions to prepare payload data for the request
  • Adding and applying metadata for ListItem based on ListName
I removed and combined with reusable functions so it can be used for extending List and Document Library in the future.
I hope you find this article and utilities helpful. Let me know your comments and any suggestion to extend SPRest util.
All implementation and source code for SPRest can be found on GitHub.
Change History:
18-Apr-2018: Updated SPRest.js to support oDataOption and direct URL as a parameter in util function to get the paginated item.

Conclusion

In this article, we have learned about an easy and cleaner way to do CRUD Operations with SharePoint List Items using SPRest.