Posted on:
Categories: SharePoint
Description:

​I recently was faced with the task to create a SharePoint Add-In (formerly known as 'App'), that retrieves all tasks of a user. I have done this many times before and my approach usually has been to use the KeywordQuery object to retrieve the task items from SharePoint search. This apporach (usually referred to as Search Driven Application) used to work well - in the old server-side-code environment!

But times have changed and today, SharePoint development is switching from server-side code to client-side code - it is switching from SharePoint web parts to SharePoint Add-Ins. It's obvious that you can't use the old KeywordQuery object to create a SharePoint Add-In that is executed client-side. Luckily Microsoft is providing the JSOM (JavaScript Client Object Model) interface which is JavaScript library that developers can use to access portions of the old server-side SharePoint API.

I was curious so I decided to give it a try and I also wanted to know how this approach differs from the commonly used REST API approach. With the knowledge I already achieved from coding this kind of functionality many times, I started to create the app. But soon I noticed that the documentation of the JSOM API that Microsoft is providing, wasn't complete. I started to look for addotional documenation on the internet, but although I found some additional information, I wasn't able to find exactly, what I was looking for. So I decided to tackle that problem in a different way.

To be able to use JSOM for accessing SharePoint search, you need to include an addtional JavaScript library to your APSX page like this:

<script type="text/javascript" src="/_layouts/15/sp.search.js"></script>

Being a SharePoint developer I had a close look into this library and I was able to find the desired information by stepping through the code of the library. With the information I extracted from the library, I was finally able to create the SharePoint Add-In.

As I said before, it took me some hours to retrieve the information on how to use the JSOM KeywordQuery object and I decided to provide a code snippet here. Feel free to grab the code and use it as a starter for your own projects.

 

// Remember to change settings in search. Make 'PercentCompleteOWSNMB' are queryable property
function handleQuery() {

    // Build the query
    var keywordQuery = new Microsoft.SharePoint.Client.Search.Query.KeywordQuery(context);
    var queryText = "(ContentClass:STS_ListItem_Tasks)";
    queryText += " AND (AssignedTo:'" + user.get_title() + "')";
    queryText += " AND (PercentCompleteOWSNMBR<>'1')";

    //Assign the query
    keywordQuery.set_queryText(queryText);

    // Add a row limit (retrieve only the first 10 items)
    keywordQuery.set_rowLimit("10");

    // Add a sorting
    var sortList = keywordQuery.get_sortList();
    sortList.add("LastModifiedTime", Microsoft.SharePoint.Client.Search.Query.SortDirection.descending);

    // Add additional properties
    keywordQuery.get_selectProperties().add("PercentCompleteOWSNMBR");

    // Execute the query
    var searchExecutor = new Microsoft.SharePoint.Client.Search.Query.SearchExecutor(context);
    queryResults = searchExecutor.executeQuery(keywordQuery);
    context.executeQueryAsync(onQuerySuccess, onQueryError);
}

function onQuerySuccess() {
    $("#resultsDiv").append("<table>");

    $.each(queryResults.m_value.ResultTables[0].ResultRows, function () {
        $("#resultsDiv").append("<tr>");
        $("#resultsDiv").append("<td>" + "<a href='" + this.Path + "'>" +  this.Title + "</a>" + "</td>");
        $("#resultsDiv").append("</tr>");
    });
   
    $("#resultsDiv").append("</table>");
}

function onQueryError() {
    $("#message").text("Query failed");
}