3

I have created a display template which is a hover panel. I am wanting to add the page preview thing but at the moment it is not working. I added from a default display template that works but for some reason it just shows a blank box.
Here is my code:

 <html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"> 
    <head>
    <title>News Article 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 web page.</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','PublishingPageContentOWSHTML':'PublishingPageContentOWSHTML','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'</mso:ManagedPropertyMapping>
    <mso:HtmlDesignStatusAndPreview msdt:dt="string">/_catalogs/masterpage/Display Templates/Search/NBSNewsArticle_HoverPanel.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
    <mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
    </mso:CustomDocumentProperties>
    </xml><![endif]-->
    </head>
    <body>
        <div id="Item_WebPage_HoverPanel">
    <!--#_
            var i = 0;
            var id = ctx.CurrentItem.csr_id;
            var loadSiteFrame = false;
            ctx.CurrentItem.csr_ShowFollowLink = true;
            ctx.CurrentItem.csr_ShowViewLibrary = false;
            ctx.CurrentItem.csr_ShowLastModifiedTime = false;
            ctx.CurrentItem.csr_ShowAuthors = false;

            var line1 = $getItemValue(ctx, "PublishingPageContentOWSHTML");
            if(line1.toString().length > 500)
            {
                line1 = line1.toString().substring(0,500)+"...";
            }


    _#-->
            <div class="ms-srch-hover-innerContainer ms-srch-hover-standardSize" 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="WebPageHoverPanel">
                    <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(true) {
                           // ctx.CurrentItem.csr_DataShown = true;
                            //loadSiteFrame = true;
                            var idViewerEncoded = $htmlEncode(id + HP.ids.viewer);
                            var idGlassViewerEncoded = "glass_" + idViewerEncoded;
    _#-->                   
                            <div class="ms-srch-hover-viewerContainer ms-srch-hover-siteViewerContainer">
                                <div id="_#= idGlassViewerEncoded =#_" class="ms-srch-hover-glass-siteViewer"></div>
                                <iframe id="_#=idViewerEncoded=#_" src="_#= $urlHtmlEncode(ctx.CurrentItem.csr_Path) =#_" scrolling="no" frameborder="0px" class="ms-srch-hover-siteViewer">
                                </iframe>                            
                            </div>
    <!--#_                                                 
                        }
    _#-->
    <div> Description: _#= line1 =#_ </div>
    <!--#_
                        var path = !Srch.U.w(ctx.CurrentItem.ParentLink) ? ctx.CurrentItem.ParentLink : ctx.CurrentItem.SiteName;
                        if(!Srch.U.w(path))
                        {                         
                            var siteResultsId = id + "_siteSearchResults";
    _#-->
                            <div id="_#= $htmlEncode(siteResultsId) =#_">
                            </div>
    <!--#_
                            AddPostRenderCallback(ctx, function()
                            {
                                var query = "";
                                var dataProvider = ctx.ClientControl.get_dataProvider();
                                if (dataProvider) {
                                    var states = dataProvider.get_currentQueryState()
                                    if (states) {
                                        query = states.k;
                                    }
                                }

                                Srch.SiteSearchUtil.populateSiteSearchResults(path, siteResultsId, query, id + HP.ids.noData);
                            });
                        } 
    _#-->   
                        _#= ctx.RenderBody(ctx) =#_                 
                    </div>          
                    <div id="_#= $htmlEncode(id + HP.ids.actions) =#_" class="ms-srch-hover-actions">                  
                        _#= ctx.RenderFooter(ctx) =#_
                    </div>
                </div>
    <!--#_          
                if(loadSiteFrame){
                    AddPostRenderCallback(ctx, function(){
                        HP.loadSiteViewer(ctx.CurrentItem.id, ctx.CurrentItem.id + HP.ids.inner, id + HP.ids.viewer, ctx.CurrentItem.csr_Path, "glass_" + id + HP.ids.viewer);
                    });
                }
    _#-->
            </div>
        </div>
    </body>
    </html>
2

It looks like you hard coded loadsiteframe to false so the LoadSiteViewer is not getting called. Try debugging the JavaScript and see what happens when you change it to true.

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.