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

This post is over a year old, some of this information may be out of date.

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:

The output of the default template is the following:

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:

1
function mapResultType(listData)
2
{
3
  var map = { };
4
  map[Srch.U.loadResource("rf_ResultTypeRefinerValue_MSAccess")] = {
5
    "RefinerName": "FileType",
6
    "RefinementValues": ["accdb", "accdc", "accde", "accdr", "accdt"]
7
  };
8
  map[Srch.U.loadResource("rf_ResultTypeRefinerValue_AdobePDF")] = {
9
    "RefinerName": "FileType",
10
    "RefinementValues": ["pdf"]
11
  };
12
  map[Srch.U.loadResource("rf_ResultTypeRefinerValue_Assignment")] = {
13
    "RefinerName": "ContentTypeId",
14
    "RefinementValues": ["0x010063C2F478ACC511DFB869B5BFDFD720851252*"]
15
  };
16
  map[Srch.U.loadResource("rf_ResultTypeRefinerValue_Blog")] = {
17
    "RefinerName": "WebTemplate",
18
    "RefinementValues": ["BLOG"]
19
  };
20
  map[Srch.U.loadResource("rf_ResultTypeRefinerValue_Book")] = {
21
    "RefinerName": "ContentTypeId",
22
    "RefinementValues": ["0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF3900ABD371128A994A0B98E7E888866B392F*"]
23
  };
24
  map[Srch.U.loadResource("rf_ResultTypeRefinerValue_Community")] = {
25
    "RefinerName": "WebTemplate",
26
    "RefinementValues": ["COMMUNITY"]
27
  };
28
  map[Srch.U.loadResource("rf_ResultTypeRefinerValue_Course")] = {
29
    "RefinerName": "ContentTypeId",
30
    "RefinementValues": ["0x010063C2F478ACC511DFB869B5BFDFD720851101*"]
31
  };
32
  map[Srch.U.loadResource("rf_ResultTypeRefinerValue_Discussion")] = {
33
    "RefinerName": "ContentTypeId",
34
    "RefinementValues": ["0x012002*", "0x0107*"]
35
  };
36
  map[Srch.U.loadResource("rf_ResultTypeRefinerValue_Email")] = {
37
    "RefinerName": "FileType",
38
    "RefinementValues": ["eml", "msg", "exch"]
39
  };
40
  map[Srch.U.loadResource("rf_ResultTypeRefinerValue_MSExcel")] = {
41
    "RefinerName": "FileType",
42
    "RefinementValues": ["odc", "ods", "xls", "xlsb", "xlsm", "xlsx", "xltm", "xltx", "xlam"]
43
  };
44
  map[Srch.U.loadResource("rf_ResultTypeRefinerValue_Image")] = {
45
    "RefinerName": "FileType",
46
    "RefinementValues": ["bmp", "jpeg", "png", "tiff", "gif", "rle", "wmf", "dib", "ico", "wpd", "odg"]
47
  };
48
  map[Srch.U.loadResource("rf_ResultTypeRefinerValue_Lesson")] = {
49
    "RefinerName": "ContentTypeId",
50
    "RefinementValues": ["0x010063C2F478ACC511DFB869B5BFDFD720851251*"]
51
  };
52
  map[Srch.U.loadResource("rf_ResultTypeRefinerValue_NewsfeedPost")] = {
53
    "RefinerName": "ContentTypeId",
54
    "RefinementValues": ["0x01FD4FB0210AB50249908EAA47E6BD3CFE8B*", "0x01FD59a0df25f1e14ab882d2c87d4874cf84*"]
55
  };
56
  map[Srch.U.loadResource("rf_ResultTypeRefinerValue_MSOneNote")] = {
57
    "RefinerName": "FileType",
58
    "RefinementValues": ["one"]
59
  };
60
  map[Srch.U.loadResource("rf_ResultTypeRefinerValue_MSPowerPoint")] = {
61
    "RefinerName": "FileType",
62
    "RefinementValues": ["odp", "ppt", "pptm", "pptx", "potm", "potx", "ppam", "ppsm", "ppsx"]
63
  };
64
  map[Srch.U.loadResource("rf_ResultTypeRefinerValue_MSProject")] = {
65
    "RefinerName": "FileType",
66
    "RefinementValues": ["mpp"]
67
  };
68
  map[Srch.U.loadResource("rf_ResultTypeRefinerValue_MSPublisher")] = {
69
    "RefinerName": "FileType",
70
    "RefinementValues": ["pub"]
71
  };
72
  map[Srch.U.loadResource("rf_ResultTypeRefinerValue_SharePointSite")] = {
73
    "RefinerName": "contentclass",
74
    "RefinementValues": ["STS_Web", "STS_Site"]
75
  };
76
  map[Srch.U.loadResource("rf_ResultTypeRefinerValue_Task")] = {
77
    "RefinerName": "contentclass",
78
    "RefinementValues": ["STS_ListItem_GanttTasks", "STS_ListItem_Tasks", "STS_ListItem_HierarchyTasks", "STS_List_GanttTasks", "STS_List_Tasks", "STS_List_HierarchyTasks"]
79
  };
80
  map[Srch.U.loadResource("rf_ResultTypeRefinerValue_TeamSite")] = {
81
    "RefinerName": "WebTemplate",
82
    "RefinementValues": ["STS"]
83
  };
84
  map[Srch.U.loadResource("rf_ResultTypeRefinerValue_Video")] = {
85
    "RefinerName": "ContentTypeId",
86
    "RefinementValues": ["0x0120D520A8*"]
87
  };
88
  map[Srch.U.loadResource("rf_ResultTypeRefinerValue_Visio")] = {
89
    "RefinerName": "FileType",
90
    "RefinementValues": ["vsd", "vsx"]
91
  };
92
  map[Srch.U.loadResource("rf_ResultTypeRefinerValue_MSWord")] = {
93
    "RefinerName": "FileType",
94
    "RefinementValues": ["docx", "doc", "docm", "dot", "nws", "dotx"]
95
  };
96
  map[Srch.U.loadResource("rf_ResultTypeRefinerValue_Webpage")] = {
97
    "RefinerName": "FileType",
98
    "RefinementValues": ["HTML", "MHTML"]
99
  };
100
  map[Srch.U.loadResource("rf_ResultTypeRefinerValue_Archive")] = {
101
    "RefinerName": "FileType",
102
    "RefinementValues": ["zip"]
103
  };
104

105
  var retListData = new Array();
106
  var assocListData = new Array();
107
  for (var i = 0; i < listData.length; i++)
108
  {
109
    var filter = listData[i];
110
    var mappedRefinementName = null;
111
    for(var key in map)
112
    {
113
      if (map[key].RefinerName == filter.RefinerName)
114
      {
115
        for (var j = 0; j < map[key].RefinementValues.length; j++)
116
        {
117
          var actualValue = filter.RefinementValue.toLowerCase(), candidateValue = map[key].RefinementValues[j].toLowerCase();
118

119
          if (actualValue == candidateValue ''
120
            (filter.RefinerName.toLowerCase() == "contenttypeid" && actualValue.startsWith(candidateValue.substring(0, candidateValue.length - 1))))
121
          {
122
            mappedRefinementName = key;
123
            break;
124
          }
125
        }
126
        if (!$isNull(mappedRefinementName))
127
        {
128
          break;
129
        }
130
      }
131
    }
132

133
    var mappedFilter = new Object();
134
    if (!$isNull(mappedRefinementName))
135
    {
136
      mappedFilter.RefinerName = map[mappedRefinementName].RefinerName;
137
      mappedFilter.RefinementCount = filter.RefinementCount;
138
      mappedFilter.RefinementName = mappedRefinementName;
139
      mappedFilter.RefinementTokens = [];
140
      var resultTypeTokenWrapper = (mappedFilter.RefinerName.toLowerCase() == "contenttypeid") ? function (x) {return x;} :
141
                                                     Srch.RefinementUtil.stringValueToEqualsToken;
142
      for (var j in map[mappedRefinementName].RefinementValues) {
143
        mappedFilter.RefinementTokens.push(resultTypeTokenWrapper(map[mappedRefinementName].RefinementValues[j]));
144
      }
145

146
      if ($isNull(assocListData[mappedFilter.RefinementName]))
147
      {
148
        assocListData[mappedFilter.RefinementName] = mappedFilter;
149
      }
150
      else
151
      {
152
        assocListData[mappedFilter.RefinementName].RefinementCount += mappedFilter.RefinementCount;
153
      }
154
    }
155
  }
156

157
  for (var key in assocListData)
158
  {
159
    retListData[retListData.length] = assocListData[key];
160
  }
161

162
  return retListData;
163
}

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

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:

1
if (ctx.RefinementControl.propertyName === "FileType") {
2
  if (!$isNull(ctx.DataProvider.get_refinementInfo())) {
3
    if (!$isNull(ctx.DataProvider.get_refinementInfo()["contentclass"]))
4
    {
5
      listData = listData.concat(ctx.DataProvider.get_refinementInfo()["contentclass"]);
6
    }
7
    if (!$isNull(ctx.DataProvider.get_refinementInfo()["ContentTypeId"]))
8
    {
9
      listData = listData.concat(ctx.DataProvider.get_refinementInfo()["ContentTypeId"]);
10
    }
11
    if (!$isNull(ctx.DataProvider.get_refinementInfo()["WebTemplate"]))
12
    {
13
      listData = listData.concat(ctx.DataProvider.get_refinementInfo()["WebTemplate"]);
14
    }
15
  }
16

17
  if (hasControl)
18
    listData = mapResultType(listData);
19
}

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:

1
// Token mapping is already done for the FileType data
2
if (ctx.RefinementControl.propertyName !== "FileType") {
3
  filter.RefinementTokens = [filter.RefinementToken];
4
  filter.RefinementTokenWrappedValues = [Srch.RefinementUtil.stringValueToEqualsToken(filter.RefinementValue)];
5
}

The result of this looks like this:

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:

1
var addMethod = ctx.RefinementControl.propertyName === "FileType" ? "addRefinementFiltersJSONWithOr" : "addRefinementFiltersJSON";
2
ShowRefiner(filter.RefinementName, filter.RefinementCount, refiners, addMethod);

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

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.

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:

1
refinerRemoval[ctx.RefinementControl.propertyName] = null;
2
if (ctx.RefinementControl.propertyName == "FileType")
3
{
4
  refinerRemoval["contentclass"] = null;
5
  refinerRemoval["ContentTypeId"] = null;
6
  refinerRemoval["WebTemplate"] = null;
7
}
8
ShowRefiner('Remove refinement', null, refinerRemoval, 'updateRefinersJSON');

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:

1
map["XML File"] = {
2
  "RefinerName": "FileType",
3
  "RefinementValues": ["xml"]
4
};
5
map["TXT File"] = {
6
  "RefinerName": "FileType",
7
  "RefinementValues": ["txt"]
8
};

The result looks like this:

Download

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

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:

Part 1: Create your first search refiner control template
Part 2: Adding Refinement Actions to the Custom Search Refiner Control
Part 3: Working with File Types in the Search Refiner Control Template
Part 4: Create a dropdown refiner control
Part 5: The Search Refiner Control Methods Explained
Part 6: Create a Multi-Value Search Refiner Control
Part 7: Working with Ranges in the Search Refiner Control

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

Point 1: Comparison Custom Template versus Default Template

Point 2: Combined Refinement Information

Point 3: File Type Groups

Point 4: Removing the Current Refinement isn’t Working

Point 5: Additional File Types

Download

Blog posts in this series:

Related articles

Part 1: Create Your First Search Refiner Control Template

Part 2: Adding Refinement Actions to the Custom Search Refiner Control

Part 4: Create a Dropdown Search Refiner Control

Report issues or make changes on GitHub

Comments

Elio Struyf

Point 1: Comparison Custom Template versus Default Template

Point 2: Combined Refinement Information

Point 3: File Type Groups

Point 4: Removing the Current Refinement isn’t Working

Point 5: Additional File Types

Download

Part 4: Create a dropdown refiner control

Blog posts in this series:

Related articles

Part 1: Create Your First Search Refiner Control Template

Part 2: Adding Refinement Actions to the Custom Search Refiner Control

Part 4: Create a Dropdown Search Refiner Control

Report issues or make changes on GitHub

Comments

Elio Struyf