1

I want to add lines to an OOTB display template, pic on left and 3 lines on right. Am I missing something? I can post the OOTB template for Pic on left 3 lines on right if needed. Do I need to include something else or have I made a syntax/info error?

<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"> 
<head>
<title>Picture on left, 4 lines on right</title>

<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
<mso:ManagedPropertyMapping msdt:dt="string">&#39;Picture URL&#39;{Picture URL}:&#39;PublishingImage;PictureURL;PictureThumbnailURL&#39;,&#39;Link URL&#39;{Link URL}:&#39;Path&#39;,&#39;Line 1&#39;{Line 1}:&#39;&#39;,&#39;Line 2&#39;{Line 2}:&#39;&#39;,&#39;Line 3&#39;{Line 3}:&#39;&#39;,&#39;Line 4&#39;{Line 4}:&#39;&#39;,&#39;SecondaryFileExtension&#39;,&#39;ContentTypeId&#39;</mso:ManagedPropertyMapping>
<mso:MasterPageDescription msdt:dt="string">This Item Display Template will show a 100x100 picture of the item on the left. The title and the default item description will display to the right of the picture with an additional line that is available for a custom managed property.</mso:MasterPageDescription>
<mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F3851066030020C84A64EF861C4F9C49F8004D50EE47</mso:ContentTypeId>
<mso:TargetControlType msdt:dt="string">;#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://MyCompanyDomain.com/sites/ViewingSite/_catalogs/masterpage/Display Templates/Content Web Parts/Item_Picture4Lines.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
</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="Item_Picture4Lines">

        <!--#_

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

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

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

        var pictureURL = $getItemValue(ctx, "Picture URL");
        var pictureId = encodedId + "picture";
        var pictureMarkup = Srch.ContentBySearch.getPictureMarkup(pictureURL, 100, 100, ctx.CurrentItem, "cbs-picture3LinesImg", line1, pictureId);

        line1.overrideValueRenderer($contentLineText);
        line2.overrideValueRenderer($contentLineText);
        line3.overrideValueRenderer($contentLineText);
        line4.overrideValueRenderer($contentLineText);

        var containerId = encodedId + "container";
        var pictureLinkId = encodedId + "pictureLink";
        var pictureContainerId = encodedId + "pictureContainer";
        var dataContainerId = encodedId + "dataContainer";
        var line1LinkId = encodedId + "line1Link";
        var line1Id = encodedId + "line1";
        var line2Id = encodedId + "line2";
        var line3Id = encodedId + "line3";
        var line4Id = encodedId + "line4";

        var dataDisplayTemplateTitle = "ItemPicture4Lines";

         _#-->
        <div class="cbs-picture3LinesContainer" id="_#= containerId =#_" data-displaytemplate="_#= $htmlEncode(dataDisplayTemplateTitle) =#_">
            <div class="cbs-picture3LinesImageContainer" id="_#= pictureContainerId =#_">
                <!--#_
                if(!linkURL.isEmpty)
                {
                _#-->
                    <a class="cbs-pictureImgLink" href="_#= linkURL =#_" title="_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_" id="_#= pictureLinkId =#_">
                <!--#_
                }
                _#-->
                    _#= pictureMarkup =#_
                <!--#_
                if(!linkURL.isEmpty)
                {
                _#-->
                    </a>
                <!--#_
                }
                _#-->
            </div>
            <div class="cbs-picture3LinesDataContainer" id="_#= dataContainerId =#_">
                <a class="cbs-picture3LinesLine1Link" href="_#= linkURL =#_" title="_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_" id="_#= line1LinkId =#_">
                    <h2 class="cbs-picture3LinesLine1 ms-accentText2 ms-noWrap" id="_#= line1Id =#_"> _#= line1 =#_</h2>
                </a>

                <!--#_
                if(!line2.isEmpty)
                {
                _#-->
                    <div class="cbs-picture3LinesLine2 ms-noWrap" title="_#= $htmlEncode(line2.defaultValueRenderer(line2)) =#_" id="_#= line2Id =#_" > _#= line2 =#_</div>
                <!--#_
                }
                if(!line3.isEmpty)
                {
                _#-->
                    <div class="cbs-pictureLine3 ms-textSmall ms-noWrap" id="_#= line3Id =#_" title="_#= $htmlEncode(line3.defaultValueRenderer(line3)) =#_">_#= line3 =#_</div>
                <!--#_
                }
                _#-->
                <!--#_
                }
                if(!line4.isEmpty)
                {
                _#-->
                    <div class="cbs-pictureLine3 ms-textSmall ms-noWrap" id="_#= line4Id =#_" title="_#= $htmlEncode(line4.defaultValueRenderer(line4)) =#_">_#= line4 =#_</div>
                <!--#_
                }
                _#-->
            </div>
        </div>
    </div>
</body>
</html>

And my error is

Display Error: The display template had an error. You can correct it by fixing the template or by changing the display template used in either the Web Part properties or Result Types.

Template '~sitecollection/_catalogs/masterpage/Display Templates/Content Web Parts/Item_Picture4Lines.js' not found or has syntax errors. (LoadTemplate: ~sitecollection/_catalogs/masterpage/Display Templates/Content Web Parts/Group_Content.js)

Is there a way to check this? Because currently I am editing, publishing, and then going into page edit mode and applying it to the CSWP and only receiving an unhelpful error message. If there is a tool for checking validity of display templates please let me know!

  • List of articles that I may have misread or missed something from: techmikael.com/2014/02/… drisky.co.uk/2014/04/01/… – Michael Ellis Jun 30 '16 at 14:44
  • 1
    I think it would help if you posted or linked to your whole display template. Just seeing your "changes" doesn't give us the context of where your changes fit in. – willman Jun 30 '16 at 14:49
  • In general, it is not a good idea to remove any of the built-in Managed Property Mappings -- it looks like the format for ContentType and SecondaryFileExtension is wrong in what you have presented here -- there should be a mapping between Property Name and display Name. – willman Jun 30 '16 at 14:51
  • Alright, it is just a lot but I didn't edit it at all and have altered the original post – Michael Ellis Jun 30 '16 at 14:57
  • I just removed my additions and it worked, so copying the original and copy/paste/altering the lines related to displaying the 3 lines is just not producing a fourth line for some reason – Michael Ellis Jun 30 '16 at 16:39
0

The error was in here:

<div class="cbs-pictureLine3 ms-textSmall ms-noWrap" id="_#= line4Id =#_" title="_#= $htmlEncode(line4.defaultValueRenderer(line4)) =#_">_#= line4 =#_</div>

But it works just fine now. I can't honestly wrap my head around why it wasn't working. My manager says that perhaps it was an encoding error, sharepoint could have been seeing an extra space or some other character and misinterpreting it. This question seems to have resolved itself after I removed everything I added and added it again in the exact same way.

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.