Before reading this article, please look into the previous article to learn how to create a list in site and create a SharePoint hosted app in Visual Studio.

In this article, we will discuss from the third point onward, as we have already discussed the first two points in Part One.

  1. Create a List in Office 365 SharePoint Site
  2. Creation of Project using SharePoint Hosted App
  3. HTML code for User Interface
  4. Write Business logic for Insert, Update, Delete, Get data functionalities under App.js file.
  5. Deploy the Project
  6. Test the application.
HTML Code for User Interface

In default.aspx page, we will do some changes as mentioned below.

Write Business logic for Insert, Update, Delete, Get data functionalities under App.js file.

We are writing some methods for insert, update, delete, and get data and clear data operations.

Finally, the App.js code looks like below.

  1. 'use strict';
  2. var hostWebUrl;
  3. var appWebUrl;
  4. var listName = "Employee";
  5. ExecuteOrDelayUntilScriptLoaded(initializePage, "sp.js");
  7. function initializePage() {
  8. var context = SP.ClientContext.get_current();
  9. var user = context.get_web().get_currentUser();
  11. // This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
  12. $(document).ready(function () {
  16. GetEmployeeDetails();
  18. $("#btnCreate").on('click', function () {
  19. createEmployee();
  20. ClearData();
  23. });
  24. $("#btnUpdate").on('click', function () {
  25. UpdateEmployee();
  26. ClearData();
  29. });
  31. $("#btnClear").on('click', function () {
  33. ClearData();
  35. });
  37. $("#btnGet").on('click', function () {
  38. $('#empName').val("");
  39. $("#empSalary").val("");
  40. $("#tblAddress").val("");
  41. $("#tblEmployees").empty();
  42. GetEmployeeDetailsByID();
  44. });
  46. $("#btnDelete").on('click', function () {
  47. deleteEmployee();
  48. ClearData();
  52. });
  55. });
  60. function deleteEmployee() {
  61. var id = $("#empID").val();
  63. $.ajax
  64. ({
  65. url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items('" + id + "')",
  66. type: "POST",
  67. headers:
  68. {
  69. "Accept": "application/json;odata=verbose",
  70. "Content-Type": "application/json;odata=verbose",
  71. "X-RequestDigest": $("#__REQUESTDIGEST").val(),
  72. "IF-MATCH": "*",
  73. "X-HTTP-Method": "DELETE"
  74. },
  75. success: function (data, status, xhr) {
  76. $("#tblEmployees").empty();
  77. GetEmployeeDetails();
  79. alert("Successfully record deleted");
  80. },
  81. error: function (xhr, status, error) {
  82. alert(JSON.stringify(error));
  83. }
  84. });
  85. }
  88. function ClearData() {
  90. $("#empID").val("");
  91. $('#empName').val("");
  92. $("#empSalary").val("");
  93. $("#empAddress").val("");
  95. }
  96. function GetEmployeeDetailsByID() {
  97. var idValue = $("#empID").val();
  100. $.ajax({
  101. url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items('" + idValue + "')",
  102. type: "GET",
  103. headers: { "Accept": "application/json;odata=verbose" }, // return data format
  104. success: function (data) {
  105. $("#empName").val(data.d.Title);
  106. $("#empSalary").val(data.d.Salary);
  107. $("#empAddress").val(data.d.Address);
  108. $("#tblEmployees").empty();
  109. GetEmployeeDetails();
  110. },
  111. error: function (error) {
  112. alert(JSON.stringify(error));
  113. }
  114. });
  115. }
  119. function UpdateEmployee() {
  121. var id = $("#empID").val();
  122. $.ajax({
  123. url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items('" + id + "')", // list item ID
  124. type: "POST",
  125. data: JSON.stringify
  126. ({
  127. __metadata:
  128. {
  129. type: "SP.Data.EmployeeListItem"
  130. },
  131. Title: $("#empName").val(),
  132. Salary: $("#empSalary").val(),
  133. Address: $("#empAddress").val()
  135. }),
  136. headers:
  137. {
  138. "Accept": "application/json;odata=verbose",
  139. "Content-Type": "application/json;odata=verbose",
  140. "X-RequestDigest": $("#__REQUESTDIGEST").val(),
  141. "IF-MATCH": "*",
  142. "X-HTTP-Method": "MERGE"
  143. },
  144. success: function (data, status, xhr) {
  145. $("#tblEmployees").empty();
  146. GetEmployeeDetails();
  147. alert("Date Updated Successfully");
  148. },
  149. error: function (xhr, status, error) {
  150. alert(JSON.stringify(error));
  151. }
  152. });
  153. }
  155. function createEmployee() {
  157. $.ajax({
  158. url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items",
  159. type: "POST",
  160. contentType: "application/json;odata=verbose",
  161. data: JSON.stringify
  162. ({
  163. __metadata:
  164. {
  165. type: "SP.Data.EmployeeListItem"
  166. },
  167. Title: $("#empName").val(),
  168. Salary: $("#empSalary").val(),
  169. Address: $("#empAddress").val()
  170. }),
  171. headers: {
  172. "Accept": "application/json;odata=verbose", // return data format
  173. "X-RequestDigest": $("#__REQUESTDIGEST").val()
  174. },
  175. success: function (data, status, xhr) {
  176. $("#tblEmployees").empty();
  177. GetEmployeeDetails();
  178. alert("Successfully Submitted");
  179. },
  180. error: function (xhr, status, error) {
  181. alert(JSON.stringify(error));
  182. }
  183. });
  184. }
  185. function GetEmployeeDetails() {
  189. $.ajax({
  190. url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items?$select=ID,Title,Salary,Address",
  191. type: "GET",
  192. headers: { "Accept": "application/json;odata=verbose" }, // return data format
  193. success: function (data) {
  194. //console.log(data.d.results);
  197. var table = $("#tblEmployees");
  198. var html = "<thead><tr><th>ID</<th><th>Name</th><th>Salary</th><th>Address</th></tr></thead>";
  202. for (var i = 0; i < data.d.results.length; i++) {
  203. var item = data.d.results[i];
  204. //$("#tblEmployees").append(item.Title + "\t" + item.Salary + "\t" + item.Address + "<br/>");
  207. html += "<tr><td>" + item.ID + "</td><td>" + item.Title + "</td><td>" + item.Salary + "</td><td>" + item.Address + "</td></tr>";
  210. }
  211. table.html(html);
  212. },
  213. error: function (error) {
  214. alert(JSON.stringify(error));
  215. }
  216. });
  220. }
  223. function manageQueryStringParameter(paramToRetrieve) {
  224. var params =
  225. document.URL.split("?")[1].split("&");
  226. var strParams = "";
  227. for (var i = 0; i < params.length; i = i + 1) {
  228. var singleParam = params[i].split("=");
  229. if (singleParam[0] == paramToRetrieve) {
  230. return singleParam[1];
  231. }
  232. }
  233. }
  235. // This function prepares, loads, and then executes a SharePoint query to get the current users information
  236. function getUserName() {
  237. context.load(user);
  238. context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
  239. }
  241. // This function is executed if the above call is successful
  242. // It replaces the contents of the 'message' element with the user name
  243. function onGetUserNameSuccess() {
  244. $('#message').text('Hello ' + user.get_title());
  245. }
  247. // This function is executed if the above call fails
  248. function onGetUserNameFail(sender, args) {
  249. alert('Failed to get user name. Error:' + args.get_message());
  250. }
  251. }
Deploy the Project

Right click on the solution and select the "Deploy" option.

SharePoint

Test the application

Here, we will test for "Submit" button.

Here, we have seen CRUD operations for REST API in SharePoint 2013. I am attaching the code here. Please test and let me know if you have any queries. We will see more on REST APIs in my upcoming article.