1

In an item display template you are give a lookup/dropdown list for properties to display from the content search web part. I want to understand how these are properly encoded and displayed using javascript.

To display a managed property using an existing item display template as a customization you add it to the managed properties xml line at the top of the hoverpanel and item display templates. The below example is not syntactically correct but illustrates what I want to add correctly.

<mso:ManagedPropertyMapping msdt:dt="string">Path/Link/Title/Etc.,'Hover 1'{Hover 1}:'SizeOWSTEXT','Hover 2'{Hover 2}:'LengthOWSTEXT'</mso:ManagedPropertyMapping>

So this will add two properties, Hover 1 and Hover 2, that are by default SizeOWSTEXT and LengthOWSTEXT. But I want my user to be able to change these, or for myself to not need multiple hover panels in order to customize it for specific pages of the product catalog I am making.

Then The javascript does some stuff I kind of understand but want to translate into my hover panel. I am able to add extra properties by copying what is below and modifying it. I cannot use what is below to enable customization from the web part to the hover panel by adding my custom version for hover 1 and hover 2 to either the item display template or the hover panel file.

This is from the item display template html file

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

var line1 = $getItemValue(ctx, "Line 1");
line1.overrideValueRenderer($contentLineText);

This won't work when I plug in the Hover 1 or Hover 2, how can I achieve that for the hover display?

This is in the hover panel html file.

var encodedId = $htmlEncode(ctx.ClientControl.get_nextUniqueId() + "_picture4Lines_");
var hover1 = $getItemValue(ctx, "Hover 1");
hover1.overrideValueRenderer($contentLineText); 
var hover1Id = encodedId + "hover1";

And this is the actual display on the hover panel

<!--#_
if(!hover1.isEmpty)
{
_#-->
     <div class="ms-noWrap" id="_#= hover1Id =#_" title="_#= $htmlEncode(hover1.defaultValueRenderer(hover1)) =#_">_#= hover1 =#_</div>
<!--#_
}
_#-->

and lastly, this showed me how to even add the custom managed properties at all. But not how to make them modifiable from https://technet.microsoft.com/en-us/library/dn794247.aspx

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.