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.

1 comment:

  1. Hello,

    After implementing this though the hover panel is coming but it is only showing Item title and type of the document. Please tell how we can show all the details in the hover panel.

    Thanks,
    Nilanjan

    ReplyDelete