How to display SharePoint List Items in Div using JSOM (javascript object model)

by
Complete SharePoint Training Course ($46 OFF)

This JSOM SharePoint tutorial, we will discuss how to display list items in Div by using JSOM (JavaScript Object Model) in SharePoint Online.

Display SharePoint List Items in Div using JSOM

In this particular example, I have a SharePoint list as ComapnyLaptopInfo in SharePoint Online site which has below columns:

  • Laptop Name(“Single line of text”)
  • Laptop Image(“Hyperlink” which is having the image URL)
  • Description(“Multi-line of text”)

Also, I have added a few items to the SharePoint list.

display SharePoint List Items in Div using JSOM
How to retrieve sharepoint list items using jsom

Now,

Create HTML Input Form

First, I have created an HTML form which looks like below:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://onlysharepoint2013.sharepoint.com/sites/Raju/SiteAssets/Preetihtml/LaptopJsFile.js"></script>
<link rel="stylesheet" href="https://onlysharepoint2013.sharepoint.com/sites/Raju/SiteAssets/Preetihtml/LaptopStyle.css">
<meta charset="utf-8" />
<title>LAPTOP INFORMATION</title>
</head>
<body>
<p id="laptopinfo"></p>
</body>
</html>

Create JavaScript (.JS) File

Now, we will create a .js (JavaScript) file that will have some JSOM code for retrieving SharePoint list items including hyperlink and image URL field.

The js code looks like below:

$(document).ready(function () {
ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");
});
var siteUrl = _spPageContextInfo.siteServerRelativeUrl;
var collListItem;
function retrieveListItems() {
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('CompanyLaptopInfo');
var camlQuery = new SP.CamlQuery();
collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded(sender, args) {
var listItemEnumerator = collListItem.getEnumerator();
var mytable = "<table>";
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
var url = "https://onlysharepoint2013.sharepoint.com/sites/Raju/Lists/CompanyLaptopInfo/DispForm.aspx?ID=" + oListItem.get_item('ID');
var imgurl = oListItem.get_item('LaptopImage').get_url();
mytable += "<tr><td><img class=\'laptop\' src='" + imgurl + "'><a class=\'LaptopTitle\' href='" + url + "'>" + oListItem.get_item('Title') + "</a><br /><p class=\'LaptopText\'>" + oListItem.get_item('Description') + "</p></td></tr>";
}
mytable += "</table>";
$("#laptopinfo").html(mytable);
}
function onQueryFailed(sender, args) {
alert('Error: ' + args.get_message() + '\n' + args.get_stackTrace());
}

Here I am using the ExecuteOrDelayUntilScriptLoaded method which will call our retrieveListItems method after SP.js file loaded successfully.

Here, I have created a div, which we will be using to display all the list items.

Then create a variable named url and give the Hyperlink URL path in that variable within the while loop condition. The hyperlink code is given below:

var url = "https://onlysharepoint2013.sharepoint.com/sites/Raju/Lists/CompanyLaptopInfo/DispForm.aspx?ID=" + oListItem.get_item('ID');

Similarly get the image URL by using below code:

var imgurl = oListItem.get_item('LaptopImage').get_url();

Then within the “mytable” variable, set the image URL, Hyperlink URL and as well as Description within the <tr> and <td> tag. So that it will display systematically.

The code is given below:

mytable += "<tr><td><img class=\'laptop\' src='" + imgurl + "'><a class=\'LaptopTitle\' href='" + url + "'>" + oListItem.get_item('Title') + "</a><br /><p class=\'LaptopText\'>" + oListItem.get_item('Description') + "</p></td></tr>";

At last, I have bound all the Items from the SharePoint list in the paragraph <P> tag using its specific ID attribute as below-

$("#laptopinfo").html(mytable);

Create .CSS File

Now, we can add some CSS code to make some styling our elements.

The Style sheet code looks like below:

img.laptop {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 70px;
height: 75px;
float: left;
}
img.laptop:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
a.LaptopTitle {
color: blueviolet;
font-family: "Georgia", Times, serif;
font-size:20px;
}
a.LaptopTitle:visited {
color: yellowgreen;
}
a.LaptopTitle:hover {
color: red;
text-decoration: underline;
}
p.LaptopText {
font-size: 17px;
font-style: italic;
font-family: "Georgia", Times, serif;
}

Then upload the HTML, JS file to the Site Assets library in SharePoint.

Then create a web part page and Edit the page and then click on “Add a web part” link, Then it will open the Web part categories in the ribbon.

From the web part categories, select “Media and Content” and then from the Parts select the Content Editor web part.

By clicking on the “Edit web part”, we can give the HTML File path into the edit web part. Then after the Html file will be displayed on that Web Part Page after the “Stop Editing” like the below screenshot-

How to retrieve sharepoint list items using jsom
how to retrieve image from sharepoint list

Read some SharePoint jsom tutorials:

Conclusion

In this SharePoint tutorial, we learned how to display SharePoint list items in a Div by using JSOM (JavaScript Object Model).

>