SharePoint 2013: How To Develop Custom Search Apps Using REST API

In this article we are going to deal with search scenarios using enhanced REST API in SharePoint 2013. To make the story more interesting I am going to make use of the new App Model offered by SharePoint 2013. Here we will be going to explore SharePoint Hosted App which is one of the three types of Apps offered under the SharePoint 2013 App Model. In this article we will cover a simple scenario where we will create a Custom Search (SharePoint Hosted) App based on SharePoint 2013 Search and REST API provided by SharePoint 2013, that will perform searches on Crawl Data aggregated by the Search Crawler.

Prerequisites

1. App Development Environment must be configured properly. 
2. SharePoint 2013 Search Service Application must be created and configured.
   
3. Sample Data Sources must be created within the Scope targeted by the crawler.
4. Full Crawl must be finished.
5. Fiddler Web Proxy should be installed. You can get Fiddler.
   

Following are the steps involved in the development of Custom Search App using REST API:

Step 1: Start Visual Studio 2012/2013 and Select “App for SharePoint 2013” project template as shown below,



Step 2:

Modify the Default.aspx Page and add the UI Elements for Search App. For the sake of simplicity I am using basic HTML for the presentation but we can design the UI as compelling as it needs to be by making use of enhanced UI support from HTML5 & CSS3.



Step 3: Next thing is to hook up the “Click” event of the button “btnExecuteSearchREST” with an event handler function as shown below:



Step 4: Now let us do the step wise analysis of the actual plumbing,



Get the Search Term entered by the user and store it in the variable “queryText”.

Define Request Headers for the Web Request, Please Note that we mention “odata=verbose” as a part of the value for “Accept” Property, this is a new convention for Web Requests using REST API in SharePoint 2013 and it must be followed else it will produce the following error :



Set “url” property to the URL of the site which is hosting this App using “_spPageContextInfo.webAbsoluteUrl”, you will have to memorize this object as you have to use it on every single page in SharePoint where you want to use the SharePoint Context. This simple object provides you with a lot of useful information to work on as shown below,




Specify the Search Query using new End Point (_api/search/query/<searchTerm>) provided by SharePoint 2013.

Read the results from the response object and save it to “rows” variable, based on the data structure returned by the response object. We can identify the data structure by analyzing the response object using Fiddler Web Proxy as shown after few steps down the line.

We need to loop through the result set to read the Values based on the Keys returned.

Lastly, we need to display the records as required.

Optional:

At this point you can make use of some of the JavaScript Frameworks like “Knockout.js” which is based on MVVM Pattern and has an excellent feature of dependency tracking, which allows you to write complex UI logic with much less and cleaner Code. You can learn Knockout very easily by this link.

Step 5:

With this we are all done with the code, now it’s time to build and deploy the App and see it in action. In order to test the Custom Search App, first verify the Data Source which contains the data related to our search term. In our case it is “Customers” List with a Column “ContactTitle” containing the Search Term “Owner” as shown below,



Now specify the search term in textbox provided as a part of App UI and click “Execute Search using REST API” as shown below:



Before going to the search result in the “Result Panel” (which is a div on App UI), we should spend a few minutes to analyze the response object to determine what exactly is returning from the server against our request. If we view the response object in Fiddler as shown below, we will see a complete JSON Object containing the data in terms of Key/Value Pairs. This information is very important as this will help us to navigate the result set that we are interested in. Please Note that we utilize this information under Step-4 Point 5, where we are saving the result set from response object to local variable.





Finally if we see to the Result Panel we should be able to get the results based on the search term “Owner”.



This simple demo helps you to grasp the notion of how can we employ REST API while working with Custom Search Apps/Solutions.

Hope this will help someone in need.