Unlocking the Mysteries of Data View Web Part XSL Tags – Part 16 – <xsl:attribute>

Cross-posted from EndUserSharePoint.com…

When I made my initial pass through the XSL tags for this series, I missed a few.  The example XSL I used in Parts 1 through 11 was very basic: just what you’ve get if you added a DVWP to a page to display the Title column of a list and that was it.  There are a few more tags that are very useful once you get past the basics, and <xsl:attribute> is one of them.  I mentioned <xsl:attribute> in the last article, but I wanted to cover it more fully.

<xsl:attribute> lets you variably add attributes to HTML that your XSL is rendering.  This lets you change the characteristics of the rendering on the fly and based on the values in the data you’re working with.

Let’s take another look at the example I showed in Part 10 about <xsl:choose>:

<xsl:choose>
  <xsl:when test="@Sales &gt; 1000000">
    <span style="color:green; font-weight:bold;">
      <xsl:value-of select="@Sales"/>
    </span>
  </xsl:when>
  <xsl:when test="@Sales &gt; 750000">
    <span style="color:green;">
      <xsl:value-of select="@Sales"/>
    </span>
  </xsl:when>
  <xsl:when test="@Sales &gt; 500000">
    <span style="color:yellow;">
      <xsl:value-of select=”@Sales”/>
    </span>
  </xsl:when>
  <xsl:otherwise>
    <span style="color:red;">
      <xsl:value-of select="@Sales"/>
    </span>
  </xsl:otherwise>
</xsl:choose>

This example shows how you can display the same column’s value (Sales), but with different formatting based on the characteristics of that value.  The XSL is actually a little verbose, but it got the point across for <xsl:choose>.  Let’s tighten it up a little bit using <xsl:attribute>.  We’re always going to render the value of Sales; what we want to change is the formatting of the value.  So there’s no reason to repeatedly output the <span>.

<span>
  <xsl:choose>
    <xsl:when test="@Sales &gt; 1000000">
      <xsl:attribute name="style">color:green;font-weight:bold;</xsl:attribute>
    </xsl:when>
    <xsl:when test="@ Sales &gt; 750000">
      <xsl:attribute name="style">color:green;</xsl:attribute>
    </xsl:when>
    <xsl:when test="@Sales &gt; 500000">
      <xsl:attribute name="style">color:yellow;</xsl:attribute>
    </xsl:when>
    <xsl:otherwise>
      <xsl:attribute name="style">color:red;</xsl:attribute>
    </xsl:otherwise>
  </xsl:choose>
  <xsl:value-of select="@Sales"/>
</span>

As you can see, the code is tighter, and only the style attribute varies based on the value of Sales.

Let’s look at another example.  There are many times when it is useful to render a <select> in your XSL.  The .NET folks would be wanting to use an <asp:DropDownList> control, but it doesn’t need to be that complicated.  Your XSL can render the <select> and you have full control over how it works.

<xsl:template name="Years">
  <xsl:param name="AnnualRows"/>
  <select size="1" id="YearsSelect">
    <xsl:attribute name="onchange">
      document.location =
        &apos;<xsl:value-of select="$URL"/>&apos; +
        &apos;?Year=&apos; + this.options[selectedIndex].value;
    </xsl:attribute>
    <xsl:for-each select="$AnnualRows">
      <xsl:sort select="@Year" order="descending"/>
    <option>
      <xsl:if test="$Year = @Year">
        <xsl:attribute name="selected">
          <xsl:value-of select="selected" />
        </xsl:attribute>
      </xsl:if>
      <xsl:attribute name="value">
        <xsl:value-of select="@Year" />
      </xsl:attribute>
      <xsl:value-of select="@Year" />
    </option>
    </xsl:for-each>
  </select>
</xsl:template>

In this example from a project I’m working on, I use <xsl:attribute> quite a few times.  It’s useful for variably setting attributes, as we’ve already covered, but you can also use it to attach script to events.  In line 4 above, I’m able to set up a redirect in JavaScript when the value of the dropdown changes (the user makes a selection).  This is a trick I use all the time: I pass the selected value back to the same page as a Query String parameter to change the filtering on the page. (I’ve set the $URL variable to the value of the URL IIS Server Variable.)

This example shows another nice use of <xsl:attribute> to set the selected value in the dropdown.  I’m not showing it, but I’ve got the variable $Year set to the value of the Year Query String parameter. If the value for the Year column matches the value of the $Year variable, I set the selected attribute using <xsl:attribute>.  This makes that value selected in the dropdown.

Finally, I use <xsl:attribute> to set the value of the option.  This can be even more helpful if you want to do something like combine to column values together in the dropdown or do some other sort of calculation.

Of course there’s more to come in this series.  I won’t quit until I run out of bit and pieces (or you stop reading!).