Display Template Configuration To Display In Datagrid In SharePoint Search

Here we are going to modify control template and item template in SharePoint search which is used to show the results of a query made to the search index and we will display results in the data grid.

In my earlier post "Custom Search Configuration In SharePoint Online", we created managed property and refiners which we later used to display search results.

Now we will see about modified control template and item template to display the search result in the data grid.

Each display template is made of two files- an HTML version of the display template, which you can edit in your HTML editor and a .js file which SharePoint converts from the HTML file.

 

Steps

1. Navigate to Site Action -> Site Settings in SharePoint publishing site
2. Click “Master pages and page layouts” under Web Design Galleries.
3. Click Display Templates in master page gallery. -> Search
4. For Control template, Click Control_List.html template file and download a copy and rename the file as Control_Grid.html
5. For Item template, Click Item_Diagnostic.html template file and download a copy and rename the file as Item_Grid.html

Open Control_Grid.html file and put <Script> section under the body:

<script>
    $includeScript(this.url, "https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.0.min.js");
    $includeScript(this.url, "https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js");
    $includeCSS(this.url, "https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css");
    $includeLanguageScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Language Files/{Locale}/CustomStrings.js");
</script>

 

Now replace the <div id='Control_Grid'> with the following script.

<div id="Control_Grid">
    <!--#_
if (!$isNull(ctx.ClientControl) &&
!$isNull(ctx.ClientControl.shouldRenderControl) &&
!ctx.ClientControl.shouldRenderControl())
{
return "";
}
ctx.ListDataJSONGroupsKey = "ResultTables";
var $noResults = Srch.ContentBySearch.getControlTemplateEncodedNoResultsMessage(ctx.ClientControl);
var noResultsClassName = "ms-srch-result-noResults";
//Declare Table and Header IDs
var encodedId = $htmlEncode(ctx.ClientControl.get_nextUniqueId() + "_Table_");
var headerRowId = $htmlEncode(encodedId + "_HeaderRow_");
//Post Render Events
ctx.OnPostRender = [];
ctx.OnPostRender.push(function () {
$("#" + encodedId).dataTable({ "bPaginate": false, "bAutoWidth": true, "bSort": false });
});
//It will be called for each row
var ListRenderRenderWrapper = function(itemRenderResult, inCtx, tpl)
{
var iStr = [];
iStr.push(itemRenderResult);
return iStr.join('');
}
ctx['ItemRenderWrapper'] = ListRenderRenderWrapper;
_#--> //Define container and headers <table id="_#= encodedId =#_" class="resultsTable">
        <thead>
            <tr id="_#= headerRowId =#_" class="resultsTableHeader">
                <th>Product</th>
                <th>ProductCode</th>
                <th>Status</th>
            </tr>
        </thead> _#= ctx.RenderGroups(ctx) =#_
    </table>
    <!--#_
if (ctx.ClientControl.get_shouldShowNoResultMessage())
{
_#-->
    <div class="_#= noResultsClassName =#_">_#= $noResults =#_</div>
    <!--#_
}
_#-->
    <!-- Paging Display -->
    <!--#_
if(ctx.ClientControl.get_showPaging()){
var pagingInfo = ctx.ClientControl.get_pagingInfo();
var rowsPerPage = ctx.ClientControl.get_numberOfItems();
var totalRows = ctx.DataProvider.get_totalRows();
var currentPage = ctx.ClientControl.get_currentPageNumber();
var totalPages = Math.ceil(totalRows / rowsPerPage);
var selfLinkId = "SelfLink_";
var imagesUrl = GetThemedImageUrl('searchresultui.png');
var pl = '';
if(!$isEmptyArray(pagingInfo)){
_#-->
    <div class="MWS_Control_ListWithPaging_Paging_Wrapper col-xs-6 col-sm-12">
        <!--#_
for (var i = 0; i < pagingInfo.length; i++) {
var pl = pagingInfo[i];
if(!$isNull(pl)) {
var imagesUrl = GetThemedImageUrl('searchresultui.png');
if(pl.startItem == -1 && currentPage != totalPages) {
var selfLinkId = "SelfLink_" + pl.pageNumber;
_#-->
        <div id="PagingSelf">Page _#= $htmlEncode(pl.pageNumber) =#_</div>
        <!--#_
} else if(pl.pageNumber == -1) {
var iconClass = Srch.U.isRTL() ? "ms-srch-pagingNext" : "ms-srch-pagingPrev";
_#-->
        <div id="PreviousImageLink">
            <a id="PageLinkPrev" href="#" class="ms-commandLink ms-promlink-button ms-promlink-button-enabled ms-verticalAlignMiddle" title="_#= $htmlEncode(pl.title) =#_" onclick="$getClientControl(this).page(_#= $htmlEncode(pl.startItem) =#_);return Srch.U.cancelEvent(event);">
                <span class="ms-promlink-button-image">
                    <img src="_#= $urlHtmlEncode(imagesUrl) =#_" class="_#= $htmlEncode(iconClass) =#_" alt="_#= $htmlEncode(pl.title) =#_" />
                </span>
            </a>
        </div>
        <!--#_
} else if(pl.pageNumber == -2) {
var iconClass = Srch.U.isRTL() ? "ms-srch-pagingPrev" : "ms-srch-pagingNext";
//Do not display anything.
}
}
}
//Display the last page
if((currentPage != totalPages) && totalPages > 2) {
_#-->
        <div id="PagingLink">of _#= $htmlEncode(totalPages) =#_</div>
        <!--#_
}else if(currentPage == totalPages){
_#-->
        <div id="PagingLink">Page _#= $htmlEncode(totalPages) =#_ of _#= $htmlEncode(totalPages) =#_</div>
        <!--#_
}

for (var i = 0; i < pagingInfo.length; i++) {
var pl = pagingInfo[i];
if(!$isNull(pl)) {
var imagesUrl = GetThemedImageUrl('searchresultui.png');
if(pl.pageNumber == -2) {
var iconClass = Srch.U.isRTL() ? "ms-srch-pagingPrev" : "ms-srch-pagingNext";
_#-->
        <div id="PagingImageLink">
            <a id="PageLinkNext" href="#" class="ms-commandLink ms-promlink-button ms-promlink-button-enabled ms-verticalAlignMiddle" title="_#= $htmlEncode(pl.title) =#_" onclick="$getClientControl(this).page(_#= $htmlEncode(pl.startItem) =#_);return Srch.U.cancelEvent(event);">
                <span class="ms-promlink-button-image">
                    <img src="_#= $urlHtmlEncode(imagesUrl) =#_" class="_#= $htmlEncode(iconClass) =#_" alt="_#= $htmlEncode(pl.title) =#_" />
                </span>
            </a>
        </div>
        <!--#_
}
}
}
_#-->
        <!-- Total item count. -->
        <!--#_
if(ctx.ClientControl.get_showResultCount() && ctx.DataProvider.get_totalRows() > 0){
var start = ctx.DataProvider.get_currentQueryState().s;
var resultsPerPage = ctx.DataProvider.get_resultsPerPage();
var totalRows = ctx.DataProvider.get_totalRows();
var countDisplayString = Srch.Res.rs_ApproximateResultCount;
var exactCount = Srch.Res.rs_ResultCount;
if (start + resultsPerPage > totalRows) { countDisplayString = (totalRows == 1)? Srch.Res.rs_SingleResultCount : Srch.Res.rs_ResultCount; }
_#-->
        <div id="ResultCount" class="ms-srch-resultscount"> _#= String.format($htmlEncode(exactCount), $htmlEncode(totalRows.localeFormat("N0"))) =#_ </div>
        <!--#_
}
_#-->
    </div> <!-- //Close MWS_Control_ListWithPaging_Paging_Wrapper -->
    <!--#_
}
}
_#-->
</div>//Save and close file

I have also included pagination in this datagrid view.

Now its time to update item_Grid.html file.

Step 1

Open the file and look for <mso:ManagedPropertyMapping in the head section. Replace the line with the following,

<mso:ManagedPropertyMapping msdt:dt="string">'SLProduct':'SLProduct','SLProductCode':'SLProductCode','SLProductStatus':'SLProductStatus','Path':'Path'</mso:ManagedPropertyMapping>

Note
You need to update with your managed property name in the above line which you created while configuring search results.

Step 2

Replace the whole body script with the below,

<body>
    <div id="Item_GridRow">
        <!--#_
var encodedId = $htmlEncode(ctx.ClientControl.get_nextUniqueId() + "_Diagnostic_");
var linkURL = $getItemValue(ctx, "Path");
linkURL.overrideValueRenderer($urlHtmlEncodeValueObject);
var SLProduct = $getItemValue(ctx, "SLProduct");
var SLProductCode = $getItemValue(ctx, "SLProductCode");
var SLProductStatus = $getItemValue(ctx, "SLProductStatus");
if(SLProduct==''){
SLProduct='No Value';
}

_#-->
        <tr class="gridRow">
            <td><a href="_#= linkURL =#_" target="_blank">_#= $htmlEncode(SLProduct) =#_</a></td>
            <td>_#= $htmlEncode(SLProductCode) =#_</td>
            <td>_#= $htmlEncode(SLProductStatus) =#_</td>
        </tr>
    </div>
</body>

Now you can upload the templates and publish as a major version.

Add content search web parts and edit the web part to configure result source under change query. Change control and item under display template with our title name.

Here title of control template and item template will be visible which we have given in our Control_Grid.html and Item_Grid.html respectively.

 

Leave another field as default - Apply -Ok.

Your result will be visible in the data grid as shown above.

I have attached both files with this blog. You can download and update with your managed metadata and start using it. 

Cheers!!