{"id":1581,"date":"2015-09-21T21:55:06","date_gmt":"2015-09-21T20:55:06","guid":{"rendered":"http:\/\/blog.repsaj.nl\/?p=1581"},"modified":"2016-02-09T17:28:14","modified_gmt":"2016-02-09T16:28:14","slug":"o365-sharepoint-search-dropdown-refiner-template","status":"publish","type":"post","link":"http:\/\/blog.repsaj.nl\/index.php\/2015\/09\/o365-sharepoint-search-dropdown-refiner-template\/","title":{"rendered":"[O365] SharePoint Search dropdown refiner template"},"content":{"rendered":"

In my previous O365 post<\/a>, I showed how you can make use of jQuery and jQuery UI to make a search refiner filter template that supports autocomplete on the “other” textbox shown in a multivalued dropdown. With that idea in mind, I imagined it would be pretty easy to use the same concept to create a filter template that shows a dropdown list with possible filter values. And it turns out it is pretty simple, so here are the steps.<\/p>\n

As with my previous post, I’m not going to outline all of the steps to create a filter display template, instead I’d like to refer to @eliostruyf<\/a>‘s blog for that (see here<\/a>). As you’ll find, the default multivalued dropdown template uses two files;\u00a0Filter_MultiValue\u00a0<\/strong>and\u00a0Filter_MultiValue_Body<\/strong><\/strong>. So as with the autocomplete example, we’ll make copies of these.<\/p>\n

In this case, there is no real need to change the Filter_Multivalue file, except for loading a\u00a0custom javascript file like this:<\/p>\n

<script>\r\n  $includeScript(\"\",\"~sitecollection\/Scripts\/yourscriptfile.js\");\r\n<\/script>\r\n<\/pre>\n
The rendering of the body of the filter is done in the Filter_Multivalue_Body file. Normally you’ll see the values rendered like this:<\/p>\n
\"taxonomyrefiner\"<\/p>\n
What we’d like to do is change this list for a dropdown which is way more convenient for use with a larger number of choices. Remember though, you might want to consider the autocomplete one whenever your list is becoming too large.<\/p>\n
To do so, we disable the rendering of unselected items. Leave the selected ones rendered so the user can see what selection he or she made. To do so, change the following\u00a0lines (50- 86):<\/p>\n
<!--#_ \r\nfor (var i = 0; i < filters.length; i++){\r\n    var filter = filters[i];\r\n    if(!$isNull(filter)){\r\n        var isSelected = Boolean(filter.IsSelected);\r\n        var inputName = propertyName + '_ChkGroup';\r\n        var inputId = inputName + \"_\" + filter.RefinementName;\r\n        var nameClass = \"ms-ref-name \" + (showCounts ? \"ms-displayInline\" : \"ms-displayInlineBlock ms-ref-ellipsis\");\r\n_#-->\r\n        <div id=\"Value\">\r\n<!--#_\r\n        if(isSelected) {\r\n_#-->\r\n            <input type=\"checkbox\" class=\"ms-padding0 ms-margin0 ms-verticalAlignMiddle\" id=\"_#= $htmlEncode(inputId) =#_\" name=\"_#= $htmlEncode(inputName) =#_\" data-displayValue=\"_#= $htmlEncode(filter.RefinementName) =#_\" value=\"_#= $htmlEncode(filter.RefinementToken) =#_\" checked=\"\" \/>\r\n<!--#_\r\n        } else {\r\n_#-->\r\n            <input type=\"checkbox\" class=\"ms-padding0 ms-margin0 ms-verticalAlignMiddle\" id=\"_#= $htmlEncode(inputId) =#_\" name=\"_#= $htmlEncode(inputName) =#_\" data-displayValue=\"_#= $htmlEncode(filter.RefinementName) =#_\" value=\"_#= $htmlEncode(filter.RefinementToken) =#_\" \/>\r\n<!--#_\r\n        }\r\n_#-->\r\n            <label for=\"_#= $htmlEncode(inputId) =#_\" class='_#= nameClass =#_'>\r\n            _#= $htmlEncode(filter.RefinementName) =#_\r\n<!--#_\r\n          if (showCounts) {\r\n_#-->\r\n            <span id='RefinementCount' class='ms-ref-count ms-textSmall'> (_#= $htmlEncode(Srch.U.toFormattedNumber(filter.RefinementCount)) =#_) <\/span>\r\n<!--#_\r\n          }\r\n_#-->\r\n            <\/label>\r\n        <\/div>\r\n<!--#_\r\n    }\r\n}\r\n_#-->\r\n<\/pre>\n
To:<\/p>\n
<!--#_\r\n    var allSelected = true;\r\n\r\n    for (var i = 0; i < filters.length; i++){\r\n        var filter = filters[i];\r\n        if(!$isNull(filter)){\r\n            var isSelected = Boolean(filter.IsSelected);\r\n            allSelected = allSelected && isSelected;\r\n            var inputName = propertyName + '_ChkGroup';\r\n            var inputId = inputName + \"_\" + filter.RefinementName;\r\n            var nameClass = \"ms-ref-name \" + (showCounts ? \"ms-displayInline\" : \"ms-displayInlineBlock ms-ref-ellipsis\");\r\n_#-->\r\n<!--#_\r\n            if(isSelected) {\r\n_#-->\r\n<div id=\"Value\">\r\n    <input type=\"checkbox\" class=\"ms-padding0 ms-margin0 ms-verticalAlignMiddle\" id=\"_#= $htmlEncode(inputId) =#_\" name=\"_#= $htmlEncode(inputName) =#_\" data-displayValue=\"_#= $htmlEncode(filter.RefinementName) =#_\" value=\"_#= $htmlEncode(filter.RefinementToken) =#_\" checked=\"\" \/>\r\n    <label for=\"_#= $htmlEncode(inputId) =#_\" class='_#= nameClass =#_'>\r\n        _#= $htmlEncode(filter.RefinementName) =#_\r\n    <\/label>\r\n<\/div>\r\n\r\n<!--#_      } _#-->\r\n<!--#_\r\n        }\r\n    }\r\n_#-->\r\n<\/pre>\n
Without any values selected (default) the template won’t render a thing any more. Note that I added a variable “allSelected” which tracks whether all the items rendered are selected items. If this is the case, the user already selected some items and I do not want the dropdown to render any more. Whether you also want to do this is totally up to you.<\/p>\n
Next,\u00a0we’ll add some code to render a pretty straightforwarde HTML <select> control with <option> items for each refiner value:<\/p>\n
<!--#_ if(!allSelected) { _#-->\r\n\r\n<div id=\"OtherValue\" style=\"width: 260px;\">\r\n    Select the items you want to filter on and then click 'apply' to filter the results. Select 'clear' to clear the filters to reselect different values.\r\n<\/div>\r\n<select onchange=\"Custom.Jsom.Refiners.addDropdownInput($(this), this.value);\" id=\"_#= $htmlEncode(propertyName) =#__select\">\r\n    <option value=\"\">Select a value<\/option>\r\n\r\n    <!--#_\r\n        for (var i = 0; i < filters.length; i++){\r\n            var filter = filters[i];\r\n            if(!$isNull(filter)){\r\n                var inputName = propertyName + '_ChkGroup';\r\n                var inputId = inputName + \"_\" + filter.RefinementName;\r\n                var nameClass = \"ms-ref-name \" + (showCounts ? \"ms-displayInline\" : \"ms-displayInlineBlock ms-ref-ellipsis\");\r\n    _#-->\r\n    <option value=\"_#= $htmlEncode(filter.RefinementName) =#_\">_#= $htmlEncode(filter.RefinementName) =#_<\/option>\r\n    <!--#_\r\n            }\r\n        }\r\n    _#-->\r\n\r\n<\/select>\r\n\r\n<!--#_ } _#-->\r\n<\/pre>\n
And there you are, the refiner values are now rendered as a dropdown in SharePoint:<\/p>\n
\"refiner_dropdownclosed\"<\/a><\/p>\n
And with values:<\/p>\n
\"refiner_dropdownopened\"<\/a><\/p>\n
Ok, now obviously we’re not done yet as this is a\u00a0multivalued\u00a0<\/strong>refiner and by default a dropdown only allows you to select a single value. So I added a method which is called on the dropdowns “onchange” event. This method looks like this:<\/p>\n
function addAutocompleteInput(input, item) {\r\n    var container = input.parent().parent().parent();\r\n    var name = item.label;\r\n\r\n\r\n    var txtInputName = input.attr('name');\r\n    var inputName = txtInputName.substring(0, txtInputName.indexOf('_')) + '_ChkGroup';\r\n    var inputId = inputName + '_' + name;\r\n    var inputValue = 'equals(\"' + name + '\")';\r\n\r\n    addInput(inputId, inputName, inputValue, name, container);\r\n}\r\n\r\nfunction addInput(inputId, inputName, inputValue, value, container) {\r\n    var inputClass = \"ms-padding0 ms-margin0 ms-verticalAlignMiddle\";\r\n    var nameClass = \"ms-ref-name ms-displayInlineBlock ms-ref-ellipsis\";\r\n\r\n    var div = $('<div \/>', { id: 'Value' }).prependTo(container);\r\n    $('<input \/>', { type: 'checkbox', id: inputId, name: inputName, 'data-displayValue': value, value: inputValue, checked: '', class: inputClass }).appendTo(div);\r\n    $('<span>&#160;<\/span>').appendTo(div);\r\n    $('<label \/>', { 'for': inputId, text: value, class: nameClass }).appendTo(div);\r\n}\r\n<\/pre>\n
I split this into two methods because I re-used the addInput method for the autocomplete box, you don’t need to if you don’t want to. The code is pretty self-explanatory I think, basically it renders a <div id=”Value”> container, holding a <input> checkbox with a <label> for the text value. This is exactly how SharePoint would render it too, which you can see in the original filter template code. The name of the <select> is used to construct a name for the checkbox controls and the selected value and label of the refiner are used to put into the select box.<\/p>\n
When the user now selects a value from the dropdown, it’s rendered just like a regular refiner value:<\/p>\n
\"refiner_dropdownselected\"<\/a><\/p>\n
As you can see, you can select multiple values now and hitting “Apply” will refine your search based on all selected values.<\/p>\n
One last thing you will probably need to to is increase the number of refiner values SharePoint will return. By default this number is set to 10, which will limit the amount of refiner options (thus dropdown options) to just 10, in which case a dropdown isn’t really required. I haven’t found a limit for this number just yet, but with larger numbers a dropdown isn’t really the best control any more in my opinion. I would probably try to limit it to about 100 items. You can find this setting in the refiner settings of the refiner web part:<\/p>\n
\"refiner_dropdown_number\"<\/a><\/p>\n
And that’s it, next to our already awesome autocomplete refiner<\/a> we now have a dropdown refiner as well. Enjoy!<\/p>\n
Update:\u00a0<\/strong>the above mentioned Elio Struyf also has a solution for building a dropdown refiner template. I did this one just for practice and didn’t search for existing solutions, but I definitely recommend you check it out and choose the one you think is best!\u00a0http:\/\/www.eliostruyf.com\/part-4-create-dropdown-search-refiner-control\/<\/p>\n
Update:<\/strong> I’ve uploaded the two HTML files as example how you can implement this.\u00a0Download here:<\/p>\n