How to get most visited items in SharePoint using Rest and Jquery

Trending, most popular, recently visited, people are talking about now, these phrases are very integral part of the modern-day web sites. From a social site to a news media or an informative site for a federal agent these phrases has been the eye candy for information delivering.

What if we can do similar thing in SharePoint site and display the items, which are most visited, and which are recently visited. If we use c# or object model I bet, there are multiple and easier solutions but in our case, we will try to achieve the same functionality from client side using Rest and jQuery.

This is where we will utilize the power of search rest api.

Let’s do some analysis on the rest api for search.

Paste following URL in your browser, don’t forget to replace the yoursite with your SharePoint site URL.

“yoursite/_api/search/query?querytext=’Path:yoursite‘ “

The result should be displayed in your browser. Parse that results from an atom parser to json. you should get following image if you do everything right.

a.png
Json Result from the rest api search

As we can see  highlighted in the image above. There are two keys that we can use  for the topics we are looking.

So for most visited items we get all the results and sort them by row item 21 “ViewsLifeTime” that will give them the most popular item or most accessed item.

For recently visited items we sort the result by row item 22″ViewsRecent” that will give us the most recently visited items.

OK let’s look at the rest api we will use

  • Recently visited list or library items in the site collection.
    • $.ajax({ url: “yoursite/_api/search/query?querytext=’Path:yoursite+ContentClass:STS_ListItem+ContentClass:STS_ListItem_DocumentLibrary’&sortlist=’ViewsRecent:descending‘”,  
      type: “GET”,
      headers: {
      “Accept”: “application/json;odata=verbose”
      },
      success: function(data) {} });
    • $.ajax({ url: “yoursite/_api/search/query?querytext=’Path:yoursite+ContentClass:STS_ListItem+ContentClass:STS_ListItem_DocumentLibrary’&sortlist=’ViewsLifeTime:descending‘”,  
      type: “GET”,
      headers: {
      “Accept”: “application/json;odata=verbose”
      },
      success: function(data) {} });

As seen above the only difference between Most visited and Recently visited items is the sort list parameter in the search query.

In this article we will have the one code and you can re use the same code just changing the sort list parameter for either one.

Here is the code for Mostly visited or Most Popular items in site collection

[code language=”html”]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style type="text/css">
.recentitems {
padding: 5px;
background-color: #0072c6;
margin: 2px;
}

a.itemtitle {
color: white;
font-style: italic;
font-weight: 500;
}

#visited h2 {
text-align: center;
font-size: 24px;
font-weight: 600;
}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MostRecentItems</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {

$.ajax({
url: "yoursite/_api/search/query?querytext=’Path:yoursite+ContentClass:STS_ListItem+ContentClass:STS_ListItem_DocumentLibrary’&sortlist=’ViewsLifeTime:descending’",
type: "GET",
headers: {
"Accept": "application/json;odata=verbose"
},
success: function(data) {
//log the json to analyze and visualize
console.log(data);
var items=data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results;
//log the actual 10 items that is going to be displayed
console.log(items);

$.each(items, function(index, item) {

var ret= items[index].Cells.results[6].Value;
//replacing any spaces in the URL
var itemlinks= ret.replace(/ /g,"%20");
$(‘#popular’).append(‘

<div class=recentitems><a target="_blank" class=itemtitle href=’+itemlinks+’>’+items[index].Cells.results[3].Value+'</a></div’);
});

}

});
});

</script>

</head>

<body>
<div id="visited">
<div id="popular" >
<h2> Most Popular</h2>
</div>
</div>
</body>

</html>

[/code]

So write this code in an HTML file and upload in to document library.

Add a content editor web part to your page edit the content editor web part and place the link to the html file

ContentEditorLink
Content editor web part link to the html file

Once you save the page then you will see the most recent top 10 visited items in the SharePoint site collection or recently visited top 10 items.

Here is what i got after i have the code and links in place in my site

visited
Most visited and Recently visited items inside a site collection using Rest and Jquery

I hope you enjoy reading this article.

 

 

Advertisements

2 thoughts on “How to get most visited items in SharePoint using Rest and Jquery

  1. ’Path:yoursite+ContentClass:STS_ListItem+ContentClass:STS_ListItem_DocumentLibrary’&sortlist=’ViewsLifeTime:descending’

    In Path parameter, what needs to be mention instead of ContentClass:STS_ListItem and ContentClass:STS_ListItem_DocumentLibrary

    1. Not sure what is your question, this “ContentClass:STS_ListItem and ContentClass:STS_ListItem_DocumentLibrary” is used to check the items if they are list item or document library item.

Leave a Reply

Your email address will not be published. Required fields are marked *