Previously, we discussed about part 1 of the series.

Here are the steps for part 2 of the series,
Step 1: User Interface Design to perform CRUD operation with Office 365 SharePoint List.


In order to continue further I will add new files into project solution as in the following screenshot,


Source Code: To generate user interface we need html controls on page. Please refer the following code in order to create above user interface.

  1. <%@ Page Language="C#" MasterPageFile="~masterurl/default.master" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
  3. <%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
  4. <%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
  5. <%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
  7. <asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
  8. <SharePoint:ScriptLink Name="sp.js" runat="server" OnDemand="true" LoadAfterUI="true" Localizable="false" />
  9. <script src="../Scripts/jquery-1.8.2.js" type="text/javascript"></script>
  10. <script src="../Scripts/AdvanceLibrary.js" type="text/javascript"></script>
  12. <link href="../Content/App.css" rel="stylesheet" />
  13. </asp:Content>
  15. <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
  16. <WebPartPages:WebPartZone runat="server" FrameType="TitleBarOnly" ID="full" Title="loc:full" />
  18. <div>
  19. <div class="bodyLeft">
  20. <div>
  21. List Name :
  22. <input type="text" id="txtListName" />
  23. </div>
  24. <hr />
  25. <div>
  26. <h2><b>List Creation</b></h2>
  27. <a href="#" onclick="Wingtip.JSOMHostWebCollections.HWCreateList()">Create List</a>
  28. </div>
  29. <hr />
  30. <div>
  31. <h2><b>Add List Item</b></h2>
  32. <%-- <br />
  34. List Name :
  35. <input type="text" id="txtExistingListName" />--%>
  37. <table>
  38. <tr>
  39. <th>Field Name</th>
  40. <th>Field Value</th>
  41. </tr>
  42. <tr>
  43. <td>
  44. <input type="text" id="Input1" />
  45. </td>
  46. <td>
  47. <input type="text" id="Val1" />
  48. </td>
  49. </tr>
  50. <tr>
  51. <td>
  52. <input type="text" id="Input2" />
  53. </td>
  54. <td>
  55. <input type="text" id="Val2" />
  56. </td>
  57. </tr>
  58. <tr>
  59. <td>
  60. <input type="text" id="Input3" />
  61. </td>
  62. <td>
  63. <input type="text" id="Val3" />
  64. </td>
  65. </tr>
  66. <tr>
  67. <td>
  68. <input type="text" id="Input4" />
  69. </td>
  70. <td>
  71. <input type="text" id="Val4" />
  72. </td>
  73. </tr>
  74. </table>
  75. <br />
  76. <a href="#" onclick="Wingtip.JSOMHostWebCollections.HWCreateListItem()">Add List Data</a>
  77. </div>
  78. <hr />
  79. <div>
  80. <h2><b>Update List Item</b></h2>
  81. <%-- <br />
  83. List Name :
  84. <input type="text" id="txUpdationList" />--%>
  86. <table>
  87. <tr>
  88. <th>Field Name</th>
  89. <th>Field Value</th>
  90. </tr>
  91. <tr>
  92. <td>
  93. <input type="text" id="UpdateField1" />
  94. </td>
  95. <td>
  96. <input type="text" id="UpdateVal1" />
  97. </td>
  98. <td>Where ID =
  99. <input type="text" id="txtUpdateID" />
  100. </td>
  101. </tr>
  102. </table>
  103. <a href="#" onclick="Wingtip.JSOMHostWebCollections.HWUpdateListItem()">Update List Data</a>
  104. </div>
  105. <hr />
  106. <div>
  107. <h2><b>Delete List Item</b></h2>
  108. <%-- <br />
  110. List Name :
  111. <input type="text" id="txtListDeletion" />--%>
  112. Where ID =
  113. <input type="text" id="txtDeletionID" />
  115. <br />
  116. <a href="#" onclick="Wingtip.JSOMHostWebCollections.HWDeleteListItem()">Delete List Data</a>
  117. </div>
  119. </div>
  121. <div class="bodyRight">
  122. <div id="message"></div>
  123. <div id="ListData"></div>
  124. </div>
  125. </div>
  126. </asp:Content>

Step 2: Read List Data using custom JavaScript Library.

  1. var clientContext;
  2. var factory;
  3. var appContextSite;
  4. var web;
  6. var collList;
  7. var itemCreateInfo;
  8. var param1, param2, param3;
  9. var oList, targetList, listFields, oListItem, oField, itemId;
  11. var ExsitingListNameVal;
  12. var targetList;
  14. window.Wingtip = window.Wingtip || {}
  16. Wingtip.JSOMHostWebCollections = function()
  17. {
  19. LoadlayoutsJS = function()
  20. {
  22. //debugger
  23. hostweburl = decodeURIComponent(Wingtip.JSOMHostWebCollections.QSParameter("SPHostUrl"));
  24. appweburl = decodeURIComponent(Wingtip.JSOMHostWebCollections.QSParameter("SPAppWebUrl"));
  26. var Sessionhostweburl = sessionStorage.getItem("hostweburl");
  27. var Sessionappweburl = sessionStorage.getItem("appweburl");
  29. if (Sessionhostweburl == null || Sessionappweburl == null)
  30. {
  31. sessionStorage.setItem("hostweburl", hostweburl);
  32. sessionStorage.setItem("appweburl", appweburl);
  33. }
  35. if (hostweburl == null || appweburl == null || hostweburl == 'undefined' || appweburl == 'undefined')
  36. {
  37. hostweburl = sessionStorage.getItem("hostweburl");
  38. appweburl = sessionStorage.getItem("appweburl");
  39. }
  41. var scriptbase = hostweburl + "/_layouts/15/";
  43. $.getScript(scriptbase + "SP.Runtime.js",
  44. function() {
  45. $.getScript(scriptbase + "SP.js",
  46. function() {
  47. $.getScript(scriptbase + "SP.RequestExecutor.js", Wingtip.JSOMHostWebCollections.HWLoadClientContext);
  48. }
  49. );
  50. });
  51. }
  53. getQueryStringParameter = function(paramToRetrieve)
  54. {
  55. //debugger
  56. try {
  58. var params =
  59. document.URL.split("?")[1].split("&");
  60. var strParams = "";
  61. for (var i = 0; i < params.length; i = i + 1)
  62. {
  63. var singleParam = params[i].split("=");
  64. if (singleParam[0] == paramToRetrieve)
  65. return singleParam[1];
  66. }
  67. } catch (ex) {
  69. }
  71. }
  73. LoadClientContext = function()
  74. {
  76. //debugger
  77. clientContext = new SP.ClientContext(appweburl);
  78. factory = new SP.ProxyWebRequestExecutorFactory(appweburl);
  79. clientContext.set_webRequestExecutorFactory(factory);
  80. appContextSite = new SP.AppContextSite(clientContext, hostweburl);
  82. web = appContextSite.get_web();
  83. clientContext.load(web);
  85. Wingtip.JSOMHostWebCollections.HWReadListData();
  86. }
  88. ReadListData = function()
  89. {
  91. debugger
  92. var oList = web.get_lists().getByTitle("Book");
  94. var camlQuery = new SP.CamlQuery();
  95. camlQuery.set_viewXml('<View><RowLimit></RowLimit>10</View>');
  96. var collListItem = oList.getItems(camlQuery);
  98. //clientContext.load(collListItem);
  99. clientContext.load(collListItem, 'Include(ID,BookName,BookAuthor,BookPrice,BookVersion)');
  101. clientContext.executeQueryAsync(
  102. Function.createDelegate(this, onQuerySucceeded),
  103. Function.createDelegate(this, onQueryFailed)
  104. );
  106. function onQuerySucceeded(sender, args)
  107. {
  109. var innerHtml = "<tr><td class='ListTH'>ID</td><td class='ListTH'>Book Name</td><td class='ListTH'>Book Author</td><td class='ListTH'>Book Price</td><td class='ListTH'>Book Version</td></tr>";
  111. debugger
  112. var listItemInfo = '';
  113. var listItemEnumerator = collListItem.getEnumerator();
  115. while (listItemEnumerator.moveNext())
  116. {
  118. var oListItem = listItemEnumerator.get_current();
  120. var ID = oListItem.get_item('ID');
  121. var InputData1 = oListItem.get_item('BookName');
  122. var InputData2 = oListItem.get_item('BookAuthor');
  123. var InputData3 = oListItem.get_item('BookPrice');
  124. var InputData4 = oListItem.get_item('BookVersion');
  126. innerHtml += "<tr class='ListTR'><td>" + ID + "</td><td>" + InputData1 + "</td><td>" + InputData2 + "</td><td>" + InputData3 + "</td><td>" + InputData4 + "</td></tr>";
  127. //listItemInfo += '\nID: ' + oListItem.get_id() + '\nTitle: ' + oListItem.get_item('Title') + '\nBody: ' + oListItem.get_item('Input1');
  128. }
  130. $("#ListData").html(innerHtml);
  131. //alert(listItemInfo.toString());
  132. }
  134. function onQueryFailed(sender, args)
  135. {
  136. alert('Request failed. ' + args.get_message() +
  137. '\n' + args.get_stackTrace());
  138. }
  140. }
  142. //public interface
  143. return
  144. {
  146. HWLoadlayoutsJS: LoadlayoutsJS,
  147. QSParameter: getQueryStringParameter,
  148. HWLoadClientContext: LoadClientContext,
  149. HWCreateList: CreateList,
  150. HWCreateListItem: CreateListItem,
  151. HWUpdateListItem: UpdateListItem,
  152. HWDeleteListItem: DeleteListItem,
  153. HWClearAllTextBox: ClearAllTextBox,
  154. HWReadListData: ReadListData,
  155. HWEmpty: Empty
  156. }
  158. }();
  160. $(document).ready(function()
  161. {
  163. //Load Out Of Box JS file for List Operation
  164. Wingtip.JSOMHostWebCollections.HWLoadlayoutsJS();
  166. });

Output

Step 3: Add List Item using JavaScript Object model as in the following,

  1. CreateListItem = function()
  2. {
  4. debugger
  5. //var ListNameVal = $(txtExistingListName).val();
  6. var ListNameVal = $(txtListName).val();
  8. if (ListNameVal == "")
  9. {
  10. alert("Please Enter List Name");
  11. return;
  12. }
  14. var list = web.get_lists();
  15. var targetList = list.getByTitle(ListNameVal);
  16. var itemCreateInfo = new SP.ListItemCreationInformation();
  17. oListItem = targetList.addItem(itemCreateInfo);
  19. var Input1Val = $(Input1).val();
  20. var Input2Val = $(Input2).val();
  21. var Input3Val = $(Input3).val();
  22. var Input4Val = $(Input4).val();
  24. var Val1Val = $(Val1).val();
  25. var Val2Val = $(Val2).val();
  26. var Val3Val = $(Val3).val();
  27. var Val4Val = $(Val4).val();
  30. if (Input1Val != "" && Val1Val != "")
  31. oListItem.set_item(Input1Val, Val1Val);
  34. if (Input2Val != "" && Val2Val != "")
  35. oListItem.set_item(Input2Val, Val2Val);
  37. if (Input3Val != "" && Val3Val != "")
  38. oListItem.set_item(Input3Val, Val3Val);
  40. if (Input4Val != "" && Val4Val != "")
  41. oListItem.set_item(Input4Val, Val4Val);
  43. oListItem.update();
  44. clientContext.load(oListItem);
  46. clientContext.executeQueryAsync(
  47. Function.createDelegate(this, CreateListItemSucceeded),
  48. Function.createDelegate(this, CreateListItemFailed)
  49. );
  51. function CreateListItemSucceeded()
  52. {
  53. alert('Item Created Successfully : List Item ID -> ' + oListItem.get_id());
  54. }
  56. function CreateListItemFailed(sender, args)
  57. {
  58. alert('Request failed. ' + args.get_message() +
  59. '\n' + args.get_stackTrace());
  60. }
  62. }

Output



Item Insertion confirmation.


New Record added into list now.

Step 4: Update List item with respect to list item ID value. When you refer UI in order to update list item, we need to provide ID value.

  1. UpdateListItem = function(ListName, Input1, Val1)
  2. {
  4. debugger
  6. //var ListNameVal = $(txUpdationList).val();
  7. var ListNameVal = $(txtListName).val();
  9. if (ListNameVal == "")
  10. {
  11. alert("Please Enter List Name");
  12. return;
  13. }
  15. var Input1Val = $(UpdateField1).val();
  16. var Val1Val = $(UpdateVal1).val();
  18. var list = web.get_lists();
  19. oList = list.getByTitle(ListNameVal);
  21. oListItem = oList.getItemById($(txtUpdateID).val());
  22. oListItem.set_item(Input1Val, Val1Val);
  23. oListItem.update();
  25. clientContext.executeQueryAsync(
  26. Function.createDelegate(this, UpdateListItemSucceeded),
  27. Function.createDelegate(this, UpdateListItemFailed)
  28. );
  30. function UpdateListItemSucceeded()
  31. {
  32. alert('Item Updated Successfully!');
  33. }
  35. function UpdateListItemFailed(sender, args)
  36. {
  37. alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
  38. }
  39. }

Output



Item update get confirmation now.

Step 5: Deletion of list item we can use the following code,

  1. DeleteListItem = function(ListName, ItemID)
  2. {
  4. debugger
  6. //var ListNameVal = $(txtListDeletion).val();
  7. var ListNameVal = $(txtListName).val();
  9. if (ListNameVal == "")
  10. {
  11. alert("Please Enter List Name");
  12. return;
  13. }
  15. var Input1Val = $(txtDeletionID).val();
  17. var list = web.get_lists();
  18. oList = list.getByTitle(ListNameVal);
  20. oListItem = oList.getItemById(Input1Val);
  21. oListItem.deleteObject();
  23. clientContext.executeQueryAsync(
  24. Function.createDelegate(this, deleteListItemSucceeded),
  25. Function.createDelegate(this, deleteListItemFailed)
  26. );
  28. function deleteListItemSucceeded()
  29. {
  30. alert('Item Deleted Successfully');
  31. }
  33. function deleteListItemFailed(sender, args)
  34. {
  35. alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
  36. }
  37. }

Output


Final Output

Step 6: Style sheet code in order to make UI more effective.

  1. /* Place custom styles below */
  2. .bodyLeft
  3. {
  4. float: left;
  5. padding: 15 px 15 px 10 px 15 px;
  6. border: 1 px solid black;
  7. }
  9. .bodyRight
  10. {
  11. float: left;
  12. padding: 15 px 5 px 5 px 25 px;
  13. }
  15. table
  16. {
  17. border - collapse: collapse;
  18. width: 100 % ;
  19. }
  21. th, td
  22. {
  23. text - align: left;
  24. padding: 8 px;
  25. }
  27. .ListTR
  28. {
  29. background - color: #f2f2f2
  30. }
  32. .ListTH
  33. {
  34. background - color: #4CAF50;
  35. color: white;
  36. }

Step 7: JavaScript complete source code.
  1. var clientContext;
  2. var factory;
  3. var appContextSite;
  4. var web;
  6. var collList;
  7. var itemCreateInfo;
  8. var param1, param2, param3;
  9. var oList, targetList, listFields, oListItem, oField, itemId;
  11. var ExsitingListNameVal;
  12. var targetList;
  14. window.Wingtip = window.Wingtip || {}
  16. Wingtip.JSOMHostWebCollections = function()
  17. {
  19. LoadlayoutsJS = function()
  20. {
  22. //debugger
  23. hostweburl = decodeURIComponent(Wingtip.JSOMHostWebCollections.QSParameter("SPHostUrl"));
  24. appweburl = decodeURIComponent(Wingtip.JSOMHostWebCollections.QSParameter("SPAppWebUrl"));
  26. var Sessionhostweburl = sessionStorage.getItem("hostweburl");
  27. var Sessionappweburl = sessionStorage.getItem("appweburl");
  29. if (Sessionhostweburl == null || Sessionappweburl == null)
  30. {
  31. sessionStorage.setItem("hostweburl", hostweburl);
  32. sessionStorage.setItem("appweburl", appweburl);
  33. }
  35. if (hostweburl == null || appweburl == null || hostweburl == 'undefined' || appweburl == 'undefined') {
  36. hostweburl = sessionStorage.getItem("hostweburl");
  37. appweburl = sessionStorage.getItem("appweburl");
  38. }
  40. var scriptbase = hostweburl + "/_layouts/15/";
  42. $.getScript(scriptbase + "SP.Runtime.js",
  43. function() {
  44. $.getScript(scriptbase + "SP.js",
  45. function() {
  46. $.getScript(scriptbase + "SP.RequestExecutor.js", Wingtip.JSOMHostWebCollections.HWLoadClientContext);
  47. }
  48. );
  49. });
  50. }
  52. getQueryStringParameter = function(paramToRetrieve)
  53. {
  54. //debugger
  55. try {
  57. var params =
  58. document.URL.split("?")[1].split("&");
  59. var strParams = "";
  60. for (var i = 0; i < params.length; i = i + 1)
  61. {
  62. var singleParam = params[i].split("=");
  63. if (singleParam[0] == paramToRetrieve)
  64. return singleParam[1];
  65. }
  66. } catch (ex) {
  68. }
  70. }
  72. LoadClientContext = function()
  73. {
  75. //debugger
  76. clientContext = new SP.ClientContext(appweburl);
  77. factory = new SP.ProxyWebRequestExecutorFactory(appweburl);
  78. clientContext.set_webRequestExecutorFactory(factory);
  79. appContextSite = new SP.AppContextSite(clientContext, hostweburl);
  81. web = appContextSite.get_web();
  82. clientContext.load(web);
  84. Wingtip.JSOMHostWebCollections.HWReadListData();
  85. }
  87. ReadListData = function()
  88. {
  90. debugger
  91. var oList = web.get_lists().getByTitle("Book");
  93. var camlQuery = new SP.CamlQuery();
  94. camlQuery.set_viewXml('<View><RowLimit></RowLimit>10</View>');
  95. var collListItem = oList.getItems(camlQuery);
  97. //clientContext.load(collListItem);
  98. clientContext.load(collListItem, 'Include(ID,BookName,BookAuthor,BookPrice,BookVersion)');
  100. clientContext.executeQueryAsync(
  101. Function.createDelegate(this, onQuerySucceeded),
  102. Function.createDelegate(this, onQueryFailed)
  103. );
  105. function onQuerySucceeded(sender, args)
  106. {
  108. var innerHtml = "<tr><td class='ListTH'>ID</td><td class='ListTH'>Book Name</td><td class='ListTH'>Book Author</td><td class='ListTH'>Book Price</td><td class='ListTH'>Book Version</td></tr>";
  110. debugger
  111. var listItemInfo = '';
  112. var listItemEnumerator = collListItem.getEnumerator();
  114. while (listItemEnumerator.moveNext())
  115. {
  117. var oListItem = listItemEnumerator.get_current();
  119. var ID = oListItem.get_item('ID');
  120. var InputData1 = oListItem.get_item('BookName');
  121. var InputData2 = oListItem.get_item('BookAuthor');
  122. var InputData3 = oListItem.get_item('BookPrice');
  123. var InputData4 = oListItem.get_item('BookVersion');
  125. innerHtml += "<tr class='ListTR'><td>" + ID + "</td><td>" + InputData1 + "</td><td>" + InputData2 + "</td><td>" + InputData3 + "</td><td>" + InputData4 + "</td></tr>";
  126. //listItemInfo += '\nID: ' + oListItem.get_id() + '\nTitle: ' + oListItem.get_item('Title') + '\nBody: ' + oListItem.get_item('Input1');
  127. }
  129. $("#ListData").html(innerHtml);
  130. //alert(listItemInfo.toString());
  131. }
  133. function onQueryFailed(sender, args)
  134. {
  135. alert('Request failed. ' + args.get_message() +
  136. '\n' + args.get_stackTrace());
  137. }
  139. }
  141. CreateList = function()
  142. {
  144. //debugger
  145. var listCreationInfo = new SP.ListCreationInformation();
  147. var ListNameVal = $(txtListName).val();
  148. //var ListNameVal = ListName;
  149. listCreationInfo.set_title(ListNameVal);
  150. listCreationInfo.set_templateType(SP.ListTemplateType.announcements);
  152. oList = web.get_lists().add(listCreationInfo);
  153. clientContext.load(oList);
  155. oList.set_description(ListNameVal + 'created via JSOM Model ...');
  156. oList.update();
  158. clientContext.executeQueryAsync(
  159. Function.createDelegate(this, SPHostWebCreateListSuccessHandler),
  160. Function.createDelegate(this, SPHostWebCreateListErrorHandler)
  161. );
  163. function SPHostWebCreateListSuccessHandler()
  164. {
  165. var result = oList.get_title() + ' List created successfully.';
  166. alert(result);
  167. }
  169. function SPHostWebCreateListErrorHandler(sender, args)
  170. {
  171. alert('Request failed. ' + args.get_message() +
  172. '\n' + args.get_stackTrace());
  173. }
  174. }
  176. CreateListItem = function()
  177. {
  179. debugger
  180. //var ListNameVal = $(txtExistingListName).val();
  181. var ListNameVal = $(txtListName).val();
  183. if (ListNameVal == "") {
  184. alert("Please Enter List Name");
  185. return;
  186. }
  188. var list = web.get_lists();
  189. var targetList = list.getByTitle(ListNameVal);
  190. var itemCreateInfo = new SP.ListItemCreationInformation();
  191. oListItem = targetList.addItem(itemCreateInfo);
  193. var Input1Val = $(Input1).val();
  194. var Input2Val = $(Input2).val();
  195. var Input3Val = $(Input3).val();
  196. var Input4Val = $(Input4).val();
  198. var Val1Val = $(Val1).val();
  199. var Val2Val = $(Val2).val();
  200. var Val3Val = $(Val3).val();
  201. var Val4Val = $(Val4).val();
  204. if (Input1Val != "" && Val1Val != "")
  205. oListItem.set_item(Input1Val, Val1Val);
  208. if (Input2Val != "" && Val2Val != "")
  209. oListItem.set_item(Input2Val, Val2Val);
  211. if (Input3Val != "" && Val3Val != "")
  212. oListItem.set_item(Input3Val, Val3Val);
  214. if (Input4Val != "" && Val4Val != "")
  215. oListItem.set_item(Input4Val, Val4Val);
  217. oListItem.update();
  218. clientContext.load(oListItem);
  220. clientContext.executeQueryAsync(
  221. Function.createDelegate(this, CreateListItemSucceeded),
  222. Function.createDelegate(this, CreateListItemFailed)
  223. );
  225. function CreateListItemSucceeded()
  226. {
  227. alert('Item Created Successfully : List Item ID -> ' + oListItem.get_id());
  228. }
  230. function CreateListItemFailed(sender, args)
  231. {
  232. alert('Request failed. ' + args.get_message() +
  233. '\n' + args.get_stackTrace());
  234. }
  236. }
  238. UpdateListItem = function(ListName, Input1, Val1)
  239. {
  241. debugger
  243. //var ListNameVal = $(txUpdationList).val();
  244. var ListNameVal = $(txtListName).val();
  246. if (ListNameVal == "")
  247. {
  248. alert("Please Enter List Name");
  249. return;
  250. }
  252. var Input1Val = $(UpdateField1).val();
  253. var Val1Val = $(UpdateVal1).val();
  255. var list = web.get_lists();
  256. oList = list.getByTitle(ListNameVal);
  258. oListItem = oList.getItemById($(txtUpdateID).val());
  259. oListItem.set_item(Input1Val, Val1Val);
  260. oListItem.update();
  262. clientContext.executeQueryAsync(
  263. Function.createDelegate(this, UpdateListItemSucceeded),
  264. Function.createDelegate(this, UpdateListItemFailed)
  265. );
  267. function UpdateListItemSucceeded()
  268. {
  269. alert('Item Updated Successfully!');
  270. }
  272. function UpdateListItemFailed(sender, args)
  273. {
  274. alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
  275. }
  276. }
  278. DeleteListItem = function(ListName, ItemID)
  279. {
  281. debugger
  283. //var ListNameVal = $(txtListDeletion).val();
  284. var ListNameVal = $(txtListName).val();
  286. if (ListNameVal == "")
  287. {
  288. alert("Please Enter List Name");
  289. return;
  290. }
  292. var Input1Val = $(txtDeletionID).val();
  294. var list = web.get_lists();
  295. oList = list.getByTitle(ListNameVal);
  297. oListItem = oList.getItemById(Input1Val);
  298. oListItem.deleteObject();
  300. clientContext.executeQueryAsync(
  301. Function.createDelegate(this, deleteListItemSucceeded),
  302. Function.createDelegate(this, deleteListItemFailed)
  303. );
  305. function deleteListItemSucceeded()
  306. {
  307. alert('Item Deleted Successfully');
  308. }
  310. function deleteListItemFailed(sender, args)
  311. {
  312. alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
  313. }
  314. }
  316. ClearAllTextBox = function()
  317. {
  319. $('input[type=text]').each(function()
  320. {
  321. $(this).val('');
  322. })
  323. }
  325. function Empty()
  326. {
  327. console('Hello');
  328. }
  330. //public interface
  331. return {
  333. HWLoadlayoutsJS: LoadlayoutsJS,
  334. QSParameter: getQueryStringParameter,
  335. HWLoadClientContext: LoadClientContext,
  336. HWCreateList: CreateList,
  337. HWCreateListItem: CreateListItem,
  338. HWUpdateListItem: UpdateListItem,
  339. HWDeleteListItem: DeleteListItem,
  340. HWClearAllTextBox: ClearAllTextBox,
  341. HWReadListData: ReadListData,
  342. HWEmpty: Empty
  343. }
  345. }();
  347. $(document).ready(function()
  348. {
  350. //Load Out Of Box JS file for List Operation
  351. Wingtip.JSOMHostWebCollections.HWLoadlayoutsJS();
  353. });