Customizing List Views with XSLT Transformations in SharePoint Designer 2007
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.
Applies to: Windows SharePoint Services 3.0, Microsoft Office SharePoint Server 2007, Microsoft Office SharePoint Designer 2007
Anup Kafle, 3Sharp
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:
To insert a Data View Web Part
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
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.
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.
Similarly, replace the <xsl:template> element whose name attribute value is "dvt_1.body" with the following.
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.
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.
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.
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.
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.
Video Length: 00:05:25
File Size: 9.05 MB WMV