Search Results in Grid View

A pretty common request I get when working with Search results for content solutions is to display the results as a grid, and not the normal block format we see with the standard search results below. 

Since we have full control over how things are rendered with the display templates, it is pretty easy to alter the formatting now using simple html and javascript to render it as a grid. 

For this example, we are going to assume that the grid format will be applied to all items uniformly.  To do that, we will select a specific display template to use instead of allowing the rules to detect the appropriate template, item by item.  For this example, I’m going to work with a copy of the Item_OfficeDocument.html display template which has the following markup:

<div onmouseover="_#= ctx.currentItem_ShowHoverPanelCallback =#_" onmouseout="_#= ctx.currentItem_HideHoverPanelCallback =#_" id="_#= $htmlEncode(itemId) =#_" class="ms-srch-item" name="Item" data-displaytemplate="OfficeDocumentItem">
				_#=ctx.RenderBody(ctx)=#_
                <div id="_#= $htmlEncode(hoverId) =#_" class="ms-srch-hover-outerContainer"></div>
			</div>

The ctx.RenderBody(ctx) line will inject the standard rendered output. You can really structure this with whatever markup suits your requirements. When I need to provide a grid or tabular format I will typically use an unordered list that floats. Here is a simple three column example:

        <ul style="list-style-type: none; overflow: hidden; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"> <li class="Title" style="height: 20px; float: left; padding-bottom: 10px; padding-top: 10px; padding-left: 10px; padding-right: 10px; width: 250px"> <div onmouseover="_#= ctx.currentItem_ShowHoverPanelCallback =#_" onmouseout="_#= ctx.currentItem_HideHoverPanelCallback =#_" id="_#= $htmlEncode(itemId) =#_" class="ms-srch-item" name="Item" data-displaytemplate="OfficeDocumentItem">_#=ctx.CurrentItem.Title =#_ <div id="_#= $htmlEncode(hoverId) =#_" class="ms-srch-hover-outerContainer"></div> </div> </li><li class="Author" style="height: 20px; float: left; padding-bottom: 10px; padding-top: 10px; padding-left: 10px; padding-right: 10px; width: 250px">_#=ctx.CurrentItem.DisplayAuthor=#_ </li><li class="Date" style="height: 20px; float: left; padding-bottom: 10px; padding-top: 10px; padding-left: 10px; padding-right: 10px; width: 200px"> <!--#_ 
            var rawDate = new Date(ctx.CurrentItem.LastModifiedTime);
            var formattedDate = ((rawDate.getMonth() + 1) + "/" + rawDate.getDate() + "/" + rawDate.getFullYear());
_#-->_#=formattedDate=#_</li></ul>

In this example, you may notice that I also did some formatting the UTC formatted date. This is a good example of how we can manipulate the data as needed.  Below is an example of the grid view.

 

 

While this is a simple example that uses only default fields available to all lists and libraries, it is easy to add in additional properties that can be leveraged by your markup. The only real stipulation here is that you will need to make sure that it is a property recognized by the search index. At the top of the document there is property called "ManagedPropertyMapping" which lists the properties that need to be loaded and available for the markup. Here is the default value for the Item_OfficeDOcument template.

<mso:managedpropertymapping msdt:dt="string">'Title':'Title','Path':'Path','Description':'Description','EditorOWSUSER':'EditorOWSUSER','LastModifiedTime':'LastModifiedTime','CollapsingStatus':'CollapsingStatus','DocId':'DocId','HitHighlightedSummary':'HitHighlightedSummary','HitHighlightedProperties':'HitHighlightedProperties','FileExtension':'FileExtension','ViewsLifeTime':'ViewsLifeTime','ParentLink':'ParentLink','FileType':'FileType','IsContainer':'IsContainer','SecondaryFileExtension':'SecondaryFileExtension','DisplayAuthor':'DisplayAuthor','ServerRedirectedURL':'ServerRedirectedURL'</mso:managedpropertymapping> </mso:customdocumentproperties>

To add in a custom property, you simply need to add in the name/value pair. For example:

<mso:managedpropertymapping dt:dt="string">'Title':'Title','Path':'Path','Description':'Description','EditorOWSUSER':'EditorOWSUSER','LastModifiedTime':'LastModifiedTime','CollapsingStatus':'CollapsingStatus','DocId':'DocId','HitHighlightedSummary':'HitHighlightedSummary','HitHighlightedProperties':'HitHighlightedProperties','FileExtension':'FileExtension','ViewsLifeTime':'ViewsLifeTime','ParentLink':'ParentLink','FileType':'FileType','IsContainer':'IsContainer','SecondaryFileExtension':'SecondaryFileExtension','DisplayAuthor':'DisplayAuthor','ServerRedirectedURL':'ServerRedirectedURL'<strong>, 'MyProperty':'MyProperty'</strong></mso:managedpropertymapping>

Tags: , ,

Leave a Comment