customizing existing Refinement Display Templates and adding Count to the refinement in SharePoint 2013

Hi All,

In our current example we are going to see the customizing the existing Refinement Display Template and adding Count to the Refinement.

In SharePoint 2013, the refinement counts have been removed next to each Property. In our current example we are going to bringing those back.

Changing the look and feel of the Search Refiners can be done by using the display Templates.

To View all the current search refiner display templates, navigate to Master Page Gallery, Which can be found under Site settings->Web Designer Galleries.

click on the Master Pages and Page layouts link.

Once we are in the Master Page Gallery, at the very top there is a folder called Display Templates.

Opening this folder we will see several more folders that correspond to different areas in SharePoint.

Open Filters folder to view all available display templates that come Out of the Box with SharePoint 2013.

Each Display Template has a corresponding JavaScript file associated with it. SharePoint will use this JS file to render the Display Templates. There are lot of display templates are available, In our example we are going to use "Filter_Default".(Make a copy of it before doing any changes)

Check the box next to the Template and then choose download from the ECM(...)

After downloaded a copy, we can open it in VS or any editor .

Search for "ShowCounts" flag in the Script, by default in SharePoint 2013 It is set as false. Change this to true.

this.Options = {

        ShowClientPeoplePicker: false,

        ShowCounts: true

    };

For a better look we also bold these count. Scroll down the page and find the area where the counts will be displayed. We will see an IF statement.Simply add a style attribute setting the font-weight to bold.

if (showCounts) {

ms_outHtml.push(''

,'                    <div id="RefinementCount" class="ms-ref-count ms-textSmall" style="font-weight:bold;"> (', $htmlEncode(Srch.U.toFormattedNumber(refinementCount)) ,') </div>'

);

                }

Once changes are made to our display template we can upload it to the Filters Folder. Now performing a search in the search center you will get available refiners in the left navigation with count just as you would get in SharePoint 2010.

In above example we have edited the existed Template and uploaded it back to Filters Folder. If we want to use the new refiner display template.

Place the page into edit mode and on the Refinement Web Part, choose Edit Web Part on the Context menu.

Under the "Properties for search Refinement" header, click the "Choose Refiners" button to open the refinement Configuration Modal.

I am selecting "File Type" Refiner in the top list, So its Configuration properties are shown below in the Configuration section. Here we can configure several properties of the refinement like Display Name, Display Template to use, Sort..

Thanks.

Related Post