Customizing List Views with XSLT Transformations in SharePoint Designer 2007

Article
10/16/2013

Summary: By using Microsoft Office SharePoint Designer 2007 and custom XSLT, you can present data from a Windows SharePoint Services list as a bar graph through a Data View Web Part.

Office Visual How To

Applies to: Windows SharePoint Services 3.0, Microsoft Office SharePoint Server 2007, Microsoft Office SharePoint Designer 2007

Anup Kafle, 3Sharp

February 2008

Data stored in a Windows SharePoint Services 3.0 list can be presented in more ways than a simple tabular layout. By using Microsoft Office SharePoint Designer 2007 and custom XSLT, you can present the same list data graphically—for example, as a bar graph. This Visual How To illustrates the steps for presenting list data as a bar graph through a Data View Web Part. The data source list used in this example is the standard task list that is stored in a Windows SharePoint Services 3.0 team site. The bars in the graph represent the total percentage of tasks for each status value.

Start with a SharePoint task list that contains some sample data. Assign each task one of these status values: Not Started, In Progress, Completed, or Deferred. Your goal is to display data from this task list in the form of a bar graph, where the bars represent the percentage of tasks for each status value. By using Office SharePoint Designer 2007, you can achieve this goal in three key steps:

Insert a Data View Web Part in a Web Part zone.
Bind the SharePoint task list as the data source for the Data View Web Part.
Modify the autogenerated XSL in the Data View Web Part.

To insert a Data View Web Part

Start Office SharePoint Designer 2007.
Click File, click Open Site, and open the site that contains the task list.
Double-click default.aspx to open it for editing.
Click in the Web Part zone where you want to add the Data View Web Part.
Click Data View, and then click Insert Data View.

This procedure inserts a Data View Web Part in the selected Web Part zone in the default.aspx page. Office SharePoint Designer 2007 also displays the Data Source Library task pane on the right.

Now use the Data Source Library task pane to connect the Data View Web Part with the task list.

To bind the Data View Web Part to the task list

In the task pane, expand the SharePoint Lists category.
Right-click Tasks, and click Show Data. This action displays the Data Source Details task pane. (See Figure 1).

Figure 1. Data Source Details task pane
Click the Status field.
Click the Insert Selected Field as list, and click Multiple Item View.

The Data View Web Part is now connected to the task list.

Modify the Data View Web Part with XSLT

At this point, the Data View Web Part displays status values for all tasks. You are not interested in listing each status value for each task, however. Rather, you want to display this entire list graphically. You can do so by modifying the XSLT in the Data View Web Part.

Display the page in split mode by clicking View, pointing to Page, and clicking Split. This view enables you to visualize the Web Part as you modify its code. The code that is highlighted in the code window is the autogenerated code behind the Data View Web Part you just inserted. Note that the Web Part code conforms to an XML layout that is similar to the following.

<WebPartPages:DataFormWebPart>
  <DataSources />
  <ParameterBindings />
  <datafields />
  <XSL>
    <xsl:stylesheet>
      <xsl:template>...</xsl:template>
      <xsl:template>...</xsl:template>
      ...
      ...
    </xsl:stylesheet>
  </XSL>
</WebPartPages:DataFormWebPart>

As the name implies, the code inside the XSL element is the XSL markup for the data view that dictates how the data should be displayed. Currently, the XSL is set to display data in a tabular layout. To change the layout to a bar graph, simply modify the templates inside the XSL element.

Locate the <xsl:template> element whose name attribute value is "dvt_1". Replace the entire template code with the following.

<xsl:template name="dvt_1">
  <xsl:variable name="Rows" 
   select="/dsQueryResponse/Rows/Row"/>
  <xsl:variable name="dvt_RowCount" 
   select="count($Rows)" />
  <xsl:variable name="IsEmpty" 
   select="$dvt_RowCount = 0" />
  <xsl:call-template name="dvt_1.body">
    <xsl:with-param name="Rows" select="$Rows"/>
  </xsl:call-template>
</xsl:template>

Similarly, replace the <xsl:template> element whose name attribute value is "dvt_1.body" with the following.

<xsl:template name="dvt_1.body">
  <xsl:param name="Rows" />
  <xsl:variable name="NotStarted" 
   select="count(/dsQueryResponse/Rows/Row[normalize-space(@Status)='Not Started'])" />
  <xsl:variable name="InProgress" 
   select="count(/dsQueryResponse/Rows/Row[normalize-space(@Status)='In Progress'])" />
  <xsl:variable name="Completed" 
   select="count(/dsQueryResponse/Rows/Row[normalize-space(@Status)='Completed'])" />
  <xsl:variable name="Deferred" 
   select="count(/dsQueryResponse/Rows/Row[normalize-space(@Status)='Deferred'])" />
  <xsl:variable name="AllTasks" 
   select="count(/dsQueryResponse/Rows/Row)" />
  <xsl:variable name="pctNotStarted" 
   select="$NotStarted div $AllTasks" />
  <xsl:variable name="pctInProgress" 
   select="$InProgress div $AllTasks" />
  <xsl:variable name="pctCompleted" 
   select="$Completed div $AllTasks" />
  <xsl:variable name="pctDeferred" 
   select="$Deferred div $AllTasks" />
  <table width="100%" cellspacing="0" cellpadding="2" 
   style="border-right: 1 solid #C0C0C0; 
   border-bottom: 1 solid #C0C0C0; 
   border-left-style: solid; border-left-width: 1; 
   border-top-style: solid; border-top-width: 1;">
    <xsl:call-template name="ChartRow">
      <xsl:with-param name="RowName">
        Not Started
      </xsl:with-param>
      <xsl:with-param name="Value">
        <xsl:value-of select="$NotStarted"/>
      </xsl:with-param>
      <xsl:with-param name="PercentValue">
        <xsl:value-of select="$pctNotStarted"/>
      </xsl:with-param>
    </xsl:call-template>
    <xsl:call-template name="ChartRow">
      <xsl:with-param name="RowName">
        In Progress
      </xsl:with-param>
      <xsl:with-param name="Value">
        <xsl:value-of select="$InProgress"/>
      </xsl:with-param>
      <xsl:with-param name="PercentValue">
        <xsl:value-of select="$pctInProgress"/>
      </xsl:with-param>
    </xsl:call-template>
    <xsl:call-template name="ChartRow">
      <xsl:with-param name="RowName">
        Completed
      </xsl:with-param>
      <xsl:with-param name="Value">
        <xsl:value-of select="$Completed"/>
      </xsl:with-param>
      <xsl:with-param name="PercentValue">
        <xsl:value-of select="$pctCompleted"/>
      </xsl:with-param>
    </xsl:call-template>
    <xsl:call-template name="ChartRow">
      <xsl:with-param name="RowName">
        Deferred
      </xsl:with-param>
      <xsl:with-param name="Value">
        <xsl:value-of select="$Deferred"/>
      </xsl:with-param>
      <xsl:with-param name="PercentValue">
        <xsl:value-of select="$pctDeferred"/>
      </xsl:with-param>
    </xsl:call-template>
  </table>
</xsl:template>

<xsl:template name="ChartRow">
  <xsl:param name="RowName"></xsl:param>
  <xsl:param name="Value"></xsl:param>
  <xsl:param name="PercentValue"></xsl:param>
  <tr>
    <td class="ms-formbody" width="125px" 
     style="vertical-align:middle">
      <xsl:value-of select="$RowName"/>: 
      <xsl:value-of select="$Value" /> -
      <xsl:call-template name="percentformat">
        <xsl:with-param name="percent" 
         select="$PercentValue"/>
      </xsl:call-template>
    </td>
    <td>
      <table width="100%" >
        <tr>
          <td width="{($PercentValue*100)}%" 
           height="15px" class="ms-selected" 
           style="padding:0px;">
            <img src="/_layouts/images/blank.gif" 
             width="1px" alt=""/>
          </td>
          <td width="100%" />
        </tr>
      </table>
    </td>
  </tr>
</xsl:template>

<xsl:template name="percentformat">
  <xsl:param name="percent"/>
  <xsl:choose>
    <xsl:when 
     test="format-number($percent, '#,##0%;-#,##0%')= 'NaN'">
       0%
    </xsl:when>
    <xsl:otherwise>
    <xsl:value-of 
     select="format-number($percent, '#,##0%;-#,##0%')" />
    </xsl:otherwise>
  </xsl:choose>
</xsl:template>

Note that in addition to the dvt_1.body template, the preceding code introduces two new templates: ChartRow and percentformat. The ChartRow template is called from the modified dvt_1.body template; the percentformat template is called from the ChartRow template.

In the dvt_1.body template, a variable is defined for each status value ($NotStarted, $InProgress, $Completed, $Deferred) and for all tasks ($AllTasks). The value for each variable is the count of rows that have the specified status value. For example, the count of all completed tasks is produced by the following line of code.

select="count(/dsQueryResponse/Rows/Row[normalize-space(@Status)='Completed'])"

The XSL parameter @Status refers to the name of the field in the data source. In a similar way, the percent-completed value for each status is defined and calculated separately. The percentage of completed tasks, for example, is calculated as the following line of code.

select="$Completed div $AllTasks"

In the bar graph, the bar is represented by a table with one row and two columns. The width of the left cell, which represents the length of the bar, is determined by the PercentValue variable, which is represented as follows in HTML.

td width="{($PercentValue*100)}%"

This table cell also has a CSS style class, ms-selected, applied to it. The ms-selected style is defined in the core.css style sheet file with the following attributes.

.ms-selected {
  background-position:left top;
  color:#000000;
  background-image:url("/_layouts/images/filedialogselected.gif");
  background-color:#FFE499;
  border-top:1px solid #FFE499;
  border-bottom:1px solid #FFE499;
  background-repeat:repeat-x; }

The background image, filedialogselected.gif, is what makes the cell (that is, the bar) appear yellow.

To view the updated Web Part, save your changes in Office SharePoint Designer 2007 and refresh the modified ASPX page in the browser. You see a sleek new Web Part with a bar graph, similar to the one in Figure 2.

Figure 2. Data View Web Part after XSLT customization

You can use the technique shown in this Visual How To to summarize any SharePoint list data graphically based on a field that contains known values. The ability to generate editable XSL with just a few clicks in Office SharePoint Designer 2007 makes the task easy. You can modify the XSL shown here to display the data differently, such as a vertical bar graph instead of a horizontal one.

Customizing List Views with XSLT Transformations

Watch the Video

Video Length: 00:05:25

File Size: 9.05 MB WMV

Share via

Customizing List Views with XSLT Transformations in SharePoint Designer 2007

To insert a Data View Web Part

To bind the Data View Web Part to the task list

Additional resources