Me & My SharePoint [FrontEnd]

© Christian Stahl – All about SharePoint branding & customizations

Getting started with REST in SharePoint 2013 – Part VI — October 30, 2014

Getting started with REST in SharePoint 2013 – Part VI

Welcome to the sixt post in this series about REST in SharePoint 2013. In the previous posts I wrote about how to get external data into your SharePoint page. This time I’m stepping back into how to read information from SharePoint, and this time we will take a look into an example about how to use the SharePoint 2013 Search REST API, one of the most powerful REST access points in SharePoint, and yes, this will work the same no matter if it’s SharePoint Online or SharePoint Onprem.

Please read the previous posts in this series before you go on to this post:

SharePoint 2013 Search REST API

First of all, take a look at the overview at Office Dev center: http://msdn.microsoft.com/en-us/library/office/jj163876(v=office.15).aspx – from this page you can learn all the basic stuff about how to construct queries and parameters. The REST Search API gives a lot of possibilities, you can basically retrive just anything that the serach in SharePoint will index! Take a look at Chris O’Briens blog post as an cool example about how to use REST search API, an example that shows how to get related items to the content in an app.

In the following example I’ll show you how to create a table based on a search Query, just a single Word that’s stored as a variable. Instead of the Word ‘SharePoint’ you could for example store something more dynamic like a metadata onto the current page. Let’s say you add this in a page layout and use it to display other pages that are in some way related to this page.

App

Let’g go!

 

var queryText = 'SharePoint'
var startrow = '&startrow=0'
var rowlimit = '&rowlimit=10'
var searchQuery = _spPageContextInfo.webAbsoluteUrl + "/_api/search/query?querytext='" + queryText + "'" + rowlimit + startrow;

$.ajax({
url: searchQuery,
method: "GET",
headers: {"Accept": "application/json; odata=verbose"},
success: onQuerySuccess,
error: onQueryFail
});

function onQuerySuccess(data) {

var items = [];
items.push("<ul id='listContainer'>");
items.push("<div id='listHeader'>" + 'Search results..' + "</div>");

if (data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results.length == 0) {
$("#listResult").append('No results..');
}
else{
$(data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results).each(function(){

var path = keyValue(this, 'Path');
var title = keyValue(this, 'Title');
var created = moment(keyValue(this, 'Write')).format("YYYY-MM-DD");
if (!moment(created,'YYYY-MM-DD').isValid()) {
var created = 'Date is not applicable..';
}
else {
var created = moment(keyValue(this, 'Write')).format("YYYY-MM-DD");
}

items.push('<li id="' + 'listContent' + '">' +
'<span id="' + 'listContentInner' + '">' +
'<a href="' + path + '">' +  title + '</a>' +
'</span>' +
'<span id="' + 'listContentInnerTime' + '">' +
' - ' + created +
'</span>' +
'</li>');
});

items.push("</ul>");

$("#listResult").html(items.join(''));

}
}

function keyValue(row, fldName) {
var ret = null;
$.each(row.Cells.results, function () {
if (this.Key == fldName) {
ret = this.Value;
}
});
return ret;
}

function onQueryFail(sender, args) {
$("#listResult").append('Query failed. Error:' + args.get_message());
}

It’s a bit tricky to find the structure of the nodes, but if you using for example Advanced REST client in google chrome you’ll find it. Take a look at this image, hope this will help you to figure out the path for the data results: data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results

Nodes

You can download the file from here, including the CSS and script references