Search In App web Using REST API In SharePoint 2013

Implementation

  1. Make use of Search REST service : <Site URL>/_api/search/query?querytext=”<SearchTerm>”.
  2. Process the returned JSON result.
  3. Add required Search Service Permission to App.

Get Started

  • Create a SharePoint-hosted ‘Apps for SharePoint 2013’ project using Visual Studio 2012/2013.

  • Add a div in Default.aspx.
    1. <!-- App Web Search-->  
    2.     <div id="searchDiv" style="display: none">  
    3.         <b>Search For</b>  
    4.         <input type="text" id="searchTerm" />  
    5.         <input type="button" id="btnSearch" value="Search" onclick="searchAppWeb()" />  
    6.     </div>  
    7.     <div id="SearchResultsDiv"></div>  
    8. <!--Search Ends-->  
    Note: Make sure you have referenced App.js script on Default.aspx. We are going to write the function searchAppWeb() there.

  • Add search function in App.js.
    1. //Search Implemenatation in App Web using Search REST API  
    2. //Do not forget to provide Search Permission in AppManifest file   
    3. var html;  
    4. function searchAppWeb() {  
    5.       
    6.     //Get the Search Term from textbox  
    7.     var searchTerm = $("#txtSearchTerm").val();  
    8.   
    9.     //REST API query URL  
    10.     var queryUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/search/query?querytext='" + searchTerm + "'";;  
    11.   
    12.     //Empty the string  
    13.     html = "";  
    14.   
    15.     //Make the ajax call  
    16.     $.ajax({   
    17.         url: queryUrl,   
    18.         method: "GET",   
    19.         headers: { "Accept""application/json; odata=verbose" },   
    20.         success: onSearchSuccess,   
    21.         error: onSearchError  
    22.     });  
    23. }  
    24.   
    25. function onSearchSuccess(data){  
    26.     // JSON object contains two elements which have search results  
    27.     //1. PrimaryQueryResult  
    28.     //2. SecondaryQueryResults (When documents are grouped on Host Web)  
    29.   
    30.     //Get PrimaryQueryResult and Render it in HTML Table format  
    31.     html = "<table>";  
    32.   
    33.     var primaryQueryResult = data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results;  
    34.       
    35.     if (primaryQueryResult != null && primaryQueryResult != undefined) {  
    36.         for (var iPrimaryResultCounter = 0; iPrimaryResultCounter < primaryQueryResult.length; iPrimaryResultCounter++) {  
    37.             html += "<tr><td>";  
    38.             html += primaryQueryResult[iPrimaryResultCounter].Cells.results[3].Value;  
    39.             html += "</td><td><a href=\""  
    40.             html += primaryQueryResult[iPrimaryResultCounter].Cells.results[6].Value;  
    41.             html += "\">" + primaryQueryResult[iPrimaryResultCounter].Cells.results[6].Value + "</a></td><tr>";  
    42.         }  
    43.     }  
    44.   
    45.     //Get SecondaryQueryResults and continue rendering it in HTML Table format  
    46.     var secondaryResult = data.d.query.SecondaryQueryResults;  
    47.     if (data.d.query.SecondaryQueryResults != null && data.d.query.SecondaryQueryResults!=undefined) {  
    48.         for (var iSecondaryResultCounter = 0; iSecondaryResultCounter < data.d.query.SecondaryQueryResults.results.length; iSecondaryResultCounter++) {  
    49.             var resultBlock = data.d.query.SecondaryQueryResults.results[iSecondaryResultCounter].RelevantResults.Table.Rows.results;  
    50.             for (var iResults = 0; iResults < resultBlock.length; iResults++) {  
    51.                 html += "<tr><td>";  
    52.                 html += resultBlock[iResults].Cells.results[3].Value;  
    53.                 html += "</td><td><a href=\""  
    54.                 html += resultBlock[iResults].Cells.results[6].Value;  
    55.                 html += "\">" + resultBlock[iResults].Cells.results[6].Value + "</a></td><tr>";  
    56.             }  
    57.         }  
    58.     }  
    59.     html += "</table>";  
    60.     $("#SearchResultsDiv").append(html);  
    61.   
    62. }  
    63. function onSearchError(err){  
    64.     alert(JSON.stringify(err));  
    65. }  
  • Add required Search Service Permission to App. Add ‘Search’ in Scope and set permission to ‘QueryAsUserIgnoreAppPrincipal

    QueryAsUserIgnoreAppPrincipal

  • Build and Deploy the App.

  • If you have any List/Document library created on App web then add few items in that List or Document Library.

    List or Document Library

  • Search for these items in App Web. Search Result will be displayed from App web.

    App Web

  • You can search for these items from the host web too. Host Web search returns result from App web as well as Host Web.

    Host Web

Additional Data

You can use developer tool to obtain additional result elements of Primary or Secondary Result from JSON and use it to display on the page. Here results[3] and results[6] have been used for display purpose.

debug

Conclusion

This function can be used to get search result from App Web. Examine the returned JSON data to get more results elements. Styling can be done to display the result in any format.

Next Recommended Readings