Notice: The Display Language should be English, because I check for the word 'Any' in the XSL. You can/should adjust this by yourself in rows 30, 33, 36 for your preferred language.
Zip file with two webparts: - HTML Form Web Part.dwp with navigation and the javascript; - Refinement Panel.webpart with the extended XSL and customized categories. Add the web parts to the Left Zone in the Search results page, and remove the original Refinement Panel web part.
I was still not satisfied with the possibilities I came up with to get the right icon for every filter value in the Refinement panel.
I wanted to be able to add a specific icon to the Refiner values belonging to the Filter category 'Author' for instance.
Therefore I had to promote the ManagedProperty parameter, so its value would be available in the FilterLink template.
Here is the complete XSL that can replace the original one. Add this via the XSL Editor of the Refinement Panel webpart:
The result is a Refinement Panel with icons, where a hyperlink is added to the icons of the Filter categories 'Site' and 'Author':
- Site: Open site in new window
- Author: hyperlink to a people search results page with a TOP Federated Results webpart, that includes the local people search and an internet people search via the api of linkedin, pipl, etc.
Replace the url in row 253 with the url of your own search center.
Wish list:
- Display avatar of the authors: due to the lack of e-mail address and MD5 encoding this is difficult to achieve;
- Show user profile on hoover with javascript/jQuery: be my guest. => There is a solution for this in SP2013/Online made by Elio Struyf: People refinement made easy by adding profile pictures.
I managed to make it possible to select multiple Refiners via the UI, just by extending the XSL of the Refinement Panel and adding a little javascript.
Different ways to get the right icon for every filter value in the Refinement panel.
After exploring the possibilities in XSL I came up with this hybrid approach:
- Look for Result Type icons in the docicon.xml file on the server;
- Look for icons with the same name as the filter value in the images folder;
- Several when-statements for specific matches;
- Default icon if there's no match.
Add via the XSL Editor the following rows to the <xsl:template name="FilterLink">:
<xsl:if test="($Indentation = '1')">
<span class="ms-searchref-indenticon">↳ </span>
</xsl:if>
<!-- Begin -->
<xsl:choose>
<!-- for the Any of every category -->
<xsl:when test="starts-with($Value, 'Any ')">
<img align="absmiddle" src="/_layouts/images/asterisk.png" border="0" />
</xsl:when>
<!-- for Site -->
<xsl:when test="starts-with($UrlTooltip, 'http://')">
<img align="absmiddle" src="/_layouts/images/SharePointFoundation16.png" border="0" />
</xsl:when>
<!-- for Result Type - will only work for original values, like Pdf, Zip -->
<xsl:when test="ddwrt:MapToIcon('', $Value) != 'icgen.gif'">
<img align="absmiddle" src="/_layouts/images/{ddwrt:MapToIcon('', $Value)}" border="0" />
</xsl:when>
<!-- for Result Type with custom value -->
<xsl:when test="$Value = 'Word'">
<img align="absmiddle" src="/_layouts/images/icdocx.png" border="0" />
</xsl:when>
<xsl:when test="$Value = 'Excel'">
<img align="absmiddle" src="/_layouts/images/icxlsx.png" border="0" />
</xsl:when>
<xsl:when test="$Value = 'PowerPoint'">
<img align="absmiddle" src="/_layouts/images/icpptx.gif" border="0" />
</xsl:when>
<xsl:when test="$Value = 'Webpage'">
<img align="absmiddle" src="/_layouts/images/icaspx.gif" border="0" />
</xsl:when>
<!-- find your own added icons with same name as the filter value, or else default icon -->
<xsl:otherwise>
<img align="absmiddle" src="/_layouts/images/{$Value}.gif" onError="this.src='/_layouts/images/bullet.gif';" border="0" />
</xsl:otherwise>
</xsl:choose>
<!-- space -->
<xsl:text> </xsl:text>
<!-- End -->
<a class="ms-searchref-filterlink" href="{$SecureUrl}" title="{$RefineByHeading}: {$UrlTooltip}">
<xsl:value-of select="Value"/>
</a>
The result is this pimped up Refinement Panel:
Try it yourself.
Of course it's possible to add separate templates for every category, but that is too much work for now. Maybe later... See Part 4.
Add your own icons with the same name as the refiner value to the images folder.
Only one extra row of XSL is needed to do the trick: find and show the icon with the filter value in the Refinement panel.
Add via the XSL Editor the following rows to the <xsl:template name="FilterLink">:
<xsl:if test="($Indentation = '1')">
<span class="ms-searchref-indenticon">↳ </span>
</xsl:if>
<!-- Begin -->
<!-- find your own added icons with same name as the filter value, or else default icon -->
<img align="absmiddle" src="/_layouts/images/{$Value}.gif" onError="this.src='/_layouts/images/bullet.gif';" border="0" />
<!-- space -->
<xsl:text> </xsl:text>
<!-- End -->
<a class="ms-searchref-filterlink" href="{$SecureUrl}" title="{$RefineByHeading}: {$UrlTooltip}">
<xsl:value-of select="Value"/>
</a>
But there must be a smarter way to get the standard icons that are already available. The sequel continues with Part 3.
Christophe from PathToSharePoint offers the possibility to generate your own script for an image rotator. You can copy the script and add it to a CEWP on your page. This is a great service. But there is only the possibility to add a hyperlink that will download the picture directly, or will open a link that is specified in an extra text column that you should fill out by hand. Instead I want the dispform to be opened with the properties of the picture.
The script uses "/_vti_bin/owssvr.dll?Cmd=Display&XMLDATA=TRUE&List={GUID}" to query the picture library and get a XML output in return. And here is where the restrictions come in: this data doesn't contain the ID of the picture, only the name. And it calls the default view of the picture library that probably will have an item limit, so not all images are rotated. Therefore I rewrote the script a bit to get it work my way. First add an All items view to the picture library, and name it xxx or something so users will not be motivated to select it. Get the GUID of this view and add it to the script: "/_vti_bin/owssvr.dll?Cmd=Display&XMLDATA=TRUE&List={GUID}&View={GUID}". Second I will use the name of the picture to add it to a search query:
var LinkColumn="ows_NameOrTitle";var PictureLink="/SearchCenter/results.aspx?s=PicLib&k="+ListItems[SelectedItem].getAttribute(LinkColumn); Add a scope to the search administration based on the web address of the picture library. In this way I will find the picture, but still not have the possibility to open the dispform of the item. So I will use the trick from SharePoint Search Results: Adding a link to the view properties page of a document to get the ID available in the search results and add a 'View properties' link with XSL.
Let's bring back the icons in the Refinement Panel of the Search results, as with the Faceted Search in MOSS 2007.
Within the Refinement Panel we have the value of the filters available. By extending the XSLT with a lot of when-statements we are able to select the belonging icon from the images folder at the file system of the server.
Add via the XSL Editor the following rows to the <xsl:template name="FilterLink"> between Begin and End comment:
Of course this is quite an ugly solution due to the fact that you need to add rows for 'every' result type that you might expect.
But it's a quick win and looks very nice. And because of the otherwise-statement, every filter gets at least an icon and no red cross or so.
Here is an example of the result:
In Part 2. we will look at the possibility to use the value of the filter to compose the filename of the icon. In this way we don't need all the when-statements. As you might think, this is the Bad one.
