Display Template - Launching link in a new window RRS feed

  • Question

  • I have a customer with very difficult requirements, and I am struggling to edit Display Templates to meet their needs.
    Suffice to say they wanted to show only two Custom Managed Properties in search results, and they did not want the Title to show as the main link.

    I got through most of this, the only thing I am struggling with is launching the link in a new window.  The search results have a mix of Documents and "Link To Documents", and we need to have the Link to Document open in a new window.

    I have tried modifying the Common Item Body to add the "_blank" and it works, but I struggled to return the Custom Managed Properties the way they wanted to see them, so I had to abandon it.

    I am essentially now using a modified 2Lines Display Template as the Search Display Template, and I am now struggling on how to modify the way the link works to get them to open in a new window (all links can open in a new window, not just "Link to Document"  I have struggled with this back and forth for close to 6 hours now because I am not an HTML programmer and I don't have one available.

    My code is below, can someone please help me understand how I might get the links from this Display Template to open in a new window?

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

    <!--[if gte mso 9]><xml>
    <mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
    <mso:ManagedPropertyMapping msdt:dt="string">'Link URL'{Link URL}:'Path','Line 1'{Line 1}:'DocNumberOWSTEXT','Line 2'{Line 2}:'DocTitleOWSTEXT','Line 3'{Line 3}:'LastModifiedTime','FileExtension','SecondaryFileExtension'</mso:ManagedPropertyMapping>
    <mso:MasterPageDescription msdt:dt="string">This Item Display Template will show a small thumbnail icon next to a hyperlink of the item title, with an additional line that is available for a custom managed property.</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:CrawlerXSLFile msdt:dt="string"></mso:CrawlerXSLFile>
    <mso:HtmlDesignPreviewUrl msdt:dt="string"></mso:HtmlDesignPreviewUrl>
    <mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
    <mso:HtmlDesignStatusAndPreview msdt:dt="string"> Templates/Search/Item_SaabQSThreeLinesSearch.HTML, Conversion successful.</mso:HtmlDesignStatusAndPreview>


                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.
            $includeLanguageScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Language Files/{Locale}/CustomStrings.js");

            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="TwoLines">
    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_Default_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() + "_3lines_");

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

    var line1 = $getItemValue(ctx, "Line 1");
    var line2 = $getItemValue(ctx, "Line 2");
    var line3 = $getItemValue(ctx, "Line 3");

    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 line3Id = encodedId + "line3";
            <div class="cbs-Item" id="_#= $htmlEncode(itemId) =#_" data-displaytemplate="Item3Lines" onmouseover="_#= ctx.currentItem_ShowHoverPanelCallback =#_" onmouseout="_#= ctx.currentItem_HideHoverPanelCallback=#_" >
      <div id="_#= $htmlEncode(hoverId) =#_" class="ms-srch-hover-outerContainer"></div>
                <a class="cbs-ItemLink" title="_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_" id="_#= pictureLinkId =#_>
                <div class="cbs-Detail" id="_#= dataContainerId =#_">
                    <a class="cbs-Line1Link ms-noWrap ms-displayBlock" target="_blank" href="_#= linkURL =#_" title="_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_" id="_#= line1LinkId =#_">_#= line1 =#_</a>
                    <div class="cbs-Line2 ms-noWrap" title="_#= $htmlEncode(line2.defaultValueRenderer(line2)) =#_" id="_#= line2Id =#_">_#= line2 =#_</div>
                    <div class="cbs-Line2 ms-noWrap" id="_#= line3Id =#_" title="_#= $htmlEncode(line3.defaultValueRenderer(line3)) =#_">_#= line3 =#_</div>


    Saturday, March 18, 2017 10:10 PM

All replies

  • Hi,

    Please add target="_blank" to all the <a/> tags in your display template.

    <a class="cbs-ItemLink" target="_blank" title="_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_" id="_#= pictureLinkId =#_>

    Or we can also use JavaScript to add the target="_blank" to all the search results, add the code below into a script editor web part into your page.

    <script src="//" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
    	$(".cbs-Item a").each(function(){

    Best Regards,


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact

    Monday, March 20, 2017 2:21 AM