Unable to use $getItemValue for a field not defined inside the properties mapping , inside Display Templete

Question

I am working on a custom template which is being used inside a Content Search WebPart inside my team site collection. now the display template provide the ability to render a dialog beside each item , when users clicks on "...", as follow:-

where the dialog will render the following info:-

• Item title
• View properties link
• Edit properties link.

Now I am trying to render the item description field instead of the item title, so inside the item display template i added the following. which mainly retrive the "CommentOWSMTXT" value from the current item, and add it to the ref parameter inside a <span>:-

    var desc = $htmlEncode(ctx.CurrentItem.CommentOWSMTXT);
    var renderdesc = String.format('{0}', desc);
//code goes here...
    <span title="Open Menu" class="NotificationDiv ms-ellipsis-a" rel="_#= viewPropUrl =#_" ref="_#= renderdesc =#_" path="_#= linkURL =#_" style="cursor: pointer; margin-top: 3px; float: right;">

and inside the table control display template it will use the ref parameter defined above to build the dialog, as follow:-

 if (targetElement.length > 0) {
            for (var i = 0; i < targetElement.length; i++) {
                var elm = targetElement[i];
                var calloutOptions = new CalloutOptions();
                calloutOptions.ID = 'notificationcallout-' + i;
                calloutOptions.launchPoint = elm;
                calloutOptions.beakOrientation = 'leftRight';
                calloutOptions.content = String.format('<a href="{0}&PageType=4" onclick="javascript:tableLayoutDT.redirectToPropertiesUrl(this, \'{1}\');return false;" title="View properties">View properties</a><br /><a href="{0}&PageType=6" onclick="javascript:tableLayoutDT.redirectToPropertiesUrl(this, \'{1}\');return false;" title="Edit properties">Edit properties</a>', elm.getAttribute('rel'), elm.getAttribute('path'));
                calloutOptions.title = elm.getAttribute('ref');

                var displayedPopup = CalloutManager.createNew(calloutOptions);
            }

now the above will render empty results inside the dialog , but if i replace the var desc = $htmlEncode(ctx.CurrentItem.CommentOWSMTXT); with var desc = $htmlEncode(ctx.CurrentItem.Path); Or var desc = $htmlEncode(ctx.CurrentItem.Created); i can render the Path and the created Date,, but not sure why i can not do the same for the CommentOWSMTXT which represents the items' Description field ?

Approach 2.

I tried a different appraoch , where i defined the following inside the mapping, to map the DESC CC with CommentOWSMTXT:-

<mso:ManagedPropertyMapping msdt:dt="string">ListID','ListItemID','ContentTypeId','DESC CC':'CommentOWSMTXT','Link URL':'Path','Property 1':'Title','....

then i define the following :-

var DESCCC = $getItemValue(ctx, "DESC CC");
var renderdesc = String.format("The item Description = "+'{0}'+".", DESCCC);

but i will only get the static text as follow:-

EDIT Now I added the "CommentOWSMTXT" to the Properties Mapping list inside my web part and i got the above working well.

but in my case i do not want to add the "CommentOWSMTXT" to the Properties Mapping list (as it will consume a lot of space on the web page) and i want to only show it inside the call-out dialog.

Answer 1

Try add yourCommentOWSMTXT at first place <mso:ManagedPropertyMapping msdt:dt="string">'CommentOWSMTXT','ListID','ListItemID', ...

then save item.html display template.

Go to your page where is cswp and edit page, edit webpart and change control and item to different ones and click apply wp settings.

After apply, set to your desired control and item again and click OK.

Sometimes wp get stuck and you loose one day trying to get it work.

Try this Item_Ultimate_Diagnostic.html to see all managed properties on item

---

Root cause

Why SharePoint 2013 Search Display Templates are not reflecting the changes made

In the properties of the display template files if the managed property not mapped.

SP did not created the corresponding JavaScript file if the managed property not mapped (like in your case when you try multiple times to map managed property)

Answer 2

You need to add your managed property mapping as below:

<mso:ManagedPropertyMapping msdt:dt="string">ListID','ListItemID','CommentOWSMTXT','ContentTypeId','Link URL':'Path','Property 1':'Title','Property 2':'','Property 3':'','Property 4:'','Property 5':'','Property 6':'','Property 7':'','Property 8':'','Property 9':'','Property 10':'','FileExtension','SecondaryFileExtension'</mso:ManagedPropertyMapping>

In your item display template, use the code as below:

var desc = $htmlEncode(ctx.CurrentItem.CommentOWSMTXT);
var renderdesc = String.format('{0}', desc); 
//render on the UI as below
<span title="Open Menu" class="NotificationDiv ms-ellipsis-a" rel="_#= viewPropUrl =#_" ref="_#= renderdesc =#_" path="_#= linkURL =#_" style="cursor: pointer; margin-top: 3px; float: right;">

When you do this, you don't need to specify it in the managed property dropdown. After this, it started working at my end. The text 'Gebeurtenis' in the below screenshot is coming from my managed property:

My mappings from CSWP UI are as below. I have added only Path and Title values.

Explanation -

When adding additional property mappings to a display template, most of the time you will add them like this:

'property Name'{property display name}:'managed property'
'property Name':'managed property'

If you add properties mappings to the ManagedPropertyMapping tag like the two examples above, they will become available in the UI of the Content by Search Web Part.

There is another way of adding properties to your template and this is by just defining the managed property name like this:

'managed property'

Important: you do not define a property name and mappings, only the managed property. If you do it like this, you create a "private" property for your template. It cant be modified by users from the UI.

If you take a closer look at one of the OOTB CSWP display templates, you will find the mapping as below:

<mso:ManagedPropertyMapping msdt:dt="string">'Link URL'{Link URL}:'Path','Line 1'{Line 1}:'Title','Line 2'{Line 2}:'','FileExtension','SecondaryFileExtension'</mso:ManagedPropertyMapping>

Here, FileExtension is used as private property and cant be modified by user from UI. It is used internally for providing File Extension and related icons for a document.

Reference - Adding managed property mappings to your display templates which may not be altered

Display template code:

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

<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
<mso:ManagedPropertyMapping msdt:dt="string">ListID','ListItemID','CommentOWSMTXT','ContentTypeId','Link URL':'Path','Property 1':'Title','Property 2':'','Property 3':'','Property 4:'','Property 5':'','Property 6':'','Property 7':'','Property 8':'','Property 9':'','Property 10':'','FileExtension','SecondaryFileExtension'</mso:ManagedPropertyMapping>
<mso:MasterPageDescription msdt:dt="string">This is the item row template, use this template in combination with the List Table Control template.</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:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">https://mijnszr.sharepoint.com/_catalogs/masterpage/Display Templates/Content Web Parts/Item_List_Item.html, De conversie is voltooid.</mso:HtmlDesignStatusAndPreview>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>

<body>
    <div id="TwoLines">
<!--#_
// Give up your names for the properties in the following array
var propertyNames = {"Property 1":"Property 1 header value","Property 2":"Property 2 header value"};

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

var linkURL = $getItemValue(ctx, "Link URL");
linkURL.overrideValueRenderer($urlHtmlEncode);
var iconURL = Srch.ContentBySearch.getIconSourceFromItem(ctx.CurrentItem);

var listID = $getItemValue(ctx, 'ListID');
var listItemID = $getItemValue(ctx, 'ListItemID');
var ContentTypeId = $getItemValue(ctx, 'ContentTypeId');

var rowId = encodedId + "row";
var editCellId = rowId + "_cell";

var currentItemIdx = ctx.CurrentItemIdx + 1;
var alternating = currentItemIdx % 2 === 0 ? "ms-alternating" : "";

if (currentItemIdx === 1) {
_#-->
    <thead>
        <tr>
            <!--#_ 
            // Show the file icon
            _#-->
            <th class="ms-vh-icon ms-minWidthHeader">
                <img width="16" height="16" border="0" src="/_layouts/15/images/icgen.gif">
            </th>
            <!--#_ 

            // Show the properties that aren't empty
            for(var i = 1; i <= 10; i++) { 
                var property = $getItemValue(ctx, String.format("Property {0}", i));
                if(property.managedPropertyName !== String.format("Property {0}", i)) {
                    var propertyName = typeof propertyNames[property.propertyLookupName] === "undefined" ? property.managedPropertyName : propertyNames[property.propertyLookupName];
            _#-->
            <th class="ms-vh2">
                _#= propertyName =#_ 

                <span id="_#= property.managedPropertyName.replace(/ /g, '-') =#_">
                    <span style="" class="sortarrow ms-sortarrowup-iconouter" ></span>
                    <a id="_#= property.managedPropertyName =#_ASC" href="#" title="Ascending" onclick="$getClientControl(this).sortOrRank('_#= property.managedPropertyName =#_ASC');return false;">
                        <img alt="Ascending" src="/_layouts/15/images/sortaz.gif">
                    </a>
                    <a id="_#= property.managedPropertyName =#_DES" href="#" title="Descending" onclick="$getClientControl(this).sortOrRank('_#= property.managedPropertyName =#_DES');return false;">
                        <img alt="Descending" src="/_layouts/15/images/sortza.gif">
                    </a>
                </span>
            </th>
            <!--#_ 
                }
            } 
            _#-->
        </tr>
    </thead>
    <tbody>
<!--#_
}
_#-->
        <tr id="_#= rowId =#_" class="_#= alternating =#_ ms-itmHoverEnabled ms-itmhover">
            <td class="ms-cellstyle ms-vb-icon">
            <!--#_ if(!iconURL.isEmpty) { _#-->
                <img src="_#= iconURL =#_" />
                <span id="_#= editCellId =#_"></span>
            <!--#_ 
            } else {
            _#-->
                <img width="16" height="16" border="0" src="/_layouts/15/images/icgen.gif">
            <!--#_ 
            }
            _#-->
            </td>

            <!--#_
            // Show the properties that aren't empty
            for(var i = 1; i <= 10; i++) { 
                var property = $getItemValue(ctx, String.format("Property {0}", i));
                if (property.managedPropertyName !== String.format("Property {0}", i)) {
            _#-->
                <td class="ms-cellstyle ms-vb2">
            <!--#_
                    if(!property.isEmpty)
                    {
                        var value = i === 1 ? String.format("<a href='{0}' class='ms-listlink'>{1}</a>", linkURL, property) : property;
            _#-->
                    _#= value =#_
            <!--#_
                        if (i === 1 && !listID.isEmpty && !listItemID.isEmpty && !ContentTypeId.isEmpty) {
                            var desc = $htmlEncode(ctx.CurrentItem.CommentOWSMTXT);
                            var renderdesc = String.format('{0}', desc);
                            var viewPropUrl = String.format('/_layouts/15/listform.aspx?ListId={0}&ID={1}&ContentTypeID={2}&Source={3}', listID, listItemID, ContentTypeId, window.location.href.split('#')[0]);
            _#-->
                            &nbsp;&nbsp;
                            <span title="Open Menu" class="NotificationDiv ms-ellipsis-a" rel="_#= viewPropUrl =#_" ref="_#= renderdesc =#_" path="_#= linkURL =#_" style="cursor: pointer; margin-top: 3px; float: right;">
                                <img alt="Open Menu" src="/_layouts/15/images/spcommon.png" class="ms-ellipsis-icon">
                            </span>
            <!--#_
                        }
                    }
            _#-->
                </td>
            <!--#_
                }
            } 
            _#-->
        </tr>
<!--#_
if (currentItemIdx === ctx.CurrentGroup.RowCount) {
_#-->
    </tbody>
<!--#_
}
_#-->
    </div>
</body>
</html>