2

I am using Scot Hillier's excellent example of a grid display control/item display template set for search results on Sharepoint Online.

I need to employ a copy of the OOTB Hoverpanel for PDF Items instead of the embedded one in his example. I altered the hoverURL assignment as shown below:

                var hoverUrl = "~sitecollection/_catalogs/masterpage/Display Templates/Search/Item_SEDA_HoverPanel.js";

I altered the div tag onmouseover and onmouseout actions to call showHoverPanelCallback rather than the document.getElementByID call that displays the embedded hoverpanel detailed on the item display template.

EDIT: I added the changes described by @Aveenav below

I Changed:

<div style="min-width:150px;width:150px;max-width:150px;display: table-cell;white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;" onmouseover="javascript:document.getElementById('_#= $htmlEncode(hoverId) =#_').style.display = 'block';" onmouseout="javascript:document.getElementById('_#= $htmlEncode(hoverId) =#_').style.display = 'none';">

To This:

<div  id="_#= $htmlEncode(itemId) =#_" class="use-class-name-here" data-displaytemplate="SEDAItem" style="min-width:150px;width:150px;max-width:150px;display: table-cell;white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;" onmouseover="_#=showHoverPanelCallback=#_" onmouseout="_#=hideHoverPanelCallback=#_">

There must be a secret to this that I am unaware of... Any ideas?

EDIT: Item Template Code Added

<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"> 
<head>
<title>SEDA Table Item</title>

<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
<mso:MasterPageDescription msdt:dt="string">Displays the default result item template.</mso:MasterPageDescription>
<mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106603</mso:ContentTypeId>
<mso:TargetControlType msdt:dt="string">;#SearchResults;#</mso:TargetControlType>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:ManagedPropertyMapping msdt:dt="string">
'Title':'Title',
'Path':'Path',
'Description':'Description',
'EditorOWSUSER':'EditorOWSUSER',
'LastModifiedTime':'LastModifiedTime',
'CollapsingStatus':'CollapsingStatus',
'DocId':'DocId',
'HitHighlightedSummary':'HitHighlightedSummary',
'HitHighlightedProperties':'HitHighlightedProperties',
'FileExtension':'FileExtension',
'ViewsLifeTime':'ViewsLifeTime',
'ParentLink':'ParentLink',
'FileType':'FileType',
'IsContainer':'IsContainer',
'SecondaryFileExtension':'SecondaryFileExtension',
'DisplayAuthor':'DisplayAuthor',
'Filename':'Filename',
'TcIDOWSTEXT':'TcIDOWSTEXT',
'RevOWSTEXT':'RevOWSTEXT',
'ImageOWSBOOL':'ImageOWSBOOL',
'ParentImageOWSTEXT':'ParentImageOWSTEXT',
'LastModDateOWSDATE':'LastModDateOWSDATE',
'ECIDOWSTEXT':'ECIDOWSTEXT',
'ECStatusOWSCHCS':'ECStatusOWSCHCS'</mso:ManagedPropertyMapping>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">https://MySite.sharepoint.com/sites/SEDASEARCHTEST/_catalogs/masterpage/Display Templates/Search/Table_SEDADefault.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
<mso:CrawlerXSLFile msdt:dt="string"></mso:CrawlerXSLFile>
<mso:HtmlDesignPreviewUrl msdt:dt="string"></mso:HtmlDesignPreviewUrl>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>
<body>
<div id="Table_Default">
    <!--#_
            if(!$isNull(ctx.CurrentItem) && !$isNull(ctx.ClientControl)){
                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_PDF_HoverPanel.js";
                $setResultItem(itemId, ctx.CurrentItem);
                var k = ctx.DataProvider.get_currentQueryState().k;
                if(!Srch.U.e(k)){
                    ctx.CurrentItem.csr_Path = ctx.CurrentItem.Path + "#search=" + $urlKeyValueEncode(k);
                }
                ctx.CurrentItem.csr_Icon = Srch.U.getIconUrlByFileExtension(ctx.CurrentItem);
                ctx.CurrentItem.csr_OpenControl = "PdfFile.OpenDocuments";

                //Show Hover
                var showHoverPanelCallback = ctx.currentItem_ShowHoverPanelCallback;
                if (Srch.U.n(showHoverPanelCallback)) {
                    showHoverPanelCallback = Srch.U.getShowHoverPanelCallback(itemId, hoverId, hoverUrl);
                }

                //Hide Hover
                var hideHoverPanelCallback = ctx.currentItem_HideHoverPanelCallback;
                if (Srch.U.n(hideHoverPanelCallback)) {
                    hideHoverPanelCallback = Srch.U.getHideHoverPanelCallback();
                }

                //ctx.currentItem_ShowHoverPanelCallback = Srch.U.getShowHoverPanelCallback(itemId, hoverId, hoverUrl);
                //ctx.currentItem_HideHoverPanelCallback = Srch.U.getHideHoverPanelCallback();

                getBackgroundColor = function () {
                  var idParts = itemId.split('_');
                  if((idParts[idParts.length-2].match(/[0-9]+/) % 2) === 0){
                    return '#fff';
                  }
                  else {
                    return '#eee';
                  }
                };


                formatProperties = function (inString) {
                  try {
                    var divString = "<div style='display:list-item;list-style-type:disc;white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;'>";
                    var outString = inString;
                    outString =  outString.replace('</HHTitle>','</div>');
                    outString =  outString.replace('<HHTitle>', divString);
                    outString =  outString.replace('</HHUrl>','</div>');
                    outString =  outString.replace('<HHUrl>', divString);
                    outString =  outString.replace('</c0>','</strong>');
                    outString =  outString.replace('<c0>','<strong>');
                    return outString;
                  }
                  catch(err) {
                    return "";
                  }
                };

                formatDelimiters = function (inString) {
                  try {
                    if (inString.indexOf(';') > -1)
                    { 
                        inString = inString.replace(/;/g,'<br/>'); 
                    }
                    else
                    {
                        inString = inString.replace(', ','<br/>');
                        inString = inString.replace(', ','<br/>');
                        inString = inString.replace(', ','<br/>');
                    }

                    return inString
                  }
                  catch (err) {
                    return "";
                  }
                }

               formatDate = function (inDate) {
                  try {
                    var newDate = new Date(inDate.substring(0,19));
                    return newDate.format('MM/dd/yyyy')

                  }
                  catch (err) {
                    return "";
                  }
                };

              formatAccountName = function (inString) {
                  try {
                    var parts = inString.split('|');
                    if(parts.length===2){
                      return parts[0];
                    }
                    else {
                      return parts[1];
                    }
                  }
                  catch (err) {
                    return "";
                  }
              };
    _#-->
    <div style="display:table;width:840px;">
        <div id="_#= $htmlEncode(itemId) =#_" class="ms-srch-item" data-displaytemplate="PDFItem" style="display: table-row;background-color: _#=getBackgroundColor()=#_;" onmouseover="_#=showHoverPanelCallback=#_" onmouseout="_#=hideHoverPanelCallback=#_">
            <div   style="min-width:150px;width:150px;max-width:150px;display: table-cell;white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;"> 
             <!-- <div style="min-width:150px;width:150px;max-width:150px;display: table-cell;white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;" onmouseover="javascript:document.getElementById('_#= $htmlEncode(hoverId) =#_').style.display = 'block';" onmouseout="javascript:document.getElementById('_#= $htmlEncode(hoverId) =#_').style.display = 'none';"> -->
    <!--#_
            var name = ctx.CurrentItem.Filename.substring(0,12)
            if (ctx.CurrentItem.ImageOWSBOOL.indexOf("True") != -1)
            {
    _#-->
                <a href="_#=ctx.CurrentItem.Path=#_" target="_blank"><strong>_#=name=#_</strong></a>
    <!--#_
            } else {
    _#-->  
                _#=name=#_
    <!--#_
            }
    _#--> 
            </div>
            <div style="min-width:40px;width:40px;max-width:40px;display: table-cell;white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;">
                _#=formatProperties(ctx.CurrentItem.RevOWSTEXT)=#_
            </div>
            <div style="min-width:200px;width:200px;max-width:200px;display: table-cell;white-space:wrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;">
                _#=formatDelimiters(ctx.CurrentItem.Title)=#_
            </div>
            <div style="min-width:100px;width:100px;max-width:100px;display: table-cell;white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;">

                _#=formatDate(ctx.CurrentItem.LastModDateOWSDATE)=#_
            </div>
            <div style="min-width:150px;width:150px;max-width:150px;display: table-cell;white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;">
               <a href="https://mysite.sharepoint.com/sites/SEDASEARCHTEST/Pages/results.aspx#k=_#=ctx.CurrentItem.ParentImageOWSTEXT=#_" target="_blank"> _#=formatProperties(ctx.CurrentItem.ParentImageOWSTEXT)=#_ </a>
            </div>                
            <div style="min-width:80px;width:80px;max-width:80px;display: table-cell;white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;">
               <a href="https://mysite/sites/forms/ecr/_#=ctx.CurrentItem.ECIDOWSTEXT=#_.xml" target="_blank"> _#=ctx.CurrentItem.ECIDOWSTEXT=#_ </a>
            </div>                
            <div style="min-width:100px;width:100px;max-width:100px;display: table-cell;white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;">
                _#=formatProperties(ctx.CurrentItem.ECStatusOWSCHCS)=#_
            </div>            
        </div>
    </div>

    <div id="_#= $htmlEncode(hoverId) =#_" class="ms-srch-hover-outerContainer"></div>
 <!-- 
    <div id="_#= $htmlEncode(hoverId) =#_" style="display:none;padding:15px;width:1050px;">
            <div style="background-color:#fff;box-shadow:10px 10px 5px #888;border:1px #000 solid;padding:10px;">
            <div style="font-weight:bold"> 
                 _#=ctx.CurrentItem.Title=#_
            </div>
            <div>
                 _#=STSHtmlDecode(ctx.CurrentItem.HitHighlightedSummary)=#_
            </div>
        </div>
    </div>
-->        
    <!--#_
            }
    _#-->
</div>
</body>
</html>
2

Should it be ctx.currentItem_HideHoverPanelCallback and not ctx.CurrentItem.csr_HideHoverPanelCallback?

Compare your code with the following snippet: and use the function names (showHoverPanelCallback & hideHoverPanelCallback) on the mouseover and mouseout events.

    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_SEDA_HoverPanel.js";
    $setResultItem(itemId, ctx.CurrentItem); //needed

    //Show Hover
    var showHoverPanelCallback = ctx.currentItem_ShowHoverPanelCallback;
    if (Srch.U.n(showHoverPanelCallback)) {
        showHoverPanelCallback = Srch.U.getShowHoverPanelCallback(itemId, hoverId, hoverUrl);
    }

    //Hide Hover
    var hideHoverPanelCallback = ctx.currentItem_HideHoverPanelCallback;
    if (Srch.U.n(hideHoverPanelCallback)) {
        hideHoverPanelCallback = Srch.U.getHideHoverPanelCallback();
    }

Make sure your html content is similar to the snippet below (the second div is needed)

            <div id="_#= $htmlEncode(itemId) =#_" class="use-class-name-here" data-displaytemplate="SEDAItem" onmouseover="_#= showHoverPanelCallback =#_" onmouseout="_#= hideHoverPanelCallback =#_">

            </div>
            <div id="_#= $htmlEncode(hoverId) =#_" class="ms-srch-hover-outerContainer"></div>
  • Thx @Aveenav, you're right about the typo changes, but I still can't get the hoverpanel to display. I added the Show Hover and Hide Hover snippets from your post and replaced onmouseover="#= ctx.CurrentItem.csr_ShowHoverPanelCallback =#" with onmouseover="#=ShowHoverPanelCallback=#". Is this the solution you were describing? – Barry Prentiss Sep 9 '16 at 20:06
  • #=ShowHoverPanelCallback=# or #=showHoverPanelCallback=# ? – Aveenav Sep 9 '16 at 20:11
  • the editor is stripping out the underbars, but they're in there... – Barry Prentiss Sep 9 '16 at 20:34
  • i meant, did you check the case show... vs Show...? See console for errors and attach the debugger wit breakpoints. – Aveenav Sep 9 '16 at 20:40
  • Thx again @Aveenav, case matters, and I had it wrong... still no hoverpanel though... I am seeing several entries in the console like this: SEC7111: HTTPS security is compromised by res://ieframe.dll/forbidframing.htm It appears there's a violation of the https standards in thee somewhere? – Barry Prentiss Sep 9 '16 at 21:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.