Sunday, March 6, 2016

How to Fix Ugly Ampersands in a SharePoint Display Template

Paul Hermany, Associate Director/Senior Solutions Architect

It should be fairly well known by now that the managed metadata service will "normalize" term labels using the NormalizeName method (docs).

Thanks to Andy Burns and this post from 2014, we know that the NormalizeName method will replace ampersands with the unicode full width ampersand, replace double quotes with the unicode full width quote, and trim extra spaces between words.

We noticed that SharePoint will convert these unicode characters back to their "denormalized" versions in the refinement panel, but not in the search results (curious). Fortunately, there's a quick fix: a javascript function that undoes the normalization described in Andy Burns' post.

This function will convert the ampersand and quote characters and html encode the string so it can be output directly in the display template.

<!--#_ 

var denormalize = function(value) { 

  return $htmlEncode( 

    value 

      .replace(/\uff06/,"&") 

      .replace(/\uff02/,'"') 

  ); 

}; 

_#-->

Simply call the denormalize function in the display template instead of $htmlEncode

<span>_#= denormalize(ctx.CurrentItem.RefinableString00) =#_</span>