Office 365 · SharePoint 2013

Office 365/SharePoint 2013 – Dropdown refinement panels display templates in 5 minutes.


My problem

One of my requirements today was to implement dropdowns which filter content in a search results web part. So something that looks like this:

dropdowns

I want to do this quickly, so I’m not cleaning up any code. Simply reuse an out of the box display template.

Your solution

First I took a copy of the out of the box refinement file filter_default.html and I renamed this to filter_dropdown.

Then I change the title of the file:

<title>Refinement Dropdown Item</title>

As I want the same functionality but just change the representation this can’t be too difficult.

To create a drop down I need to get html that looks a bit like this:

<select id=’Container’>
    <option value=”select”>Option 1</option>
   <option value=”select”>Option 2</option>
</select></div>
So first I put my select and a “please select …” option. straight after the title:_#= Srch.U.collapsibleRefinerTitle(ctx.RefinementControl.propertyName, ctx.ClientControl.get_id(), refinerCatTitle, iconClass) =#_

<select id=’Container’>

<option value=”select”>Please select …</option>

and of course close the select  near the end of the file (simply replace a </div> with </select> will do the job:

_#–>

<!–#_

}

_#–>

</select>

<!–#_

}

}

_#–>

</div>

Now we need to have a look at how the options are generated within the out of the box display template. All the options are generated within the outputFilter function.

function outputFilter(refinementName, refinementCount, refiners, method, aClass, showCounts)

I’ve added selected as an additional parameter:

function outputFilter(refinementName, refinementCount, refiners, method, aClass, showCounts, selected)

I’m using selected mark an option as selected

function outputFilter(refinementName, refinementCount, refiners, method, aClass, showCounts, selected) {

var aOnClick = “$getClientControl(this).” + method + “(‘” + $scriptEncode(Sys.Serialization.JavaScriptSerializer.serialize(refiners)) + “‘);”;

var nameClass = “ms-ref-name ” + (showCounts ? “ms-displayInline” : “ms-displayInlineBlock ms-ref-ellipsis”);

if (selected) {

_#–>

<option onclick=”_#= aOnClick =#_ selected=”_#= selected =#_” value=”_#= $htmlEncode(refinementName) =#_”>_#= $htmlEncode(refinementName) =#_</option>

<!–#_

} else

{

_#–>

<option onclick=”_#= aOnClick =#_ value=”_#= $htmlEncode(refinementName) =#_”>_#= $htmlEncode(refinementName) =#_</option>

<!–#_

}

};

So now we are nearly there. The drop down is already appearing but the html is still a bit messed up.

Remove all the <div>and< /div> section in the script and your job is done.

Now deploy the display template and finally, don’t forget to select the display template in your refinement property within the refinement web part.

Job done.

 

Advertisements

2 thoughts on “Office 365/SharePoint 2013 – Dropdown refinement panels display templates in 5 minutes.

Please leave a comment or feedback

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s