SharePoint Hosted App Part For List Items Retrieval

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.

<%@ Page language="C#" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<WebPartPages:AllowFraming ID="AllowFraming" runat="server" />
<html>
<head>
<title></title>
<script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script type="text/javascript">
'use strict';
// Set the style of the client web part page to be consistent with the host web.
(function () {
var hostUrl = '';
if (document.URL.indexOf('?') != -1) {
var params = document.URL.split('?')[1].split('&');
for (var i = 0; i < params.length; i++) {
var p = decodeURIComponent(params[i]);
if (/^SPHostUrl=/i.test(p)) {
hostUrl = p.split('=')[1];
document.write('<link rel="stylesheet" href="' + hostUrl + '/_layouts/15/defaultcss.ashx" />');
break;
}
}
}
if (hostUrl == '') {
document.write('<link rel="stylesheet" href="/_layouts/15/1033/styles/themable/corev15.css" />');
}
})();
</script>
<script>
var uls = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
var uls1 = window.location.host;
var replaceurl = uls1.split("/")[0];
var replaceurl1 = uls.split("/")[2];
var uls1 = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
var url = uls1.replace(replaceurl1, replaceurl);
var listname ='Sales1';
$.ajax({
url: url + "/_api/web/lists/getbytitle('" + listname + "')/items",
method: "GET",
headers: {
"Accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val()
},
success: function (data) {
var quickLinksHTML = "";
var results = data.d.results;
for (var i = 0; i < results.length; i++) {
Title = results[i].Title;
Quarter1 = results[i].Quarter1;
Quarter2 = results[i].Quarter2;
Quarter3 = results[i].Quarter3;
alert('Title:' + Title + '' + 'Quarter1:' + Quarter1 + '' + 'Quarter2:' + Quarter2 + '' + 'Quarter3:' + Quarter3);
}
},
error: function (data) {
//failure(data);
console.log(data);
}
});
function getQueryStringParameter(paramToRetrieve) {
var params =
document.URL.split("?")[1].split("&");
var strParams = "";
for (var i = 0; i < params.length; i = i + 1) {
var singleParam = params[i].split("=");
if (singleParam[0] == paramToRetrieve)
return singleParam[1];
}
}
</script>
</head>
<body>
</body>
</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.