How to convert text of choice fields into icons?

Question

Salve, folks! I have a choice field in my sharepoint page with choices like this:

(1) Go
(2) Warning
(3) Stop

Now, I want that to appear in the list as an icon instead of text. I have a working jquery script for that, but it takes to long to search through all the list for the contained text, and it would be better to use xsl anyway because it renders before it is displayed.

So how can I accomplish this in xsl? Here is as far as I have gotten, as I am only learning xsl:

<xsl:stylesheet 
  xmlns:x="http://www.w3.org/2001/XMLSchema" 
  xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" 
  version="1.0" 
  exclude-result-prefixes="xsl msxsl ddwrt" 
  xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" 
  xmlns:asp="http://schemas.microsoft.com/ASPNET/20" 
  xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" 
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
  xmlns:msxsl="urn:schemas-microsoft-com:xslt" 
  xmlns:SharePoint="Microsoft.SharePoint.WebControls" 
  xmlns:ddwrt2="urn:frontpage:internal">

    <!-- Convert the Scope Field into an icon -->
    <xsl:template match="FieldRef[@Name='Scope']">
        <xsl:param name="thisNode" select="."/>
        <xsl:choose>
            <xsl:when test="$thisNode/@Scope='(1) Go'">
                <td class="statusRating1"></td>
            </xsl:when>
            <xsl:when test="$thisNode/@Scope='(2) Warning'">
                <td class="statusRating2"></td>
            </xsl:when>
            <xsl:when test="$thisNode/@Scope='(3) Stop'">
                <td class="statusRating3"></td>
            </xsl:when> 
            <xsl:otherwise>
                <xsl:value-of select="$thisNode/@Scope" />
            </xsl:otherwise>                
        </xsl:choose>
    </xsl:template> 

 </xsl:stylesheet>

Here is the css I want to apply:

.statusRating1{background-image: url("/_layouts/custom/images/go.png"); }
.statusRating2{background-image: url("/_layouts/custom/images/warning.png"); }
.statusRating3{background-image: url("/_layouts/custom/images/stop.png"); }

Now, I've tried this with and without mode="Choice_body" or mode="MultiChoice_body and even Text_body, and have also tried adding <xsl:apply-templates /> but it never even seems to hook. The column is definitely named "Scope". Maybe I just have to add the right mode?

In firebug, I can see that the class is never added.

[update] I have noticed that in other places where I have used the template in this fashion, that the template never "took" unless it had the correct mode defined. However, I've googled the world over and can't find the right mode to use for a choice field. I even created a question for that, here. Also, the use of thisNode is from Microsoft's examples, where you can modify field types very easily (except in the case of this here choice field).

Answer 1

In order to define Custom Rendering for a SPFieldChoice field in template for mode attribute should be used value body

Template for modes with names Choice_body MultiChoice_body are not defined.

So, in your case template would look like this:

<xsl:template match="FieldRef[@Name='Scope']" mode="body">

---

Template mode attributes defined for rendering SharePoint fields are not documented, but you could find this information in %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\LAYOUTS\XSL\fldtypes.xsl. See implementation of template PrintField for details.

Hope this helps,

Vadim

Answer 2

The fact that you have written a template isn't enough for this template ever to be executed.

And if it is selected for execution by the code of the XSLT built-in (default) templates, these templates don't know about any parameter named $thisNode, and don't pass such parameter to your template.

This means that the value of the$thisNode parameter when the template is initiated is the empty string -- therefore none of the xsl:when test conditions is satisfied and thus the xsl:otherwise is chosen.

Solution:

Either:

1. Have an explicit xsl:apply-templates in your code, that selects the nodes to be matched by the tempate, or:

2. Delete the <xsl:param> and replace in the code every occurence of $thisNode with ..