1.Create a Custom List Name as "Emp" and Create a below Column Name
2.Paste the below code in Default.aspx
<%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%>
<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>
<%@ 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" %>
<%-- The markup and script in the following Content element will be placed in the <head> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<!-- Add your CSS styles to the following file -->
<link rel="Stylesheet" type="text/css" href="../Content/App.css" />
<style type="text/css">
.myOtherTable { background-color:#FFFFE0;border-collapse:collapse;color:#000;font-size:18px; }
.myOtherTable th { background-color:#BDB76B;color:white;width:32%; }
.myOtherTable td, .myOtherTable th { padding:5px;border:0; }
.myOtherTable td { border-bottom:1px dotted #BDB76B; }
</style>
<!-- Add your JavaScript to the following file -->
<script type="text/javascript" src="../Scripts/App.js"></script>
</asp:Content>
<%-- The markup in the following Content element will be placed in the TitleArea of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
Page Title
</asp:Content>
<%-- The markup and script in the following Content element will be placed in the <body> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
<h2>Get Items</h2>
<div class="EmpInfo" style="margin-top:10px;">
</div>
</asp:Content>
3.Paste the below code in App.js
'use strict';
var hostweburl;
var appweburl;
var sFullHtml = '';
$(document).ready(function () {
hostweburl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
appweburl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));
var scriptbase = hostweburl + "/_layouts/15/";
$.getScript(scriptbase + "SP.RequestExecutor.js", loadPage);
});
function getQueryStringParameter(paramToRetrieve) {
var params = document.URL.split("?")[1].split("&");
for (var i = 0; i < params.length; i = i + 1) {
var singleParam = params[i].split("=");
if (singleParam[0] == paramToRetrieve) return singleParam[1];
}
}
function loadPage() {
getListItems();
}
//Retrieve all of the list items
function getListItems() {
var executor;
executor = new SP.RequestExecutor(appweburl);
executor.executeAsync({
url: appweburl + "/_api/SP.AppContextSite(@target)/web/lists/getbytitle('Emp')/items?@target='" + hostweburl + "'",
method: "GET",
headers: {
"Accept": "application/json; odata=verbose"
},
success: getListItemsSuccessHandler,
error: getListItemsErrorHandler
});
}
//Populate the selectListItems control after retrieving all of the list items.
function getListItemsSuccessHandler(data) {
var jsonObject = JSON.parse(data.body);
var results = jsonObject.d.results;
sFullHtml += '<table id="TblEmpInfo" class="myOtherTable" >';
sFullHtml += ' <tr >';
sFullHtml += ' <th>First Name</th>';
sFullHtml += ' <th>Last Name</th>';
sFullHtml += ' <th>Location</th>';
sFullHtml += ' </tr>';
for (var i = 0; i < results.length; i++) {
var Title=results[i].Title;
var Fname=results[i].FirstName;
var Lname=results[i].LastName;
var Location=results[i].Location;
sFullHtml += '<tr>';
sFullHtml += '<td align="left" valign="top">'+ Fname +'</td>';
sFullHtml += '<td align="left" valign="top">'+ Lname +'</td>';
sFullHtml += '<td align="left" valign="top">'+ Location +'</td>';
sFullHtml += '</tr>';
}
sFullHtml += '</table>';
$(".EmpInfo").html(sFullHtml);
}
function getListItemsErrorHandler(data, errorCode, errorMessage) {
alert("Could not get list items: " + errorMessage);
}
4.After Publishing the App the output will look like this
