Create a SharePoint hosted app part, as shown below.



Create a developer’s site, using Central Admin http://hvsp01:31300/sites/test. Select SharePoint hosted option and the required URL is shown below.



Create a custom list Sales1 and add some of the list items, as shown below.



Open XML file and assign the permissions, as shown.



Add an item by right clicking, as shown.







Use the code given below by replacing the code in the ClientWebPart1.aspx page.
  1. <%@ Page language="C#" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
  2. <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="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" %>
  6. <WebPartPages:AllowFraming ID="AllowFraming" runat="server" />
  8. <html>
  9. <head>
  10. <title></title>
  12. <script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
  13. <script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>
  14. <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
  15. <script type="text/javascript" src="/_layouts/15/sp.js"></script>
  17. <script type="text/javascript">
  18. 'use strict';
  20. // Set the style of the client web part page to be consistent with the host web.
  21. (function () {
  22. var hostUrl = '';
  23. if (document.URL.indexOf('?') != -1) {
  24. var params = document.URL.split('?')[1].split('&');
  25. for (var i = 0; i < params.length; i++) {
  26. var p = decodeURIComponent(params[i]);
  27. if (/^SPHostUrl=/i.test(p)) {
  28. hostUrl = p.split('=')[1];
  29. document.write('<link rel="stylesheet" href="' + hostUrl + '/_layouts/15/defaultcss.ashx" />');
  30. break;
  31. }
  32. }
  33. }
  34. if (hostUrl == '') {
  35. document.write('<link rel="stylesheet" href="/_layouts/15/1033/styles/themable/corev15.css" />');
  36. }
  37. })();
  38. </script>
  41. <script>
  42. var uls = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
  43. var uls1 = window.location.host;
  44. var replaceurl = uls1.split("/")[0];
  45. var replaceurl1 = uls.split("/")[2];
  46. var uls1 = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
  47. var url = uls1.replace(replaceurl1, replaceurl);
  48. var listname ='Sales1';
  49. $.ajax({
  50. url: url + "/_api/web/lists/getbytitle('" + listname + "')/items",
  51. method: "GET",
  52. headers: {
  53. "Accept": "application/json;odata=verbose",
  54. "content-type": "application/json;odata=verbose",
  55. "X-RequestDigest": $("#__REQUESTDIGEST").val()
  56. },
  57. success: function (data) {
  58. var quickLinksHTML = "";
  59. var results = data.d.results;
  60. for (var i = 0; i < results.length; i++) {
  61. Title = results[i].Title;
  62. Quarter1 = results[i].Quarter1;
  63. Quarter2 = results[i].Quarter2;
  64. Quarter3 = results[i].Quarter3;
  65. alert('Title:' + Title + '' + 'Quarter1:' + Quarter1 + '' + 'Quarter2:' + Quarter2 + '' + 'Quarter3:' + Quarter3);
  68. }
  69. },
  70. error: function (data) {
  71. //failure(data);
  72. console.log(data);
  73. }
  74. });
  75. function getQueryStringParameter(paramToRetrieve) {
  76. var params =
  77. document.URL.split("?")[1].split("&");
  78. var strParams = "";
  79. for (var i = 0; i < params.length; i = i + 1) {
  80. var singleParam = params[i].split("=");
  81. if (singleParam[0] == paramToRetrieve)
  82. return singleParam[1];
  83. }
  84. }
  85. </script>
  89. </head>
  90. <body>
  91. </body>
  92. </html>
Right click and select Build the app part, as shown.



Right click and select Deploy the app part similarly.


Right click and select Publish, as shown.


Package the app and make a copy of it in your local desktop in order to upload it.




You can see the app part uploaded on your home page or upload it manually by browsing from your local desktop. Delete the previous instance, if uploading manually.









You can update any more changes and again upload it by following the steps given above only after changing the version in Appmanifest.xml file.



Create a ‘SalesItems’ page in order to add this app part for the required output.


Add the app part by selecting from the app parts list after clicking Edit the page.


Save the page and you can find the output of all the 3 list items, as shown.



Here is the output after saving the site page.