Sunday, 9 June 2013

Sharepoint 2013 Search - Adding a hover panel to a content search webpart display template.

In sharepoint 2013 there is a new powerful webpart called Content By Search Webpart which is a substitute  of CQWP and also get rids of XSLT and uses search instead.

In Content Search WebPart there are in total 7 default display templates like Two Lines, Video,Picture on top 3 lines on bottom etc.

But all of the these template does not have a hover panel like we see in a search results. See below image





So to add hover panel to content search display templates we need to customize the template.

Open designer.
1.Go To >> All files >> _catalogs >> master page >> display templates >> content webparts >> your template ( in my case item_pictureontop.html)
2. right-click, and select Edit File in Advanced Mode:
3. 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_Site_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_Site_HoverPanel.js .As i want my results to display like a site item.You can use any OOTB hover js file or you create new one also.

4. Next, scroll down to the main <div> and change the id to use _#= $htmlEncode(itemId) =#_
Add the following code to that very same <div> tag:

onmouseover="_#= ctx.currentItem_ShowHoverPanelCallback =#_" onmouseout="_#= ctx.currentItem_HideHoverPanelCallback =#_"


5. Now add the following <div> after the first <div>:
<div id="_#= $htmlEncode(hoverId) =#_" class="ms-srch-hover-outerContainer"></div>
Inside this div the hover content will be rendered for each item.
Save the changes to the template.
This is how we can add a hover panel to content search webpart display templates.