Display Templates

The new refinement panel for SharePoint 2013 search is build completely different from its predecessor in 2010, and follows the new pattern of showing data using display templates. This makes it really easy to customize and can be done by anyone with html/js/css knowledge, without any previously required xsl knowledge.

The default display templates for refinement panels (Filter_Default.js, Filter_MultiValue.js) use a method for retrieving the title of a search managed property.


This goes through the following steps to find the title for the refinement:

  • It looks in currently loaded js resource files. If the managed property key is found, the result is returned. I have described here how to use js resource files for display templates in SharePoint 2013.
  • It looks in the Search default resource files – these can be found in {15}/Resources with the name pattern Srch.resources.{culture}.resx
  • if nothing is found, returns the name of the managed property

The managed property key it looks for is in the format “rf_RefinementTitle_{ManagedProperty}”. Therefore, if the managed property it currently displays is “LastModifiedTime” it will look for a resource with key “rf_RefinementTitle_LastModifiedTime”.

Standard title for last managed property "LastModifiedTime"                                                                                       Custom title for the same managed property

Considering these steps, you can localize new managed properties in your search center, but you can also change the titles for the existing ones. You can use the default “CustomStrings.js” resource file for the new managed properties titles, or you can create your own js resource file, but you must make sure that the file is loaded in the page. Some display templates automatically load the default resource file, but otherwise you can add a Content Editor web part to the page to load your resource file.

$includeLanguageScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Language Files/MyCustomResourceFile.js");

Display Templates can also use resource files to favor a multilingual user interface for your SharePoint 2013 site. By looking at the default display templates ( e.g. : Item_Picture3Lines.html, Control_List.html etc. ), I have noticed how language files are used.

The first step would be to deploy a resource file to the master page gallery. This should be a JavaScript file which registers a resource dictionary.

{"resourceKey1": "resourceValue1",
"resourceKey2": "resourceValue2",
"resourceKey3": "resourceValue3"});

The resource file should be deployed to the master page gallery of the site in the Language files folder. Here is an example for a display template used in content search web parts : “_catalogs/masterpage/Display Templates/Language Files/en-US/LocalizedFile_Strings.js” . You have to deploy such a file for each culture you plan to support.

From your display template, you would have to reference the above resource file, using

$includeLanguageScript(this.url,"~sitecollection/_catalogs/masterpage/Display Templates/Language Files/{Locale}/LocalizedFile_Strings.js");

In order to reference a key from your file, you can use :

var localizedResource = $resource("resourceKey1");

That;s it! Now you have localized your display template.