SharePoint 2013 – Refinement Panel showing string;# for calculated text fields

Today I had the same problem as described in the following forum post:
http://social.technet.microsoft.com/Forums/en-US/260afea2-45e4-41f6-879d-bff7a7ac7e8f/using-calculated-columns-in-the-search-refinement-panel

So first I looked into how the refinement panel works.

There is a Display template called Vertical (Control_Refinement.html and Control_Refinement.js) that creates the refinement panels

Then when I ran the Vertical javascript in my debugger I figured out that the Filter_Default.js controls the format of all the refinement panels.

Ok, so I do’t want to modify any out of the box files so I created a copy of the Filter_default.js. All I now need to do is reference it … Hmm, where is that done then?

I exported the refinement web part and within the SelectedRefinementControlsJson property it is possible to specify the filter script that should be used.

<webParts>
<webPart xmlns=”http://schemas.microsoft.com/WebPart/v3″&gt;
<metaData>
<type name=”Microsoft.Office.Server.Search.WebControls.RefinementScriptWebPart, Microsoft.Office.Server.Search, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” />
<importErrorMessage>Cannot import this Web Part.</importErrorMessage>
</metaData>
<data>
<properties>

…

<property name=”SelectedRefinementControlsJson” type=”string”> …..     “displayTemplate”:”~sitecollection/_catalogs/masterpage/Display Templates/Filters/Filter_Default.js”

….

<property name=”Direction” type=”direction”>NotSet</property>
</properties>
</data>
</webPart>
</webParts>

Ok, so that is easy…  Export, change the display template for the affected filter and import the web part again ( isn’t there a property available in the interface). Yes of course there is. I just missed it the first time around. Edit the web part Then select Choose Refiners … and select the Display template

So all I now have to do is download the Filter_default and fix it and upload it to my display templates.Only about 450 lines of JavaScript in there.

Near line 232 you will find the following code

for(var i in listData)
{
listData[i].RefinementTokens = [listData[i].RefinementToken];
listData[i].RefinementTokenWrappedValues = [Srch.RefinementUtil.stringValueToEqualsToken(listData[i].RefinementValue)];
if(ctx.RefinementControl.propertyName == “MediaDuration”)
{
Srch.U.modifyMediaDurationRefinementName(listData[i]);
}
}

Add the following two lines:

listData[i].RefinementName=listData[i].RefinementName.replace(“string;#”,””);
listData[i].RefinementValue=listData[i].RefinementValue.replace(“string;#”,””);

giving the following result:

for(var i in listData)
{
listData[i].RefinementName=listData[i].RefinementName.replace(“string;#”,””);
listData[i].RefinementValue=listData[i].RefinementValue.replace(“string;#”,””);
listData[i].RefinementTokens = [listData[i].RefinementToken];
listData[i].RefinementTokenWrappedValues = [Srch.RefinementUtil.stringValueToEqualsToken(listData[i].RefinementValue)];
if(ctx.RefinementControl.propertyName == “MediaDuration”)
{
Srch.U.modifyMediaDurationRefinementName(listData[i]);
}
}

And now your refinement panel looks as expected without the string;#