none
Hover panel in content search webpart in SharePoint Online RRS feed

  • Question

  • Hello,

    I have build the content search webpart which will show six lines of information in the search results. Please let me know how I can create a hover panel of this.

    I have used this for the hover panel :

    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();

    <div class="cbs-Item" id="_#= $htmlEncode(itemId) =#_" onmouseover="_#= ctx.currentItem_ShowHoverPanelCallback =#_" onmouseout="_#= ctx.currentItem_HideHoverPanelCallback =#_">
                <div id="_#= $htmlEncode(hoverId) =#_" class="ms-srch-hover-outerContainer"></div>

    With this though the hover panel is coming but it is only showing the item title and the type of the document. Please let me know how all the details (like default search) can be shown.

    Many Thanks,

    Nilanjan

    Monday, October 14, 2019 4:19 AM

All replies

  • This is the error I am getting

    Monday, October 14, 2019 10:14 AM
  • Hi Nilanjan,

    You can compare the following example:

    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();
    

    Or you can use out-of-the-box Item_Site_HoverPanel.js directly.

    Then you can add the custom properties you want.

    Open Sharepoint 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

    More information:

    https://blogs.technet.microsoft.com/tothesharepoint/2013/09/12/how-to-display-values-from-custom-managed-properties-in-the-hover-panel-in-sharepoint-server-2013/

    Best regards

    Itch Sun



    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.


    Tuesday, October 15, 2019 2:43 AM
  • Hello,

    It seems the code is similar to mine. But this is not working

    Regards,

    Nilanjan

    Thursday, October 17, 2019 7:08 AM