Configuring hover panel with custom display tempalte

In this one project there was a requirement to change the search result, we had to add some fields to represent the summary of the record for result of type document and as you might know that you can almost do anything with display templates. We created a display template to show those summary fields. Now, as you know SharePoint has different display templates for different types of documents, like there is a separate display template for Word, PowerPoint, PDF etc. Each of these display templates has a HoverPanel display template associated with them. So, our requirement was to display the same set of summary fields regardless of the document type, and also to have hover over functionality intact. In the normal display template the hover URL is specified and glued with the display template with the following set of lines,

var hoverUrl = "~sitecollection/_catalogs/masterpage/Display Templates/Search/Item_KH_WebPage_HoverPanel.js";           
ctx.currentItem_ShowHoverPanelCallback = Srch.U.getShowHoverPanelCallback(itemId, hoverId, hoverUrl);
         
So, now to handle each different file and show the correct HoverPanel we decided to get the file extension. The following line would give the file extension,

var fileType = ctx.CurrentItem.FileType.toLowerCase();

This will return the extension of the file and then you can conditionally apply the HoverPanel, like below,

if(fileType == "pdf"){
        var hoverUrl = "~sitecollection/_catalogs/masterpage/Display Templates/Search/Item_PDF_HoverPanel.js";
        ctx.CurrentItem.csr_OpenApp ="PdfFile.OpenDocuments";
        displayTemplateClass="PDFItem";
 }
 else if(fileType == "doc" || fileType == "docx"){
        var hoverUrl = "~sitecollection/_catalogs/masterpage/Display Templates/Search/Item_Word_HoverPanel.js";
        ctx.CurrentItem.csr_OpenApp="word";
        displayTemplateClass="WordItem";
 }
 else if(fileType == "xls" || fileType == "xlsx"){
        var hoverUrl = "~sitecollection/_catalogs/masterpage/Display Templates/Search/Item_Excel_HoverPanel.js";
        ctx.CurrentItem.csr_OpenApp = "excel";                                                            
        displayTemplateClass="ExcelItem"
 }
 else if(fileType == "ppt" || fileType == "pptx"){
        var hoverUrl = "~sitecollection/_catalogs/masterpage/Display Templates/Search/Item_PowerPoint_HoverPanel.js";
        ctx.CurrentItem.csr_OpenApp ="powerpoint";
        displayTemplateClass="PowerPointItem";
 }

I have taken the values for these two parameters, csr_OpenApp and displayTemplateClass from the HoverPanel display templates of the document types.
Once we have decided which HoverPanel to use we will bind it like below,                                          ctx.currentItem_ShowHoverPanelCallback = Srch.U.getShowHoverPanelCallback(itemId, hoverId, hoverUrl);

ctx.currentItem_HideHoverPanelCallback = Srch.U.getHideHoverPanelCallback();

And now we apply the displayTemplateClass and HoverPanel to our main div like below,

<div id="_#= $htmlEncode(itemId) =#_" name="Item" data-displaytemplate="_#= displayTemplateClass =#_" 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>              
                        
This is good as long as file type is Word, Excel, PowerPoint or PDF but what if we want the result is a video, well can't we just add a conditional statement to handle that like below,                                  

//https://support.office.com/en-us/article/Video-formats-that-work-in-Office-365-Video-dd1af01c-fd8e-4640-b17b-93ee02b9b817
else if(fileType == "3gp" || fileType == "3g2" || fileType == "3gp2" || fileType == "asf" || fileType == "mts" || fileType=="m2ts" || fileType == "avi" || fileType == "mod" || fileType == "ts" || fileType == "vob" || fileType == "xesc" || fileType == "mp4" || fileType == "mpeg" || fileType == "mpg" || fileType == "m2v" || fileType == "ismv" || fileType == "wmv"){
        var hoverUrl = "~sitecollection/_catalogs/masterpage/Display Templates/Search/Item_Video_HoverPanel.js";              
        displayTemplateClass="VideoItem";
}
                                               
Well we have to, but that's not it. I won't render the HoverPanel as it should for videos by just writing that, so what’s missing?
What missing is, we need to pass the managed properties that are require to render video HoverPanel,

{File Extension}:&#39;SecondaryFileExtension&#39;,&#39;Author&#39;,&#39;ContentTypeId&#39;,&#39;Created&#39;,&#39;PeopleInMedia&#39;,&#39;MediaDuration&#39;,&#39;VideoFileURL&#39;{Video File URL}:&#39;UserEncodingURL;ExternalMediaURL;DefaultEncodingURL;&#39;

Include these set of properties to managed property section and you will be good.

Thanks for reading!!

Comments

Post a Comment

Popular posts from this blog

PnP Modern Search Extensibility: Creating Custom Layouts

Image
In the last blog  we were looking at the basics of PnP Modern Search Extensibility, what we can customize  and how to create a the library component. In this blog, we will explore how to add custom layouts using extensibility.  Right now, PnP Modern Search Results webpart provides you with these 5 layouts, Details List, Cards, Slider, List and People, which should be sufficient for simpler scanarios. In addition to that, it also allows you to customize the layout by editing the handlebar template using “edit result template” option under Custom layout, or you can create a custom handlebar file, upload it on SharePoint and then add its location in “ Use an external template layout” option. For example, you are setting up a Search Results page for showing projects. If you use the the default List layout, then the results would end up looking like in the image below, it shows page title, author, date modified, project summary and then what all tags the project has been...
Read more

PnP Modern Search Extensibility: Creating Handlebar Helpers

Image
In the blog series of PnP Modern Search Extensibility we have looked at basics of  PnP Modern Search Extensibility , how to add a  custom layout  and how to add custom web components , in this blog we will look at creating custom handlebar helpers. With extensibility you can also create Handlebar helpers that can be used to in HTML templates or while configuring layout fields. There are a lot of handlebar helpers available for common scenarios as well. In the previous blog we created a Custom Simple List layout, and for showing Project Summary we were using the Summary slot mapped to HitHighlightedSummary, but what if you have created a custom column in the library and want to use it show Project Summary and you also want to truncate it at 180 characters and add ellipsis and then when the user expands the collapsible section you want to show the whole Project Summary. To do that, first of all we need a handlebar helper that would truncate and add ellipsis after...
Read more

PnP Modern Search Extensibility

Image
What is it? The PnP Modern Search solution includes a set of open-source web parts for SharePoint Online that allow for a highly customizable search experience. These web parts can be configured to create tailored search results pages, with features like dynamic filters, sorting, and pagination. PNP Modern Search Extensibility refers to the ability to customize and extend the PnP Modern Search webparts. This is achieved through various tools, components, and practices provided by the PnP community. Why do we need it? Before PnP Modern Search Extensibility was introduced, to achieve the desired changes to the search results, a lot of developers would make changes to the PnP Modern Search solution itself, which would result in the solution being detached from the community version, and if there were major releases done on the community version which were now desired on the cloned version, there would be no way to just deploy the new community package without losing the customizatio...
Read more