Tuesday, May 14, 2013

SharePoint 2013 Search: Adding a Hover Panel to the Video Horizontal Display Template


Check out the whole SharePoint 2013 Solution Series
New Titles Added Weekly!

In my previous post on Enhancing Video Results, I demonstrated how to display Video results in a horizontal fashion using the out-of-the-box Video horizontal template. However, this display does not incorporate a hover panel and thus nothing pops up when mousing over the results. No problem. I figured out how to add a hover panel to the template in just a few easy steps.

First, navigate to the Search Center display templates via SharePoint Designer 2013, similiar to the process explained in this post. For simplicity I am going to modify the display template file in-place but the recommended approach would be to make a copy and use that.

Locate the Item_Video_CompactHorizontal.html file, right-click, and select Edit File in Advanced Mode:



 
 
Paste this code at the top as shown in the image below:
 
var id = ctx.ClientControl.get_nextUniqueId();
var itemId = id + Srch.U.Ids.item;
var hoverId = id + Srch.U.Ids.hover;
var hoverUrl = "~sitecollection/_catalogs/masterpage/Display Templates/Search/Item_Video_HoverPanel.js";
$setResultItem(itemId, ctx.CurrentItem);
ctx.currentItem_ShowHoverPanelCallback = Srch.U.getShowHoverPanelCallback(itemId, hoverId, hoverUrl);
ctx.currentItem_HideHoverPanelCallback = Srch.U.getHideHoverPanelCallback();


Notice I am using the out-of-the-box Item_Video_HoverPanel .

Next, scroll down to the main <div> and change the id to use _#= $htmlEncode(itemId) =#_



(Click on image to display larger)
 
 Add the following code to that very same <div> tag:

onmouseover="_#= ctx.currentItem_ShowHoverPanelCallback =#_"
onmouseout="_#= ctx.currentItem_HideHoverPanelCallback =#_"
(Click on image for larger view)
 
Now add the following <div> after the first <div>:
 
<div id="_#= $htmlEncode(hoverId) =#_" class="ms-srch-hover-outerContainer"></div>




 
Save the changes to the template. Navigate to your Search Center and perform a search that returns Video results:
 
 

 
 
Hovering over the results shows the hover panel preview!!!
 
 
 





 

7 comments:

  1. Great article! I actually used it just to learn how to add a hover panel to a display template and it worked great!

    ReplyDelete
  2. very useful, here I have an issue, I created a custom result blocks for video results. My custom query for getting particular video results is working , but the result block is not triggering .I tried with multiple queries but still it's same. don't know why, could you please let me know what exactly I'm missing in it? Thanks in Advance

    ReplyDelete
    Replies
    1. I would need to explore your settings and configuration to see what you are missing.

      We can do a tutor session to explore and resolve:https://www.wyzant.com/Tutors/stevetheman

      Delete
    2. https://www.wyzant.com/Tutors/stevetheman

      Delete
  3. any way to extract the search result in excel ?

    ReplyDelete
    Replies
    1. My gut reaction is to use javascript to call the Search API and generate .CSV file

      Delete