Here are the steps:

Step 1: SHA Project folder structure.

Step 2: App Web List Creation Steps.

Firstly add simple list into SHA project. Here are the steps to create List into SHA project.

In this example I created custom list named “Customers” as in the following,

Elements.xml File code- it adds data into List.

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  3. <ListInstance Title="Customers" OnQuickLaunch="TRUE" TemplateType="105" FeatureId="00bfea71-7e6d-4186-9ba8-c047ac750105" Url="Lists/Customers" Description="My List Instance">
  4. <Data>
  5. <Rows>
  6. <Row>
  7. <Field Name="FirstName">Rupali</Field>
  8. <Field Name="Title">Shinde</Field>
  9. <Field Name="WorkPhone">(123)456-6789</Field>
  10. </Row>
  11. <Row>
  12. <Field Name="FirstName">Vishnu</Field>
  13. <Field Name="Title">Jadhav</Field>
  14. <Field Name="WorkPhone">(143)867-5309</Field>
  15. </Row>
  16. <Row>
  17. <Field Name="FirstName">DJ</Field>
  18. <Field Name="Title">Jadhav</Field>
  19. <Field Name="WorkPhone">(800)LUV-AZUR</Field>
  20. </Row>
  21. <Row>
  22. <Field Name="FirstName">Summit</Field>
  23. <Field Name="Title">Jadhav</Field>
  24. <Field Name="WorkPhone">(888)123-5677</Field>
  25. </Row>
  26. <Row>
  27. <Field Name="FirstName">Kiran</Field>
  28. <Field Name="Title">Jadhav</Field>
  29. <Field Name="WorkPhone">(888)GOT-OAUTH</Field>
  30. </Row>
  31. <Row>
  32. <Field Name="FirstName">Shrikant</Field>
  33. <Field Name="Title">Shinde</Field>
  34. <Field Name="WorkPhone">(813)813-8133</Field>
  35. </Row>
  36. <Row>
  37. <Field Name="FirstName">Seema</Field>
  38. <Field Name="Title">Jadhav</Field>
  39. <Field Name="WorkPhone">(800)BIG-TULS</Field>
  40. </Row>
  41. </Rows>
  42. </Data>
  43. </ListInstance>
  44. </Elements>

Step 3: User Interface designing steps.

Home page of application is having “Add New Customer “ button, which shows user entry form to fill user details.

User Details Grid – this grid will show user details with Edit, Delete and Display button into it.

  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="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
  4. <%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
  5. <%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
  7. <asp:Content ID="Content1" ContentPlaceHolderID="PlaceHolderPageTitle" runat="server">
  8. SharePoint-hosted App REST API Demo
  9. </asp:Content>
  11. <asp:Content ID="Content2" ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
  12. Using the REST API from Client-side JavaScript
  13. </asp:Content>
  15. <asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
  17. <link rel="Stylesheet" type="text/css" href="../Content/App.css" />
  19. <script type="text/javascript" src="../Scripts/jquery-1.6.2.min.js"></script>
  20. <script type="text/javascript" src="../Scripts/jsrender.js"></script>
  22. <script type="text/javascript" src="../Scripts/App.js"></script>
  24. </asp:Content>
  26. <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
  28. <div id="toolbar">
  29. <input type="button" id="cmdAddNewCustomer" value="Add New Customer" class="ms-ButtonHeightWidth" />
  30. </div>
  32. <div id="results" />
  34. </asp:Content>

Output

Step 4: Grid Data filling steps – the following code is used to fill GridView.

  1. var hostweburl;
  2. var appweburl;
  4. $(function () {
  6. // register event handlers on page
  7. $("#cmdAddNewCustomer").click(onAddCustomer);
  8. $("#results").append($("<img>", { src: "_layouts/images/gears_anv4.gif" }));
  10. // Get the URI decoded URLs.
  11. hostweburl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
  12. appweburl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));
  14. var scriptbase = hostweburl + "/_layouts/15/";
  15. $.getScript(scriptbase + "SP.RequestExecutor.js", getCustomers);
  16. });
  18. function getCustomers() {
  20. $("#results").empty();
  21. $("<img>", { "src": "/_layouts/images/GEARS_AN.GIF" }).appendTo("#results");
  23. var executor = new SP.RequestExecutor(appweburl);
  24. var FullURL = appweburl + "/_api/web/lists/getbytitle('Customers')/items";
  26. executor.executeAsync(
  27. {
  28. url: FullURL,
  29. method: "GET",
  31. headers: {
  32. "accept": "application/json;odata=verbose",
  33. "content-type": "application/json;odata=verbose",
  34. "X-RequestDigest": $("#__REQUESTDIGEST").val()
  35. },
  36. success: onDataReturned,
  37. error: errorHandler
  38. }
  39. );
  40. }
  42. function errorHandler(data, errorCode, errorMessage) {
  43. document.getElementById("results").innerText = "Could not complete cross-domain call: " + errorMessage;
  44. }
  46. function onDataReturned(data) {
  48. $("#results").empty();
  50. var jsonObject = JSON.parse(data.body);
  51. var odataResults = jsonObject.d.results;
  53. // set rendering template
  54. var tableHeader = "<thead>" +
  55. "<td>Last Name</td>" +
  56. "<td>First Name</td>" +
  57. "<td>Work Phone</td>" +
  58. "<td> </td>" +
  59. "<td> </td>" +
  60. "<td> </td>" +
  61. "</thead>";
  63. var table = $("<table>", { id: "customersTable" }).append($(tableHeader));
  65. var renderingTemplate = "<tr>" +
  66. "<td>{{>Title}}</td>" +
  67. "<td>{{>FirstName}}</td>" +
  68. "<td>{{>WorkPhone}}</td>" +
  69. "<td><a href='javascript: onShowCustomerDetail({{>Id}});'><img src='_layouts/images/DETAIL.gif' alt='Show Detail' /></a></td>" +
  70. "<td><a href='javascript: onUpdateCustomer({{>Id}});'><img src='_layouts/images/EDITITEM.gif' alt='Edit' /></a></td>" +
  71. "<td><a href='javascript: onDeleteCustomer({{>Id}});'><img src='_layouts/images/DELITEM.gif' alt='Delete' /></a></td>" +
  72. "</tr>";
  75. $.templates({ "tmplTable": renderingTemplate });
  76. table.append($.render.tmplTable(odataResults));
  78. $("#results").append(table);
  79. }

Step 5: Add new customer

EditCustomer.aspx file contains code for New Customer Popup.

  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="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
  4. <%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
  5. <%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
  7. <asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
  8. <link rel="Stylesheet" type="text/css" href="../Content/App.css" />
  9. <SharePoint:ScriptLink name="SP.UI.Dialog.js" runat="server" Defer="false" LoadAfterUI="true" Localizable="false" />
  10. <SharePoint:ScriptLink name="sp.js" runat="server" Defer="false" LoadAfterUI="true" Localizable="false" />
  12. <script type="text/javascript" src="../Scripts/jquery-1.6.2.js"></script>
  13. <script type="text/javascript" src="../Scripts/EditCustomer.js"></script>
  14. </asp:Content>
  16. <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
  18. <div class="dialog_input_section">
  20. <table id="customerEditTable">
  21. <tr>
  22. <td>First Name:</td>
  23. <td>
  24. <input id="txtFirstName" /></td>
  25. </tr>
  26. <tr>
  27. <td>Last Name:</td>
  28. <td>
  29. <input id="txtLastName" /></td>
  30. </tr>
  31. <tr>
  32. <td>Work Phone:</td>
  33. <td>
  34. <input id="txtWorkPhone" /></td>
  35. </tr>
  36. </table>
  38. </div>
  40. <div class="dialog_button_section">
  41. <input type="button" id="cmdOK" value="Save" class="ms-ButtonHeightWidth" />
  42. <input type="button" id="cmdCancel" value="Cancel" class="ms-ButtonHeightWidth" />
  43. </div>
  45. </asp:Content>

App.JS file contains the following code to open popup.

  1. $("#cmdAddNewCustomer").click(onAddCustomer);
Above click internally calls EditCustomer.aspx file and render it on screen.


Step 6: Update Customer

Inside GridView, edit button is provided to update existing customer details.

Code:
  1. function onUpdateCustomer(customer) {
  3. var executor = new SP.RequestExecutor(appweburl);
  4. var FullURL = appweburl + "/_api/web/lists/getbytitle('Customers')/items(" + customer + ")";
  6. executor.executeAsync(
  7. {
  8. url: FullURL,
  9. method: "GET",
  11. headers: {
  12. "accept": "application/json;odata=verbose",
  13. "content-type": "application/json;odata=verbose",
  14. "X-RequestDigest": $("#__REQUESTDIGEST").val()
  15. },
  16. success: onCustomerReturned,
  17. error: errorHandler
  18. }
  19. );
  20. }
Output


Step 7: Delete Customer

Inside GridView, delete button is provided to delete existing customer details.

Code
  1. function onDeleteCustomer(customer) {
  3. var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/getByTitle('Customers')/items(" + customer + ")";
  5. var requestHeaders = {
  6. "accept": "application/json",
  7. "X-RequestDigest": $("#__REQUESTDIGEST").val(),
  8. "If-Match": "*"
  9. }
  11. $.ajax({
  12. url: requestUri,
  13. type: "DELETE",
  14. contentType: "application/json",
  15. headers: requestHeaders,
  16. success: onSuccess,
  17. error: onError
  18. });
  19. }

Step 8: View Customer Details.

Inside GridView, view button is provided to view existing customer details.

  1. function onShowCustomerDetail(customer) {
  3. var customerItemEditUrl = _spPageContextInfo.webAbsoluteUrl +
  4. "/Lists/Customers/DispForm.aspx?ID=" + customer;
  6. var dialogOptions = {
  7. url: customerItemEditUrl,
  8. title: "Customer Detail",
  9. dialogReturnValueCallback: getCustomers
  10. };
  12. SP.UI.ModalDialog.showModalDialog(dialogOptions);
  13. }
Output

When view form is open in browser and if you change user details there itself it gets updated and final result get rendered on screen.

Full Source Code
  1. var hostweburl;
  2. var appweburl;
  4. $(function () {
  6. // register event handlers on page
  7. $("#cmdAddNewCustomer").click(onAddCustomer);
  8. $("#results").append($("<img>", { src: "_layouts/images/gears_anv4.gif" }));
  10. // Get the URI decoded URLs.
  11. hostweburl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
  12. appweburl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));
  14. var scriptbase = hostweburl + "/_layouts/15/";
  15. $.getScript(scriptbase + "SP.RequestExecutor.js", getCustomers);
  16. });
  18. function getCustomers() {
  20. $("#results").empty();
  21. $("<img>", { "src": "/_layouts/images/GEARS_AN.GIF" }).appendTo("#results");
  23. var executor = new SP.RequestExecutor(appweburl);
  24. var FullURL = appweburl + "/_api/web/lists/getbytitle('Customers')/items";
  26. executor.executeAsync(
  27. {
  28. url: FullURL,
  29. method: "GET",
  31. headers: {
  32. "accept": "application/json;odata=verbose",
  33. "content-type": "application/json;odata=verbose",
  34. "X-RequestDigest": $("#__REQUESTDIGEST").val()
  35. },
  36. success: onDataReturned,
  37. error: errorHandler
  38. }
  39. );
  40. }
  42. function errorHandler(data, errorCode, errorMessage) {
  43. document.getElementById("results").innerText = "Could not complete cross-domain call: " + errorMessage;
  44. }
  46. function onDataReturned(data) {
  48. $("#results").empty();
  50. var jsonObject = JSON.parse(data.body);
  51. var odataResults = jsonObject.d.results;
  53. // set rendering template
  54. var tableHeader = "<thead>" +
  55. "<td>Last Name</td>" +
  56. "<td>First Name</td>" +
  57. "<td>Work Phone</td>" +
  58. "<td> </td>" +
  59. "<td> </td>" +
  60. "<td> </td>" +
  61. "</thead>";
  63. var table = $("<table>", { id: "customersTable" }).append($(tableHeader));
  65. var renderingTemplate = "<tr>" +
  66. "<td>{{>Title}}</td>" +
  67. "<td>{{>FirstName}}</td>" +
  68. "<td>{{>WorkPhone}}</td>" +
  69. "<td><a href='javascript: onShowCustomerDetail({{>Id}});'><img src='_layouts/images/DETAIL.gif' alt='Show Detail' /></a></td>" +
  70. "<td><a href='javascript: onUpdateCustomer({{>Id}});'><img src='_layouts/images/EDITITEM.gif' alt='Edit' /></a></td>" +
  71. "<td><a href='javascript: onDeleteCustomer({{>Id}});'><img src='_layouts/images/DELITEM.gif' alt='Delete' /></a></td>" +
  72. "</tr>";
  75. $.templates({ "tmplTable": renderingTemplate });
  76. table.append($.render.tmplTable(odataResults));
  78. $("#results").append(table);
  79. }
  81. function onShowCustomerDetail(customer) {
  83. var customerItemEditUrl = _spPageContextInfo.webAbsoluteUrl +
  84. "/Lists/Customers/DispForm.aspx?ID=" + customer;
  86. var dialogOptions = {
  87. url: customerItemEditUrl,
  88. title: "Customer Detail",
  89. dialogReturnValueCallback: getCustomers
  90. };
  92. SP.UI.ModalDialog.showModalDialog(dialogOptions);
  93. }
  95. function onAddCustomer(event) {
  97. var dialogArgs = {
  98. command: "Add"
  99. };
  101. var dialogOptions = {
  102. url: "EditCustomer.aspx",
  103. title: "Add New Customer",
  104. width: "480px",
  105. args: dialogArgs,
  106. dialogReturnValueCallback: saveNewCustomer
  107. };
  109. SP.UI.ModalDialog.showModalDialog(dialogOptions);
  110. }
  112. function saveNewCustomer(dialogResult, returnValue) {
  114. if (dialogResult == SP.UI.DialogResult.OK) {
  116. // get data from dialog for new customer
  117. var LastName = returnValue.LastName;
  118. var FirstName = returnValue.FirstName;
  119. var WorkPhone = returnValue.WorkPhone;
  121. var requestUri = _spPageContextInfo.webAbsoluteUrl +
  122. "/_api/Web/Lists/getByTitle('Customers')/items/";
  124. var requestHeaders = {
  125. "accept": "application/json",
  126. "X-RequestDigest": $("#__REQUESTDIGEST").val(),
  127. }
  129. var customerData = {
  130. Title: LastName,
  131. FirstName: FirstName,
  132. WorkPhone: WorkPhone
  133. };
  135. requestBody = JSON.stringify(customerData);
  137. $.ajax({
  138. url: requestUri,
  139. type: "Post",
  140. contentType: "application/json",
  141. headers: requestHeaders,
  142. data: requestBody,
  143. success: onSuccess,
  144. error: onError
  145. });
  146. }
  147. }
  149. function onDeleteCustomer(customer) {
  151. var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/getByTitle('Customers')/items(" + customer + ")";
  153. var requestHeaders = {
  154. "accept": "application/json",
  155. "X-RequestDigest": $("#__REQUESTDIGEST").val(),
  156. "If-Match": "*"
  157. }
  159. $.ajax({
  160. url: requestUri,
  161. type: "DELETE",
  162. contentType: "application/json",
  163. headers: requestHeaders,
  164. success: onSuccess,
  165. error: onError
  166. });
  167. }
  169. function onUpdateCustomer(customer) {
  171. var executor = new SP.RequestExecutor(appweburl);
  172. var FullURL = appweburl + "/_api/web/lists/getbytitle('Customers')/items(" + customer + ")";
  174. executor.executeAsync(
  175. {
  176. url: FullURL,
  177. method: "GET",
  179. headers: {
  180. "accept": "application/json;odata=verbose",
  181. "content-type": "application/json;odata=verbose",
  182. "X-RequestDigest": $("#__REQUESTDIGEST").val()
  183. },
  184. success: onCustomerReturned,
  185. error: errorHandler
  186. }
  187. );
  188. }
  190. function onCustomerReturned(data) {
  192. var jsonObject = JSON.parse(data.body);
  194. var dialogArgs = {
  196. command: "Update",
  197. Id: jsonObject.d.Id,
  198. LastName: jsonObject.d.Title,
  199. FirstName: jsonObject.d.FirstName,
  200. WorkPhone: jsonObject.d.WorkPhone,
  201. etag: jsonObject.d.__metadata.etag
  202. };
  204. var dialogOptions = {
  205. url: "EditCustomer.aspx",
  206. title: "Update Customer",
  207. width: "480px",
  208. args: dialogArgs,
  209. dialogReturnValueCallback: updateCustomer
  210. };
  212. SP.UI.ModalDialog.showModalDialog(dialogOptions);
  213. }
  215. function updateCustomer(dialogResult, returnValue) {
  217. if (dialogResult == SP.UI.DialogResult.OK) {
  219. var Id = returnValue.Id;
  220. var FirstName = returnValue.FirstName;
  221. var LastName = returnValue.LastName;
  222. var WorkPhone = returnValue.WorkPhone;
  223. var etag = returnValue.etag;
  225. var requestUri = appweburl + "/_api/web/lists/getbytitle('Customers')/items(" + Id + ")";
  227. var requestHeaders = {
  228. "accept": "application/json",
  229. "X-RequestDigest": $("#__REQUESTDIGEST").val(),
  230. "X-HTTP-Method": "MERGE",
  231. "If-Match": etag
  232. }
  234. var customerData = {
  235. Title: LastName,
  236. FirstName: FirstName,
  237. WorkPhone: WorkPhone
  238. };
  240. requestBody = JSON.stringify(customerData);
  242. $.ajax({
  243. url: requestUri,
  244. type: "POST",
  245. contentType: "application/json",
  246. headers: requestHeaders,
  247. data: requestBody,
  248. success: onSuccess,
  249. error: onError
  250. });
  251. }
  252. }
  254. function onSuccess(data, request) {
  255. getCustomers();
  256. }
  258. function onError(error) {
  259. $("#results").empty();
  260. $("#results").text("ADD ERROR: " + JSON.stringify(error));
  261. }
  263. function getQueryStringParameter(paramToRetrieve) {
  265. var strParams = "";
  266. var params = document.URL.split("?")[1].split("&");
  268. for (var i = 0; i < params.length; i = i + 1) {
  269. var singleParam = params[i].split("=");
  271. if (singleParam[0] == paramToRetrieve)
  272. return singleParam[1];
  273. }
  274. }
App.css
  1. .ms-siteicon-a {
  2. background-image: url(images/SiteIcon.gif);
  3. background-repeat: no-repeat;
  4. width: 75px;
  5. height: 75px;
  6. }
  8. .ms-siteicon-img {
  9. display: none;
  10. }
  12. .ms-core-siteTitle span a {
  13. font-size: 18px;
  14. }
  16. #customersTable {
  17. background-color: #999;
  18. border-collapse: collapse;
  19. }
  21. #customersTable thead td {
  22. background-color: #333;
  23. color: White;
  24. }
  26. #customersTable td {
  27. color: #222;
  28. border: 1px black solid;
  29. padding: 4px;
  30. background-color: White;
  31. border-collapse: collapse;
  32. }
  34. #resultsTable tr td {
  35. color: #333;
  36. padding: 4px;
  37. border-collapse: collapse;
  38. border: 1px solid black;
  39. background-color: White;
  40. font-size: 32px;
  41. }
  44. #toolbar {
  45. margin: 4px;
  46. padding: 8px;
  47. background-color: #ccc;
  48. }
  51. #results {
  52. padding: 8px;
  53. font-size: 12px;
  54. }
  56. #results table {
  57. margin: 8px
  58. }
  60. #results table, #results table td {
  61. border-collapse: collapse;
  62. border: 1px #444 solid;
  63. padding: 2px 8px 2px 4px;
  64. font-size: 20px;
  65. }
  67. #results h2 {
  68. font-size: 18px;
  69. color: #999;
  70. border-bottom: 1px solid #999;
  71. margin-top: 8px;
  72. margin-bottom: 4px;
  73. }
  75. .ms-dialog #s4-ribbonrow {
  76. display: none;
  77. }
  79. .ms-dlgTitle {
  80. background-image: url("images/logo16.gif");
  81. background-repeat: no-repeat;
  82. background-position: 8px, 4px;
  83. background-color: black;
  84. padding: 1px;
  85. }
  87. h1.ms-dlgTitleText {
  88. margin-left: 28px;
  89. margin-top: 4px;
  90. }
  92. .ms-dlgTitle h1 {
  93. font-size: 1.4em;
  94. color: white;
  95. }
  97. #dlgTitleBtns {
  98. margin-top: 4px;
  99. margin-right: 8px;
  100. }
  102. .ms-dlgTitle {
  103. padding-bottom: 4px;
  104. padding-left: 8px;
  105. }
  107. .ms-dlgTitle h1 {
  108. font-size: 1.8em;
  109. }
  112. .dialog_input_section {
  113. padding-top: 4px;
  114. }
  116. .dialog_input_section_title {
  117. margin-top: 8px;
  118. color: black;
  119. border-bottom: solid black 1px;
  120. margin-bottom: 8px;
  121. }
  123. .dialog_button_section {
  124. margin-top: 16px;
  125. border-top: solid #CCC 2px;
  126. padding-top: 8px;
  127. text-align: right;
  128. }
  130. .ms-dlgContent {
  131. padding-bottom: 2px;
  132. }
  135. .ms-dlgFrameContainer {
  136. padding-top: 4px;
  137. padding-left: 8px;
  138. padding-right: 8px;
  139. padding-bottom: 0px;
  140. }