John's Workshop

It’s time for another blog post about one of those nice things you can accomplish using only SharePoint Designer and without doing any custom development. I’m talking about visually enhancing your list views by customizing the XSL stylesheet that the XsltListViewWebPart uses to render the list view in the browser.

Introduction

I’d like to start things off by saying that I’m not the first one who has thought of using bar graphs to enhance their list views (although I didn’t know that when I’ve originally had the idea). I have read several blog posts on this subject since then and all of them were about using SharePoint Designer 2007, whereas I’m using SharePoint Designer 2010. However, because I believe that it is fair to give credit where credit is due, you can find these blog posts in the Links and Resources section at the end of the post.

Now that we’ve got that out of the way, let’s get started! We’ll start off with a very simple list, which contains information about our company’s sales results throughout the year. Here’s a picture to show you what I mean:

Okay, you get the picture (no pun intended). What we would like to accomplish here is to display the Quantity column values augmented by bar graphs, which would make it really easy to visually compare the sales results each month. Ladies and gentleman, fire up SharePoint Designer 2010 and fasten your seat belts.

Customizing the list view

Once SharePoint Designer is up and running, here’s what you have to do:

• Connect to the SharePoint site where the list you want to customize is located.
• On SharePoint Designer’s navigation pane, click Lists and Libraries.
• Click on the target list (my list title is MonthlySales) to navigate to its overview page.
• Once on the list overview page, click the New List View button on the ribbon bar.
• Choose a name for your list view:

  
  

  Oh, and here’s a useful tip: when choosing a name for your lists or list views, I tend to stay away from using non-alphanumeric characters (this includes whitespace, of course). By using, for example, WithBarGraphs as the name as opposed to All items with bar graphs, I am ensuring that my list URL remains nice and short, without any unnecessary escape codes (like %20 for space characters). Then, once the list view has been created, you can simply rename it using either SharePoint Designer (simply right-click on the view in the list of available views and select Rename) or by using the browser. By renaming the view later on, you are actually modifying its display name rather than the URL.

• Click on the newly created list view in the list of available views to open it in the WYSIWYG editor. Here’s what you should see in the design view:

  
  

  What I’ve actually done here is a minor tweak: I’ve aligned both the Quantity column header and values to the left. You can do this by placing the cursor inside the cell that contains the column header and using the Align Text Left button on the Home ribbon tab. Then, place the cursor inside any of the cells that contain the sales quantity value and use the text alignment button again.

• At this point, the XsltListViewWebPart is still using the uncustomized XSL stylesheet that SharePoint provides out of the box. To be able to make further customizations to the web part, we’ll have to force SharePoint designer to create a copy of the OOTB XSL stylesheet and embed it into the page. This way, we’ll have full access to the stylesheet and we’ll be able to customize the XSL directly from code view. To do all this, we’ll use the Customize XSLT button from the web part’s Design contextual tab:

  
  

  So, all you have to do is click Customize XSLT > Customize Entire View.

• Once the XSL stylesheet is loaded into the editor, move the cursor to any of the data-cells in the Quantity column. When you do this, SharePoint Designer should position you to the appropriate location inside the XSLT file which handles rendering the contents:

  
  

  All you need to do to get those nice-looking bar graphs is to replace that XSLT template with the following one:

  <xsl:template name="FieldRef_Number_body.Quantity" ddwrt:dvt_mode="body" match="FieldRef[@Name='Quantity']" mode="Number_body" ddwrt:ghost="" xmlns:ddwrt2="urn:frontpage:internal">
    <xsl:param name="thisNode" select="."/>
    
    <xsl:variable name="max" select="ddwrt:Max($thisNode//parent::*/Row/@Quantity)" />
    <xsl:variable name="val" select="format-number($thisNode/@Quantity div $max * 100, '#')" />
    <xsl:variable name="color" select="'blue'" />
  
    <div>
      <div style="float:left; width:30px;">
        <strong>
          <xsl:value-of select="$thisNode/@Quantity"/>
        </strong>
      </div>
      <div style="float:left; width:80%; padding:1px; border:1px solid black; margin-top:2px">
        <div style="width: {$val}%; background-color:{$color}; height:6px;" />
      </div>
    </div>
  
  </xsl:template><ol>
  
  

  Let’s take a few minutes and examine this template in more detail. The first thing we need to do is to set up a few variables that are going to help make our lives a bit easier. The most important thing here is to calculate the value of the current list item, expressed in percentage of the maximum value that’s displayed in the view. The first step towards this is by calculating the max Quantity value in the view:

    <xsl:variable name="max" select="ddwrt:Max($thisNode//parent::*/Row/@Quantity)" />
  

  We do this by constructing an XPath expression that will retrieve the Quantity attributes of all the list items and by passing these values to the Max() function of the ddwrt namespace.

  Then, we divide the current cell value with the max value multiplied by a hundred. This basically gives us a number between 0 and 100, which we’ll use to calculate the width of the bar graph. Note that we’re also using the format-number() function to round the number to an integer.

  The third variable is used for setting the bar graph color. Yes it is obviously hardcoded in there, but I had intentionally stored it into a variable to make future modifications easier, should the need occur. What’s also worth noting here is that, if you want to store a constant expression into an XSLT variable, you’ll have to surround it with additional quotes if you’re assigning it using the select attribute (like we’re going in the snippet above). Another way of setting the variable might be

  <xsl:variable name="color">blue</xsl:variable>
  

  The final part of the template is rendering the bar graph itself, which is pretty simple to do. Basically, we have an outer DIV container which has a black border and is of a specified width. The bar graph itself is rendered by using another DIV element inside the first one, and which will have its width attribute set to the correct percentage (the val variable). For production-quality solutions, I would recommend using CSS classes and custom CSS files instead of using inline styles, like I did for the example.

• Time to preview what the list view looks like so far. Make sure to save your changes and either navigate to the list view using the browser or use the Preview in Browser button on the Home ribbon tab:

  
  

  Well, this doesn’t look bad at all. You can immediately see how the values change each month.

• Here’s a bonus trick: let’s make the bar graphs use a bit of color, so we can not only see the difference between each month by comparing the bar widths, but we can also know whether the sales are within a specified value range. To do this, we’ll replace the existing color variable with this one:

  <xsl:variable name="color">
    <xsl:choose>
      <xsl:when test="$val &lt;= 20">red</xsl:when>
      <xsl:when test="$val &lt;= 40">orange</xsl:when>
      <xsl:when test="$val &lt;= 60">yellow</xsl:when>
      <xsl:when test="$val &lt;= 80">green</xsl:when>
      <xsl:otherwise>blue</xsl:otherwise>
    </xsl:choose>
  </xsl:variable>
  

  Now, here’s the preview:

  

  Not bad at all.

Alright, we are done for today. Like always, your feedback is welcome and, until next time, kind regards.

Links and Resources

• CSS Style Bar Graphs using Data Views
• Customizing List Views with XSLT Transformations in SharePoint Designer 2007
• How Do I get the max column value for a SP list in a custom add/edit form using SPD?
• XSLT Functions
• XPath Syntax

Be Sociable, Share!

•