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:
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
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.
Then edit the content editor web part and in the Content Link, give the above html file path.
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.
On click, it will navigate to the linked item.
You may like following SharePoint Rest API tutorials:
- Create, Update and Delete SharePoint List using Rest API in SharePoint
- Retrieve SharePoint list items programmatically using jsom, rest API, and csom
- Bind SharePoint list items to dropdownlist using javascript object model (jsom), Rest API and Server Object Model
- How to Display SharePoint List items using AngularJS and REST Api
- How to bind SharePoint Online list data using HTML and jQuery table using Rest API
- Rest API filter list items created by logged in user SharePoint
- How to make a synchronous Rest API call in SharePoint Online/2013/2016 using jQuery?
- Create and Delete List using Rest API in SharePoint Online/2013/2016
- Create or Delete SharePoint Site using Rest API
This SharePoint tutorial explains, how to display dynamic content using Rest API in SharePoint Online or SharePoint 2013/2016.
Hello Everyone!! I am Bhawana a SharePoint MVP and having about 10+ years of SharePoint experience as well as in .Net technologies. I have worked in all the versions of SharePoint from wss to Office 365. I have good exposure in Customization and Migration using Nintex, Metalogix tools. Now exploring more in SharePoint 2016 🙂 Hope here I can contribute and share my knowledge to the fullest. As I believe “There is no wealth like knowledge and no poverty like ignorance”