PDF Files not opening when clicked from the content search web part

sharepoint.stackexchange https://sharepoint.stackexchange.com/questions/246368

Question

I wrote a custom display template for a content search web part that shows recent documents edited or modified by a user. I added hover functionality as well to allow users to hover.

For some reason though, PDF files are not opening when clicked from the web part. It just reloads the page and does not open at all. All other files are opening fine and I can edit as well like word file, excel etc.

Below is the Display template code I wrote by copy pasting code from two lines template initially and then added other customization inside:

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

<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
<mso:ManagedPropertyMapping msdt:dt="string">&#39;Link URL&#39;{Link URL}:&#39;Path&#39;,&#39;Line 1&#39;{Line 1}:&#39;Title&#39;,&#39;Line 2&#39;{Line 2}:&#39;&#39;,&#39;FileExtension&#39;,&#39;ServerRedirectedEmbedURL&#39;,&#39;ServerRedirectedEmbedURL&#39;,&#39;HitHighlightedProperties&#39;:&#39;HitHighlightedProperties&#39;,&#39;HitHighlightedSummary&#39;:&#39;HitHighlightedSummary&#39;,&#39;ParentLink&#39;:&#39;ParentLink&#39;</mso:ManagedPropertyMapping>
<mso:MasterPageDescription msdt:dt="string">This Item Display Template will show a preview and properties for Record Center Customer Documents</mso:MasterPageDescription>
<mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106603</mso:ContentTypeId>
<mso:TargetControlType msdt:dt="string">;#SearchResults;#Content Web Parts;#</mso:TargetControlType>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">https://***.sharepoint.com/_catalogs/masterpage/Display Templates/Content Web Parts/TE_Item_RecentDocs.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>

    <!--
            Warning: Do not try to add HTML to this section. Only the contents of the first <div>
            inside the <body> tag will be used while executing Display Template code. Any HTML that
            you add to this section will NOT become part of your Display Template.
    -->
    <script>
        $includeLanguageScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Language Files/{Locale}/CustomStrings.js");
    </script>

    <!--
        Use the div below to author your Display Template. Here are some things to keep in mind:
        * Surround any JavaScript logic as shown below using a "pound underscore" (#_ ... _#) token
        inside a comment.

        * Use the values assigned to your variables using an "underscore pound equals"
        (_#= ... =#_) token.
    -->

    <div id="RC_CustomerDocuments">
<!--#_

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_Word_HoverPanel.js";
$setResultItem(itemId, ctx.CurrentItem);
ctx.currentItem_ShowHoverPanelCallback = Srch.U.getShowHoverPanelCallback(itemId, hoverId, hoverUrl);
ctx.currentItem_HideHoverPanelCallback = Srch.U.getHideHoverPanelCallback();

var encodedId = $htmlEncode(ctx.ClientControl.get_nextUniqueId() + "_2lines_");

var linkURL = $getItemValue(ctx, "Link URL");

linkURL.overrideValueRenderer($urlHtmlEncode);
var iconURL = Srch.ContentBySearch.getIconSourceFromItem(ctx.CurrentItem);

var line1 = $getItemValue(ctx, "Line 1");
var line2 = $getItemValue(ctx, "Line 2");
line1.overrideValueRenderer($contentLineText);
line2.overrideValueRenderer($contentLineText);

var containerId = encodedId + "container";
var pictureLinkId = encodedId + "pictureLink";
var pictureId = encodedId + "picture";
var dataContainerId = encodedId + "dataContainer";
var line1LinkId = encodedId + "line1Link";
var line1Id = encodedId + "line1";
var line2Id = encodedId + "line2";
var loadSiteFrame = true;
ctx.CurrentItem.csr_Path = ctx.CurrentItem.Path;
var serverRedirectedEmbedURL = $getItemValue(ctx, 'ServerRedirectedEmbedURL');
_#-->


        <div class="cbs-Item" name="Item" id="_#= $htmlEncode(itemId) =#_" data-displaytemplate="RC_CustomerDocuments" onmouseover="_#= ctx.currentItem_ShowHoverPanelCallback =#_" onmouseout="_#= ctx.currentItem_HideHoverPanelCallback =#_">
            <div id="wrapper">
                <div class="ms-srch-hover-outerContainer" id="_#= $htmlEncode(hoverId) =#_" ></div>
            </div>
            <a class="cbs-ItemLink" title="_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_" id="_#= pictureLinkId =#_">
                <img class="cbs-Thumbnail" src="_#= $urlHtmlEncode(iconURL) =#_" alt="_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_" id="_#= pictureId =#_" />
            </a>
            <div class="cbs-Detail" id="_#= dataContainerId =#_">
                <a class="cbs-Line1Link ms-noWrap ms-displayBlock" style="word-wrap:break-word !important;width:200px" href="_#= linkURL =#_" title="_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_" id="_#= line1LinkId =#_">_#= line1 =#_</a>
<!--#_
if(!line2.isEmpty)
{
_#-->
                <div class="cbs-Line2 ms-noWrap" title="_#= $htmlEncode(line2.defaultValueRenderer(line2)) =#_" id="_#= line2Id =#_">_#= line2 =#_</div>
<!--#_
}
_#-->
                </div>
        </div>  
    </div>
</body>
</html>

FYI, Inside Property Mappings, I have set the LinkURL to ServerRedirectedURL. Can someone please help me modify this code so that users can also open PDF documents when clicked, thanks in advance.

Était-ce utile?

La solution

In SharePoint Online the best way to achieve opening of documents in the browser is by appending web=1 as a query string parameter to the file URL like https://tenant.sharepoint.com/Documents/file.docx?web=1.

Now, for office documents, like Word, Excel, PowerPoint, etc the serverRedirectedEmbedURL property is populated however for other document types like PDF it is null. Therefore, your page was reloaded because it didnt have the href value for PDF documents.

So, instead of checking the file type and using if loop, best option for you would be to simply append ?web=1 to the file path as below. You needn't modify the managed property mapping. When you do this, it will not only open the office documents in the browser but also PDF documents as well. 

var linkURL = $getItemValue(ctx, "Link URL"); 
linkURL.value = linkURL.value + "?web=1";

When you do this, it will open documents in the browser using OWA, if possible, but otherwise it will download them.

References - Making a Link to a Document in SharePoint Open in Browser

Link to "open in browser" with Office Web Apps

Licencié sous: CC-BY-SA avec attribution
Non affilié à sharepoint.stackexchange
scroll top