XLV is the default List view technology in SharePoint 2010 replacing the XSLT LVWP used within 2007. Within XLV the data is generated directly from the ViewXML providing us with a consistent way of formatting the results. More information can be found on the SharePoint Team Blog and on MSDN.
To format a web part, edit the web part and expand the Miscellaneous property section, you will notice an XSL Link property. This allows us to override the default formatting by entering a path to an alternate XSL transform file.
To illustrate, upload the following XML to a folder in the Style Library of your site collection with the name “xlvAll.xsl”. Now add a task web part to your home page and set the XSL Link property to point to the file. The web part should render the raw ViewXml, this is a great starting point for formatting the results.
1: <?xml version="1.0" encoding="UTF-8"?>
2: <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
3: <xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/>
4: <xsl:template match="/">
5: <xmp>
6: <xsl:copy-of select="*"/>
7: </xmp>
8: </xsl:template>
9: </xsl:stylesheet>
So lets format the results of the web part, upload the following XML to the same Style Library folder with the name “xlvTask.xsl”. Update the XSL Link property to point to the file.
1: <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" xmlns:o="urn:schemas-microsoft-com:office:office">
2: <xsl:template match="/">
3: <table class="ms-listviewtable" cellspacing="0" cellpadding="1" width="100%" border="0">
4: <thead>
5: <th class="ms-vh2">Title</th>
6: <th class="ms-vh2">Status</th>
7: <th class="ms-vh2">Percent Complete</th>
8: </thead>
9: <xsl:apply-templates />
10: </table>
11: </xsl:template>
12:
13: <xsl:template match="Row">
14: <tr>
15: <td>
16: <xsl:value-of select="@Title"/>
17: </td>
18: <td>
19: <xsl:value-of select="@Status"/>
20: </td>
21: <td>
22: <xsl:value-of select="@PercentComplete"/>
23: </td>
24: </tr>
25: </xsl:template>
26:
27: </xsl:stylesheet>
This should give you something resembling the image below:
While being able to override the formatting of the web part is useful it is not always appropriate, sometimes we just need to format a couple of columns, this is where the new format comes into its own. The XSL below will override the status and the percent complete fields to display them graphically within the existing web part and the best bit is that we can re-use this across multiple web parts.
1: <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" xmlns:o="urn:schemas-microsoft-com:office:office">
2: <xsl:include href="/_layouts/xsl/main.xsl"/>
3: <xsl:include href="/_layouts/xsl/internal.xsl"/>
4:
5: <xsl:template name="FieldRef_body.Status" match="FieldRef[@Name='Status']" mode="body">
6: <xsl:param name="thisNode" select="."/>
7: <xsl:choose>
8: <xsl:when test="$thisNode/@*[name()=current()/@Name] = 'Completed'">
9: <img src="/_layouts/images/IMNON.png" alt="Status: {$thisNode/@Status}"/> 10: </xsl:when>
11: <xsl:when test="$thisNode/@*[name()=current()/@Name] = 'In Progress'">
12: <img src="/_layouts/images/IMNIDLE.png" alt="Status: {$thisNode/@Status}"/> 13: </xsl:when>
14: <xsl:otherwise>
15: <img src="/_layouts/images/IMNBUSY.png" alt="Status: {$thisNode/@Status}"/> 16: </xsl:otherwise>
17: </xsl:choose>
18: </xsl:template>
19:
20: <xsl:template name="FieldRef_Number_body.PercentComplete" ddwrt:dvt_mode="body" match="FieldRef[@Name='PercentComplete']" mode="Number_body" ddwrt:ghost="" xmlns:ddwrt2="urn:frontpage:internal">
21: <xsl:param name="thisNode" select="."/>
22: <div style="position:relative;width:100%;height:15px;background-color:red;color:white;">
23: <div>
24: <xsl:attribute name='style'>height:15px;background-color:green;width:<xsl:value-of select="translate($thisNode/@PercentComplete,' %','')"/>%</xsl:attribute>
25: </div>
26: <div style="position:absolute;top:0;left:0;text-align:center;width:100%"><xsl:value-of select="$thisNode/@PercentComplete"/></div>
27: </div>
28: </xsl:template>
29: </xsl:stylesheet>
This results in the following:
I should mention that you of course can open SharePoint Designer and format the web parts on the page however this is not always appropriate.
