2

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

I have copied the Item_PDF.html and Item_PDF_Hoverpanel.html files for this effort, as all items in this doclib collection are PDF files.

Everything works well, except that the PDF file is not displaying in the hoverpanel. Here's an Image:

Heverpanel without PDF Image display

This is what the same item looks like in the OOTB PDF Template files:

OOTB PDF template with PDF display

Here is my modified Item Template:

<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://MyDomain/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_SEDA_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";
        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) =#_" name="Item" data-displaytemplate="PDFItem" class="ms-srch-item" style="display: table-row;background-color: _#=getBackgroundColor()=#_;" onmouseover="_#= ctx.currentItem_ShowHoverPanelCallback =#_" onmouseout="_#= ctx.currentItem_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;"> 
    <!--#_
            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://MyDomain.sharepoint.com/sites/SEDASEARCHTEST/Pages/results.aspx#k=_#=ctx.CurrentItem.ParentImageOWSTEXT=#_" target="_blank"> <strong>_#=formatProperties(ctx.CurrentItem.ParentImageOWSTEXT)=#_ </strong></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://MyDomain/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>
</body>
</html>

My custom Hoverpanel template is an exact copy of the Item_PDF_Hoverpanel.html, as used in the OOTB example above. Here is the code:

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

<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
<mso:MasterPageDescription msdt:dt="string">Displays a result hover panel tailored for a SEDA PDF document.</mso:MasterPageDescription>
<mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106603</mso:ContentTypeId>
<mso:TargetControlType msdt:dt="string">;#SearchHoverPanel;#</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','ServerRedirectedURL':'ServerRedirectedURL','SectionNames':'SectionNames','SectionIndexes':'SectionIndexes','ServerRedirectedEmbedURL':'ServerRedirectedEmbedURL','ServerRedirectedPreviewURL':'ServerRedirectedPreviewURL'</mso:ManagedPropertyMapping>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">https://slac.sharepoint.com/sites/SEDASEARCHTEST/_catalogs/masterpage/Display Templates/Search/Item_SEDA_HoverPanel.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>
<body>
<div id="Item_SEDA_HoverPanel">
<!--#_
    var i = 0;
    var id = ctx.CurrentItem.csr_id;
    ctx.CurrentItem.csr_ShowFollowLink = true;
    ctx.currentItem_ShowPostToYammer = true;
    ctx.CurrentItem.csr_ShowViewLibrary = true;
    ctx.CurrentItem.csr_ForceOpenLink = true;
_#-->
    <div class="ms-srch-hover-innerContainer ms-srch-hover-wacSize" id="_#= $htmlEncode(id + HP.ids.inner) =#_">
        <div class="ms-srch-hover-arrowBorder" id="_#= $htmlEncode(id + HP.ids.arrowBorder) =#_"></div>
        <div class="ms-srch-hover-arrow" id="_#= $htmlEncode(id + HP.ids.arrow) =#_"></div>
        <div class="ms-srch-hover-content" id="_#= $htmlEncode(id + HP.ids.content) =#_" data-displaytemplate="PDFHoverPanel">
            <div id="_#= $htmlEncode(id + HP.ids.header) =#_" class="ms-srch-hover-header">
                _#= ctx.RenderHeader(ctx) =#_
            </div>
            <div id="_#= $htmlEncode(id + HP.ids.body) =#_" class="ms-srch-hover-body">
<!--#_
                if(!Srch.U.n(ctx.CurrentItem.ServerRedirectedEmbedURL))
                {
                    ctx.CurrentItem.csr_DataShown = true;
                    ctx.currentItem_ShowChangedBySnippet = true;
_#-->
                    <div class="ms-srch-hover-viewerContainer">
                        <iframe id="_#= $htmlEncode(id + HP.ids.viewer) =#_" src="_#= $urlHtmlEncodeString(ctx.CurrentItem.ServerRedirectedEmbedURL) =#_" scrolling="no" frameborder="0px" class="ms-srch-hover-viewer"></iframe>
                    </div>
                    <div class="ms-srch-hover-wacImageContainer">
                        <img id="_#= $htmlEncode(id + HP.ids.preview) =#_" alt="_#= $htmlEncode(Srch.Res.item_Alt_Preview) =#_" onload="this.parentNode.style.display='block';" />
                    </div>
<!--#_
                }
                else
                {
                    ctx.CurrentItem.csr_ShowLastModifiedTime = true;
                    ctx.CurrentItem.csr_ShowAuthors = true;
                }
_#-->
                _#= ctx.RenderBody(ctx) =#_
            </div>
            <div id="_#= $htmlEncode(id + HP.ids.actions) =#_" class="ms-srch-hover-actions">
                _#= ctx.RenderFooter(ctx) =#_
            </div>
        </div>
<!--#_
        if(!Srch.U.n(ctx.CurrentItem.ServerRedirectedEmbedURL)){
            AddPostRenderCallback(ctx, function(){
                HP.loadViewer(ctx.CurrentItem.id, ctx.CurrentItem.id + HP.ids.inner, ctx.CurrentItem.id + HP.ids.viewer, ctx.CurrentItem.id + HP.ids.preview, ctx.CurrentItem.ServerRedirectedEmbedURL, ctx.CurrentItem.ServerRedirectedPreviewURL);
            });
        }
_#-->
    </div>
</div>
</body>
</html>

It appears that the Item Template is not setting the proper value to get past this call in the hoverpanel template: if(!Srch.U.n(ctx.CurrentItem.ServerRedirectedEmbedURL))

Any idea how to resolve this?

2

It's not an exact copy. Your ManagedPropertyMapping does not match. You need to add ServerRedirectedEmbedURL to it:

'ServerRedirectedEmbedURL':'ServerRedirectedEmbedURL'
  • Thx @wjervis! That's exactly what I needed! You're my hero for today! – Barry Prentiss Sep 16 '16 at 14:45

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.