0

I'm facing a strange error when a user edits a web part page. There are a couple of web parts on this page, like content editor, a search content web part (for displaying some user information from UPS), a content query web part (displaying some news entries in a nicer way), a custom calendar web part (made with spfx) and another search content web part with my display template:

<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"> 
    <head>
    <title>Customer Zwei Zeilen</title>
    <!--[if gte mso 9]>
        <xml>
            <mso:CustomDocumentProperties>
                <mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
                <mso:ManagedPropertyMapping msdt:dt="string">
                    'Link URL'{Link-URL}:'Path','Line 1'{Zeile 1}:'Title','Line 2'{Zeile 2}:'','FileExtension','SecondaryFileExtension'
                </mso:ManagedPropertyMapping>
                <mso:MasterPageDescription msdt:dt="string">
                    Diese Elementanzeigevorlage zeigt ein kleines Miniaturansichtssymbol neben einem Link des Elementtitels an mit einer zusätzlichen Zeile, die für eine benutzerdefinierte, verwaltete Eigenschaft zur Verfügung steht.
                </mso:MasterPageDescription>
                <mso:ContentTypeId msdt:dt="string">
                    0x0101002039C03B61C64EC4A04F5361F385106603
                </mso:ContentTypeId>
                <mso:TargetControlType msdt:dt="string">
                    ;#Content Web Parts;#<
                        /mso:TargetControlType>
                <mso:HtmlDesignAssociated msdt:dt="string">
                    1
                </mso:HtmlDesignAssociated>
            </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="TwoLines">
        <!--#_
            var encodedId = $htmlEncode(ctx.ClientControl.get_nextUniqueId() + "_2lines_");
            var linkURL = $getItemValue(ctx, "Link URL");
            linkURL.overrideValueRenderer($urlHtmlEncodeValueObject);
            var iconURL = Srch.ContentBySearch.getIconSourceFromItem(ctx.CurrentItem);
            var fields = iconURL.split('/');
            var leer = fields[0];
            var layout = fields[1];
            var hive = fields[2];
            var images = fields[3];
            var fileIcon = fields[4];
            switch(fileIcon){
                case "icpdf.png": fileIconUrl="/sites/intranet/_catalogs/masterpage/customer/Images/file-pdf.png";
                console.log("PDF")
                break;
                case "icdocx.png": fileIconUrl="/sites/intranet/_catalogs/masterpage/customer/Images/File-word.png";
                console.log("Word")
                break;
                default: fileIconUrl="/sites/intranet/_catalogs/masterpage/customer/Images/file.png";
                console.log("Default")
            };
            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";
        _#-->
            <div class="Customer-Item" id="_#= containerId =#_" data-displaytemplate="Item2Lines">
                <a class="cbs-ItemLink">
                    <img class="Customer-Thumbnail" src="_#= $urlHtmlEncodeString(fileIconUrl) =#_"/>
                </a>
                <div class="cbs-Detail">
                    <a class="cbs-Line1Link ms-noWrap ms-displayBlock" href="_#= linkURL =#_">
                        _#= line1 =#_
                    </a>
                </div>
            </div>
        </div>
    </body>
</html>

All together work like a charm as long as the content query web part for the news is present. Maybe one of you can give me another pair of eyes and point to where I miss something. Deleting/Adding any other web part works totally fine, but not deleting this one. Here's the error message (one per item which should be shown):

ScriptResource.axd?d=FFxeseaSoWXo9gkSVNkf0f5LtyKoLH2QHaiGhJtbyDsJ3ttCypJjBfBiFg9MElUG1wQdtNwKNSgQw-XbxDVjmEiskDvqsdzF7-wskDQtc64AAkXFgi56fKBgECfv_g8Q_CdKYxOYObvClk-1EumeDKfKQOnYUlwwqimM3_HgPeB_TfyyOLOzQn5_nXwRWKEO0&t=ffffffff999c3159:5 [400][ctl00_ctl48_g_27d8fed2_e5ec_48f1_b2f0_8e47179b8996_csr:Srch.Result][ProcessCategoryMessages][
Message: 
Level: 2 
Code: -1 
Type: RuntimeException 
Details: Cannot read property 'getIconSourceFromItem' of undefined (CoreRender: ~sitecollection/_catalogs/masterpage/Display Templates/Content Web Parts/SVT_Item_TwoLines.js) 
Correlation ID:  
Stack Trace: ]

I'm adding here the Display Templates for the news web part:

Slideshow Handler:

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

<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
<mso:MasterPageDescription msdt:dt="string">Diese Steuerelement-Anzeigevorlage zeigt eine Bildschirmpräsentation mit Bildern an, die alle 5 Sekunden einen Satz von Elementen durchläuft. Es wird immer ein Element gleichzeitig angezeigt, wobei der Titel des Elements das Bild überlagert.</mso:MasterPageDescription>
<mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106601</mso:ContentTypeId>
<mso:TargetControlType msdt:dt="string">;#Content Web Parts;#</mso:TargetControlType>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
</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="Customer-Slideshow">
<!--#_ 
var $noResults = Srch.ContentBySearch.getControlTemplateEncodedNoResultsMessage(ctx.ClientControl);

if (!$isNull(ctx.ClientControl) &&
    !$isNull(ctx.ClientControl.shouldRenderControl) &&
    !ctx.ClientControl.shouldRenderControl())
{
    return "";
}
ctx.ListDataJSONGroupsKey = "ResultTables";

window.cbs_Slideshow_init = function(controlDiv){
    if(!controlDiv.timer){
        cbs_Slideshow_setSlideStatus(controlDiv.children[0].children[0], controlDiv.children[2].children[0], true);
        var timer = document.createAttribute("timer");
        controlDiv.setAttributeNode(timer);

        cbs_addMouseHandlers(controlDiv);

        var numResults = ctx.ClientControl.get_numberOfItems();
        if($isNull(window._slideShowCount))
        {
            window._slideShowCount = {};
        }
        window._slideShowCount[controlDiv.id] = numResults;

        var startIndex = cbs_getStyle(controlDiv, 'direction') != 'rtl' ? 0 : numResults - 1;
        cbs_Slideshow_changeSlide(controlDiv, startIndex);
        cbs_Slideshow_timer(controlDiv, startIndex);
    }
};

window.cbs_addMouseHandlers = function(slideshow)
{
    if($isNull(slideshow) || $isNull(slideshow.children) || slideshow.children.length == 0 || 
        $isNull(slideshow.children[0].children) || slideshow.children[0].children.length == 0){
        return;
    }
    var slideItems = slideshow.children[0].children;
    for(var slideNum = 0; slideNum < slideItems.length; slideNum++){

        (function()
        {
            var currentSlideNumber = slideNum;
            var slideItem = slideItems[currentSlideNumber];
            cbs_addEventListener(slideItem, 'mouseover', function(){ clearTimeout(slideshow.timer); });
            cbs_addEventListener(slideItem, 'mouseout', function(){ cbs_Slideshow_changeSlide(slideshow, currentSlideNumber); }); 
        })();
    }
}

window.cbs_Slideshow_timer = function(controlDiv, currentIdx){
    var TimerDelayMilliSeconds = 5000;
    if($isNull(controlDiv) || controlDiv.children.length == 0){
        setTimeout(function(){cbs_Slideshow_timer(controlDiv, currentIdx); controlDiv = null; currentIdx = null;}, TimerDelayMilliSeconds);
        return;
    }

    currentIdx += cbs_getStyle(controlDiv, 'direction') != 'rtl' ? 1 : -1;
    var numResults = window._slideShowCount[controlDiv.id];
    if(currentIdx >= numResults){
        currentIdx = 0;
    }
    else if(currentIdx < 0)
    {
        currentIdx = numResults - 1;
    }
    clearTimeout(controlDiv.timer);
    controlDiv.timer = setTimeout(function(){cbs_Slideshow_changeSlide(controlDiv, currentIdx); controlDiv = null; currentIdx = null;}, TimerDelayMilliSeconds);
};

window.cbs_Slideshow_onclick = function(target, idx){
    var slideshow = target.parentNode.parentNode;

    clearTimeout(slideshow.timer);
    cbs_Slideshow_changeSlide(slideshow, idx);
};

window.cbs_Slideshow_changeSlide = function(slideshow, slideIndex){
    if($isNull(slideshow)){return;}
    if($isNull(slideshow.children) || slideshow.children.length == 0){cbs_Slideshow_timer(slideshow, slideIndex); return;}

    var slideItems = slideshow.children[0].children;
    var buttonItems = slideshow.children[2].children;
    var numResults = slideItems.length;
    for(var k = 0; k < numResults; k++){
        if(k == slideIndex) {continue;}
        var buttonElement = k < buttonItems.length ? buttonItems[k] : null;
        cbs_Slideshow_setSlideStatus(slideItems[k], buttonElement, false);
    }
    if(slideIndex >= 0 && slideIndex < numResults){
        var buttonElement = slideIndex < buttonItems.length ? buttonItems[slideIndex] : null;
        cbs_Slideshow_setSlideStatus(slideItems[slideIndex], buttonElement, true);
    }

    cbs_Slideshow_timer(slideshow, slideIndex); 
};

window.cbs_Slideshow_setSlideStatus = function(slideElement, buttonElement, isActive){
    if(!$isNull(slideElement)){
        slideElement.style.display = isActive ? "block" : "none";
    }
    if(!$isNull(buttonElement)){
        var activeButtonClassName = "Customer-SlideshowPagingLink-Active";
        var inactiveButtonClassName = "Customer-SlideshowPagingLink-Inactive";
        var oldClassName = isActive ? inactiveButtonClassName : activeButtonClassName;
        var newClassName = isActive ? activeButtonClassName : inactiveButtonClassName;
        buttonElement.className = buttonElement.className.replace(oldClassName, newClassName);
    }
}

window.cbs_getStyle = function(element,propertyName)
{
    var styleValue = null;
    if($isNull(element)){return styleValue;}

    if (element.currentStyle){
        styleValue = element.currentStyle[propertyName];
    }
    else if (window.getComputedStyle){
        styleValue = document.defaultView.getComputedStyle(element,null).getPropertyValue(propertyName);
    }
    return styleValue;
}

window.cbs_addEventListener = function(element, eventName, func)
{
    if(!$isNull(element) && !$isEmptyString(eventName) && !$isNull(func))
    {
        if(!$isNull(element.addEventListener))
        {
            element.addEventListener(eventName, func);
        }
        else if (!$isNull(element.attachEvent))
        {
            eventName = eventName.indexOf("on") == 0 ? eventName : "on" + eventName;
            element.attachEvent(eventName, func);
        }
    }
}

var encodedId = $htmlEncode(ctx.ClientControl.get_nextUniqueId() + "_slideShow_");
var itemsContainerId = encodedId + "container";
var pagingOverlayId = encodedId + "pagingOverlay";
var pagingBarId = encodedId + "pagingBar";
var pagingMoreId = encodedId + "pagingMore";

ctx.OnPostRender = [];

ctx.OnPostRender.push(function(){
    var slideshows = document.querySelectorAll(".Customer-Slideshow");

    for(var i = 0; i < slideshows.length; i++){
        cbs_Slideshow_init(slideshows[i]);
    }
});
_#-->
        <div class="Customer-Slideshow" id="_#= encodedId =#_" data-displaytemplate="ControlSlideshow">
            <div class="Customer-SlideshowItems" id="_#= itemsContainerId =#_">
                _#= ctx.RenderGroups(ctx) =#_
            </div>
<!--#_
if (ctx.ClientControl.get_shouldShowNoResultMessage()){
_#-->
            <div class="Customer-SlideShow-noResults">_#= $noResults =#_</div>
<!--#_
}
_#-->
            <div class="Customer-SlideshowPagingBarOverlay" id="_#= pagingOverlayId =#_"></div>
            <div class="Customer-SlideshowPagingBar" id="_#= pagingBarId =#_">
<!--#_
var MaxNumOfResults = 12;
var numResults = ctx.ClientControl.get_numberOfItems();
var numResultsToShowPaging = Math.min(numResults, MaxNumOfResults);
for(var i = 0; i < numResultsToShowPaging; i++){
    var anchorId = encodedId + "pagingControl" + i;
_#-->
                <a class="Customer-SlideshowPagingLink-Inactive" href="javascript:{}" onclick="cbs_Slideshow_onclick(this, _#= i =#_);" id="_#= anchorId =#_">
                    <span>&nbsp;</span>
                </a>
<!--#_
}
if(numResults > numResultsToShowPaging){
_#-->
                <div class="Customer-SlideshowPaging-More" id="_#= pagingMoreId =#_">
                    <span>&hellip;</span>
                </div>
<!--#_
}
_#-->
            </div>
        </div>
    </div>
</body>
</html>

Items:

<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"> 
<head>
<title>Customer News</title>
    <!--[if gte mso 9]><xml>
    <mso:CustomDocumentProperties>
    <mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
    <mso:ManagedPropertyMapping msdt:dt="string">'Picture URL'{Bild-URL}:'PublishingImage;PictureURL;PictureThumbnailURL','Link URL'{Link-URL}:'Path','Line 1'{Titel}:'Title','Line 2'{Text}:'Body;Description','Line 3'{Autor}:'CreatedBy;Author','Line 4'{Erstellt}:'Created'</mso:ManagedPropertyMapping>
    <mso:MasterPageDescription msdt:dt="string">Diese Elementanzeigevorlage zeigt ein Bild des Elements mit der Aufloesung 150 x 150 auf der linken Seite an. Rechts sind Titel, Erstellungsdatum und Anrisstext zu finden.</mso:MasterPageDescription>
    <mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106603</mso:ContentTypeId>
    <mso:TargetControlType msdt:dt="string">;#Content Web Parts;#</mso:TargetControlType>
    <mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
    </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="Customer_Item_Picture3Lines">
        <!--#_
        var encodedId = $htmlEncode(ctx.ClientControl.get_nextUniqueId() + "_picture3Lines_");
        var linkURL = $getItemValue(ctx, "Link URL");
        linkURL.overrideValueRenderer($urlHtmlEncodeValueObject);
        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, 150, 150, 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 = "ItemPicture3Lines";
        _#-->

        <div class="container-fluid" id="Customer-Slider-Container">
            <div class="row">
                <div class="col-3" id="Customer-Slider-Left">
                    <div class="Customer-Slider-Image">
                        <a class="Customer-Slider_Image-Link" href="_#= linkURL =#_" title="_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_" id="_#= pictureLinkId =#_">
                            _#= pictureMarkup =#_
                        </a>
                    </div>
                </div>
                <div class="col-9" id="Customer-Slider-Right">
                    <div class="row">
                        <div class="col-12" id="Customer-Slider-Title">
                            <a href="_#= linkURL =#_">
                                <h2 class="Customer-Slider-Title-Link" id="_#= line1Id =#_" title="_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_">
                                    _#= line1 =#_
                                </h2>
                            </a>
                        </div>
                        <div class="col-12" id="Customer-Slider-Date">
                            _#= line4 =#_
                        </div>
                        <div class="col-12" id="Customer-Slider-Body">
                            _#= STSHtmlDecode(line2.value) =#_
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.