How to display dynamic contents into a page using Rest API in SharePoint Online

Hi folks, in my previous SharePoint online branding article we learned how to display dynamic contents using Angular and Rest API. Today we will learn how to display dynamic contents from SharePoint List into a presentable format using Javascript and REST API. We will discuss how we can make the data attractive using HTML, CSS, and javascript.

Display dynamic contents into a page using Rest API in SharePoint Online

Here I have a SharePoint Online list which has columns like LinkName and URLPath and has been added a few rows of data in that. The data looks like below:

SharePoint online branding: Display SharePoint online list data using Rest API
SharePoint online branding: Display SharePoint online list data using Rest API

Our requirement was to display the data on the dashboard page and with some attractive UI. So we will use Rest API to retrieve the list data from the SharePoint Online list and then we will do some branding like we will add some CSS to HTML elements so that the look and feel will be good.

Below are some prerequisites, which required before we jump in to implement the below code.

  • https://jquery.com/download/ – To get latest jquery.min.js
  • Any IDE that supports HTML and JS i.e. Notepad++, VS 2015.
  • Little knowledge about CSS, HTML, JS and REST API

HTML File

In the below HTML file make sure to add below 2 major references as discussed above in <Head> section.

<head>
<Script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://onlysharepoint2013.sharepoint.com/sites/Bhawana/SiteAssets/CSS/stylesheet.css">
</head>

CSS styles (stylesheet.css)

You can also use the below styles inline into the same HTML page or else create a CSS file include below changes and refer the file. Here I have created a .css file with name as stylesheet.css and stored inside SiteAssets document library under the CSS folder.

.title-div-leftBlue
{
margin: 20px 10px;
border-bottom: .625rem solid mediumblue;
text-align: left;
padding: 10px 5px;
display: table;
}

.red-button1
{
background:#dd1d21;
color:#ffffff !important;
width: 200px !important;
text-align: center;
padding: 10px 20px;
display: block;
font-weight: bold;
margin-bottom: 10px;
}
.red-button1:hover
{
background:#fbce07;
color:#dd1d21 !important;
border-color:#dd1d21 !important;
width: 200px !important;
text-align: center;
padding: 10px 20px;
display: block;
font-weight: bold;
margin-bottom: 10px;
}

Implementation Details

Things to understand before implementation

  • ExecuteOrDelayUntilScriptLoaded(startIt, “sp.js”); – This method will wait until sp.js is loaded into the page and then trigger main function ‘startit’
  • onQuerySucceeded– Execute in case of successful execution. It has main logic implemented.
  • onQueryFailed- Execute in case of any exception.
  • GET – REST Api method to fetch the data from the list.
  • Accept”: “application/json;odata=verbose – REST Api header defined.
  • _spPageContextInfo.webAbsoluteUrl – This will return a web absolute URL of the site. In our case it will return “https://onlysharepoint2013.sharepoint.com/sites/Bhawana/”
  • _spPageContextInfo.webAbsoluteUrl + /_api/web/lists/getByTitle(‘ImportantLinks’)/items?$select=LinkName,URLPath&$top=6&$orderby=Created”

REST API endpoint defined to fetch the data from the ‘ImportantLinks’ list, here in this endpoint we are taking only top=6 items ordered by Created so we can restrict no of records we want to fetch at a time, the max limit is 100.

You can also run the endpoint and see the output in the browser as below.

https://onlysharepoint2013.sharepoint.com/sites/Bhawana/_api/web/lists/getByTitle(‘ImportantLinks’)/items?$select=LinkName,URLPath&$top=6&$orderby=Created
display dynamic contents into a page using Rest API in SharePoint Online
SharePoint online branding: Display SharePoint online list data using Rest API and CSS

HTML Code (usefullLink.html)

Below is the HTML file:

<html>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script>
<link rel=”stylesheet” href=”https://onlysharepoint2013.sharepoint.com/sites/Bhawana/SiteAssets/CSS/stylesheet.css”>
<script>
ExecuteOrDelayUntilScriptLoaded(startIt, “sp.js”);
function startIt() {
var fullUrl = _spPageContextInfo.webAbsoluteUrl + “/_api/web/lists/getByTitle(‘ImportantLinks’)/items?$select=LinkName,URLPath&$top=6&$orderby=Created”;
$.ajax({
url: fullUrl,
type: “GET”,
headers:
{
“accept”: “application/json;odata=verbose”,
“content-type”: “application/json;odata=verbose”,
},
success: onQuerySucceeded,
error: onQueryFailed
});
}
function onQuerySucceeded(data)
{
var listItemInfo = ”;
var listItemImagePath = ”;
$.each(data.d.results, function (key, value)
{
listItemInfo += ‘<a class=”red-button1″ href=’+ value.URLPath +’>’+ value.LinkName +'</a><br/>’;
});
$(“#linkApp”).html(listItemInfo);

}
function onQueryFailed()
{
alert(‘Error!’);
}
</script>
</head>
<div class=”title-div-leftBlue”>
<h1> Important Scripting Links</h1>
</div>
<p>
<div id=”linkApp” class=”row”>
</div><br>
</p>
</html>

The above file I have save inside the SharePoint Site Pages document library.

Page URL- /sites/Bhawana/SiteAssets/SitePages/usefullLink.html

Now we need to provide a reference to the file inside a content editor web part which we can add inside a web part page. Edit the web part page and add a content editor web part inside it.

sharepoint online rest api
sharepoint online rest api

Then edit the content editor web part and in the Content Link, give the above html file path.

SharePoint online branding: Display SharePoint online list data using Rest API, HTML and CSS
SharePoint online branding: Display SharePoint online list data using Rest API, HTML and CSS

Once you save the above changes in the content editor webpart property and save the page, you can see below output. The main advantage of this module is once this is set up you just need to add or modify data in the list rest it will reflect below. Therefore, maintenance would be easy.

SharePoint online branding: Retrieve and display SharePoint online list data using Rest API, HTML and CSS
SharePoint online branding: Retrieve and display SharePoint online list data using Rest API, HTML and CSS

On click, it will navigate to the linked item.

You may like following SharePoint Rest API tutorials:

This SharePoint tutorial explains, how to display dynamic content using Rest API in SharePoint Online or SharePoint 2013/2016.

>