Friday, August 26, 2011

The Ugly, the Bad and the Good (Part 3)


Part 3. The Good

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">&#8627;&#160;</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.




No comments:

Post a Comment