Display List items in HTML Table using JSOM in SharePoint Hosted App

Here I have a SharePoint list which looks like below:



Display SharePoint List items

in HTML Table using JSOM


Display SharePoint List items in HTML Table using JSOM in SharePoint Hosted App


Next, Open visual studio, Create a SharePoint Add-In. For creating this, go to file menu, click on the new item, next click on Project item. It displays a new project.


Here, in the left side panel, go to the Office/SharePoint tab, here you select Add-in.


Now it displays the list Add-In’s, here you select SharePoint Add-In. Now enter your project name and location. Then click on OK.


Next, it will display the new SharePoint Add-In window. Here select your SharePoint host URL and select SharePoint Hosted and click Next.


Now it will ask your Microsoft Account details. Enter your username and password and click on sign-in.


Here you select SharePoint Online as shown below and click on Finish.


Go to aspx page. Add this code to this page.

<asp:ContentContentPlaceHolderID=”PlaceHolderMain”runat=”server”>
<divid=”empdata”>
<%<p id=”message”>
<!– The following content will be replaced with the user name when you run the app – see App.js –>
initializing…
</p>%>
</div>
</asp:Content>

Here just add id=”empdate” in div tag because for displaying we bind data to this tag.

'use strict';

ExecuteOrDelayUntilScriptLoaded(RetrieveList, “sp.js”);

var listItems;
functionRetrieveList() {
var hostUrl = decodeURIComponent(getURLParameters(“SPHostUrl”));
var clientContext = newSP.ClientContext.get_current();
var hostcontext = newSP.AppContextSite(clientContext, hostUrl);
var web = hostcontext.get_web();
var list = web.get_lists().getByTitle(‘Employee’);
var cmlquery = newSP.CamlQuery();
listItems = list.getItems(cmlquery);
load(listItems);
executeQueryAsync(onQuerySucceeded, onQueryFailed);
}

functiononQuerySucceeded() {
var listItemEnumerator = listItems.getEnumerator();
var displaytable =<table border=\”1\”><tr>+<th>Title</th>+<th>Country</th>+<th>State</th></tr>;

while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
displaytable +=<tr><td>+ oListItem.get_item(‘Title’) +</td><td>+ oListItem.get_item(‘Country’).get_lookupValue() +</td><td>+ oListItem.get_item(‘State’).get_lookupValue() +</td></tr>;
}
displaytable +=</table>$(“#empdata”).html(displaytable)
}

functiononQueryFailed(sender, args) {
alert(‘Error:+ args.get_message() + ‘\n’ + args.get_stackTrace());
}

functiongetURLParameters(param) {
var params = document.URL.split(?)[1].split(&);
var strParams =;
for (vari = 0; i<params.length; i = i + 1) {
var singleParam = params[i].split(=);
if (singleParam[0] == param) {
returnsingleParam[1];
}
}
}

Go to appmanifest.xml file and open it. Then go to the permission here you select scope: site collection and permission: Full Control.

Display SharePoint List items in HTML Table using JSOM in SharePoint Hosted App


Go to your solution explorer, select your project name then right-click on it and click on deploy option.


Here is your output.

Display SharePoint List items in HTML Table using JSOM in SharePoint Hosted App



Hope this SharePoint tutorial explains, how to display SharePoint list items in HTML table using jsom in SharePoint hosted add-in or apps.


Source: SP Guide


The Tech Platform

www.thetechplatform.com

0 comments