Part 3: Working with File Types in the Search Refiner Control Template

October 29, 2013

In the previous posts I explained how to create a new refiner control, but there is one search data type that needs some special attention. The search data type that will be explained in this post is the FileType. In this post I'll show you the things that are so special about working with filetypes.

Note: for this post I'll use the display template that was created in the previous post: Custom Search Refiner Control Part 2

Point 1: Comparison Custom Template versus Default Template

You'll get the following output with the custom display template:

Custom Template used with File Type

Custom Template used with File Type

The output of the default template is the following:

Default Template used with File Type

Default Template used with File Type

The first thing you'll notice is that the names of the file types are different. The custom display template uses the exact file type values, where the default template is using user friendly names.

This comes from the fact that the default template has a function that does this remapping:

This function can be used in your template, this can placed at the bottom of your template.

Point 2: Combined Refinement Information

Another thing you'll can see, is that different refinement titles are shown. For example Newsfeed post, Team site isn't shown in the custom display template. These refiners are shown because there is a mapping in the default template which enriches the FileType data type with extra information from the following types: contentclass, ContentTypeId, and WebTemplate.

The following code is used to combine these data types together:

When you adding this code to your display template, a modification is required to the loop that populates the selected and unselected arrays. The token mapping is already achieved with the remapping function, so it isn't needed anymore for the file type. The code needs to be changed to this:

The result of this looks like this:

File Type Custom Refiner

File Type Custom Refiner

Point 3: File Type Groups

The remapping function does more than just converting the file type to a friendly name. The file types are also mapped to with the possible values, this means that when you refining your results on the docx file type, the "doc", "docm", "dot", "nws", "dotx" are also taken into account.

When doing a refinement right now, you'll end up with no results. To solve this problem, another method needs to be used for file type refinement. The method to use is the addRefinementFiltersJSONWithOr. The difference between addRefinementFiltersJSONWithOr and the addRefinementFiltersJSON method is the operator that they use. The addRefinementFiltersJSON uses an AND operator, where the addRefinementFiltersJSONWithOr uses an OR operation.

For the file types an OR operation is required (because a file has only one file type). The ShowRefiner function call in the unselected loop looks like this:

I have added a check to see if the control is used for file type refinement, so that the correct refinement can be achieved.

File type refinement

File type refinement

The decoded URL looks like this: http://your-site/Pages/DocumentResults.aspx#Default={"k":"","r":[{"n":"FileType","t":["equals(\"docx\")","equals(\"doc\")","equals(\"docm\")","equals(\"dot\")","equals(\"nws\")","equals(\"dotx\")"],"o":"or","k":false,"m":null}]}

Completely at the end of the URL you can see the OR operation.

Point 4: Removing the Current Refinement isn't Working

At the moment, the Remove refinement link is partly working. For some refiners it works, for some it doesn't. This is caused by the mapping with the contentclass, ContentTypeId, and WebTemplate data. At this moment the Remove refinement hyperlink removes the refinement for the current search data type (file type). When refining on one of the other data types, you'll need to remove the refinement for that data type. What you need to do is creating a link that removes the refinement for all data types that it can have:

Point 5: Additional File Types

Maybe you noticed it or not, but in the first screenshot XML and TXT file type are shown. Once I implemented the remapping function, it wasn't shown anymore. Inside the remapping function, there isn't a mapping for the XML or TXT file types, but you can add your own file types to the list like this:

The result looks like this:

Custom File Types

Custom File Types


Download the complete refiner control here: Custom Refiner Control Part 3.

Part 4: Create a dropdown refiner control

Right now I explained the attentions points when working with file types are. Currently the refiner control is visualizing the items as a list, but this will change in the next part. In Part 4 I'll show you how to create a dropdown refiner control.

Blog posts in this series: