Display templates
As per Microsoft “Display templates control which managed properties are shown in the search results, and how they appear in the Web Part”
Well in this blog we are going to convert this Microsoft description to actual working code.
Here is the output we trying to achieve:
Custom Managed Property in Search Results using display template and Result Type
Requirements:
- Show Date created for all excel files in Search Results
- The Date should be formatted as Jan 01, 2016
- Should apply to all site collection
Solution:
Step 1:
Create a new custom display template
- Go to Site Settings => Master pages and page layouts (Web Designer Galleries) => Display Templates (folder) => Search (folder)
- Download Item_Excel.html on your machine and open it some editor, I use visual studio.
- Rename file using a prefix to original name like DV_Item_Excel.html
- Add Created field into Mapped Properties and div to display the Date.
<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','ServerRedirectedURL':'ServerRedirectedURL','ServerRedirectedEmbedURL':'ServerRedirectedEmbedURL','ServerRedirectedPreviewURL':'ServerRedirectedPreviewURL','Created':'Created'</mso:ManagedPropertyMapping>
The Display template will look like this one:
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<title>DV Excel Item</title>
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
<mso:MasterPageDescription msdt:dt="string">Displays a result tailored for Microsoft Excel documents.</mso:MasterPageDescription>
<mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106603</mso:ContentTypeId>
<mso:TargetControlType msdt:dt="string">;#SearchResults;#</mso:TargetControlType>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<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','ServerRedirectedURL':'ServerRedirectedURL','ServerRedirectedEmbedURL':'ServerRedirectedEmbedURL','ServerRedirectedPreviewURL':'ServerRedirectedPreviewURL','Created':'Created'</mso:ManagedPropertyMapping>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>
<body>
<div id="Item_Excel">
<!--#_ if(!$isNull(ctx.CurrentItem) && !$isNull(ctx.ClientControl)){ var id = ctx.ClientControl.get_nextUniqueId(); var itemId = id + Srch.U.Ids.item; var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; var itemCreatedDate = new Date(ctx.CurrentItem.Created); var createdDate = monthNames[itemCreatedDate.getMonth()] + " " + itemCreatedDate.getUTCDate() + ", " + itemCreatedDate.getUTCFullYear() ; var hoverId = id + Srch.U.Ids.hover; var hoverUrl = "~sitecollection/_catalogs/masterpage/Display Templates/Search/Item_Excel_HoverPanel.js"; $setResultItem(itemId, ctx.CurrentItem); ctx.CurrentItem.csr_Icon = Srch.U.getIconUrlByFileExtension(ctx.CurrentItem); ctx.CurrentItem.csr_OpenApp = "excel"; ctx.currentItem_ShowHoverPanelCallback = Srch.U.getShowHoverPanelCallback(itemId, hoverId, hoverUrl); ctx.currentItem_HideHoverPanelCallback = Srch.U.getHideHoverPanelCallback(); _#-->
<div id="_#= $htmlEncode(itemId) =#_" name="Item" data-displaytemplate="ExcelItem" class="ms-srch-item" onmouseover="_#= ctx.currentItem_ShowHoverPanelCallback =#_" onmouseout="_#= ctx.currentItem_HideHoverPanelCallback =#_">
_#=ctx.RenderBody(ctx)=#_
<div id="_#= $htmlEncode(hoverId) =#_" class="ms-srch-hover-outerContainer"></div>
<div class="dv-search-meta">Date Created: _#= createdDate =#_ </div>
</div>
<!--#_ } _#-->
</div>
</body>
</html>
Save the html as major version, you will notice a js file is also created with same name as your file name. It system generated, so just leave it as is.
Step 2:
Create a result type for excel
- Go to Site Settings => Search Result Types (Site Collection Administration)
- Click Copy on Microsoft Excel result type
- Change the Name to something Unique
- Select the action we recently created i.e. the html display template and save it
CSS used:
/*Search Results*/
div.dv-search-meta {
border-top: 1px dashed #ccc;
border-bottom: 1px solid #ccc;
padding: 5px;
}
div.ms-srch-item:nth-child(even) {
background: #f6f6f6;
}
.ms-ref-refinername:link, .ms-ref-refinername:visited {
color: #fff;
padding: 0 0 5px 5px;
background: #2B83AB;
}
.ms-ref-refinername:hover
{
background: #2B83AB;
}
.ms-ref-refiner #Value {
border-bottom: 1px solid #ddd;
padding-left:5px;
}
a#unselToggle > div.ms-displayInlineBlock {
background-color: #616c6e;
padding: 2px 5px;
color: #fff;
}
You can create new display template for all other type (word, ppt, page) to have same features or css and even have add more metadata properties if you have for specific type.
Well that’s it. If you find any issues or have question please leave a comment.