Display Templates and the ManagedPropertyMapping Custom Element.

Display Template Series

Following on from my previous blog Content Search WebPart and Display Templates, I wish to take this further and show how to obtain the properties returned in the search.

In the Header properties of a Display Template, there is a Custom Element called ManagedPropertyMapping. This element Maps fields exposed by search result items into properties available for JavaScript. Used only in item templates.

According to Microsoft the property is comma-delimited list of values that use the following format:

‘property display name'{property name}:’managed property’
example: ‘Known As'{knownas}:’PreferredName’

However while testing to ensure this blog is correct, I’m finding that the property display name and property name is actually the other way round. The examples Microsoft uses always has the property display name and the property name the same. The below picture is setting the ManagedPropertyMapping to the example above.

The below picture is if I swap the property display name and property name around. ( ‘property name'{property display name}:’managed property’ )
example: ‘knownas'{Known As}:’PreferredName’

As you can see from the above pictures, I believe property name and property display name are the opposite way round to what Microsoft have stated.

Property display name
is the property name that shows in the Web Part editing pane when the display template is selected.

Property name is the identifier, in script when obtaining the value of the managed property use would use the property name to call it.

Managed property is a string of one or more managed properties, separated by semicolons. Only in the display template you can map multiple managed properties, when you override using the WebPart edit pane, you can only select one managed property. When multiple properties are selected, they are read in order, and the first value that matches the name of a managed property of the current search item will have its value mapped.

Once a property has been mapped, you can then call it within the JavaScript of the DIV tag section. To obtain a value you would call $getItemValue() passing in current context and the property name. (‘property Name‘{property display name}:’managed property’)

var knownAsValue = $getItemValue(ctx, "knownas");

To use the above variable within the HTML

<div class="cbs-KnownAs ms-nowrap">_#= knownAsValue =#_</div>