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