Microsoft

Blog Categories

Subscribe to RSS feed

Archives

Using the XSLT List View Web Part to style your data – SP 2010

SharePoint 2010 has finally done away with displaying list data using CAML with the XSLT list view web part. Now you can take advantage of the flexibility that XSLT can offer you. This is not to say that you can’t use your previous CAML statements in SP 2010, they are still supported, but hopefully after you see what is possible with the new XSLT list view web part you will leave CAML behind.

There are two main ways that you can change the view of your data. Use conditional formatting just like you do in Excel, or editing the XSLT directly. It is true that you could use XSLT with the Content Query Web Part in SP 2007, but in SP 2010 it is a lot more user-friendly. To show you some examples of the new functionality I created a list with professional athletes and the sports they play that we can play around with.

First you’ll want to add the XSLT list view web part to a page. I created a new page in SP Designer 2010 and then in the Insert tab selected the Data View option. From there just select the type of data you want to display, I’ll be using data from the ‘Players’ list.

clip_image002

Conditional formatting, basically, works the same as in Excel. You select a value, add a condition for that value to meet, and then apply a rule to that item. Here I will set all rows where the Sport = Baseball to have a red background.

clip_image004 clip_image006

It is also very straightforward to group and sort items, which I am a very big fan of. Clicking the Sort & Group button on the ribbon gives you options to sort and group items in different ways. I am going to group the list items by sport and have all groups expanded by default. It is interesting to note that in both the conditional formatting and sorting and grouping, all fields (and even some properties for these fields) can be used for calculations or groupings, even the default fields like ‘FileDirRef’.

clip_image008

And the result:

clip_image010

The built in functions to help you display data in different ways is very helpful, but the real customization comes into play when you play with the XSLT directly. In SP Designer you can switch to either the ‘Split’ or ‘Code’ mode which will show you the XSLT currently on the page so you can edit or create your own XSLT template to use. I created a template with simple ‘if’ statements to display a corresponding picture depending on the value for the Sport column. Here are the statements I added:

<xsl:if test="normalize-space($thisNode/@Sport) = 'Baseball'">
<img alt="" src="/Images1/baseball.jpg"></img>
</xsl:if>
<xsl:if test="normalize-space($thisNode/@Sport) = 'Basketball'">
<img alt="" src="/Images1/basketball.jpg"></img>
</xsl:if>
<xsl:if test="normalize-space($thisNode/@Sport) = 'Football'">
<img alt="" src="/Images1/football.jpg"></img>
</xsl:if>
<xsl:if test="normalize-space($thisNode/@Sport) = 'Golf'">
<img alt="" src="/Images1/golf-ball.jpg"></img>
</xsl:if>
<xsl:if test="normalize-space($thisNode/@Sport) = 'Soccer'">
<img alt="" src="/Images1/soccerBall.jpg"></img>
</xsl:if>

.ExternalClass827869EC849748BA97C0C651FF0B96D9 .externalclass0a016e8b1cbf4f49bf33d5539400146c .csharpcode, .ExternalClass827869EC849748BA97C0C651FF0B96D9 .externalclass0a016e8b1cbf4f49bf33d5539400146c .csharpcode pre
{font-size:small;color:black;font-family:consolas, “courier new”, courier, monospace;background-color:#ffffff;}
.ExternalClass827869EC849748BA97C0C651FF0B96D9 .externalclass0a016e8b1cbf4f49bf33d5539400146c .csharpcode pre
{margin:0em;}
.ExternalClass827869EC849748BA97C0C651FF0B96D9 .externalclass0a016e8b1cbf4f49bf33d5539400146c .csharpcode .rem
{color:#008000;}
.ExternalClass827869EC849748BA97C0C651FF0B96D9 .externalclass0a016e8b1cbf4f49bf33d5539400146c .csharpcode .kwrd
{color:#0000ff;}
.ExternalClass827869EC849748BA97C0C651FF0B96D9 .externalclass0a016e8b1cbf4f49bf33d5539400146c .csharpcode .str
{color:#006080;}
.ExternalClass827869EC849748BA97C0C651FF0B96D9 .externalclass0a016e8b1cbf4f49bf33d5539400146c .csharpcode .op
{color:#0000c0;}
.ExternalClass827869EC849748BA97C0C651FF0B96D9 .externalclass0a016e8b1cbf4f49bf33d5539400146c .csharpcode .preproc
{color:#cc6633;}
.ExternalClass827869EC849748BA97C0C651FF0B96D9 .externalclass0a016e8b1cbf4f49bf33d5539400146c .csharpcode .asp
{background-color:#ffff00;}
.ExternalClass827869EC849748BA97C0C651FF0B96D9 .externalclass0a016e8b1cbf4f49bf33d5539400146c .csharpcode .html
{color:#800000;}
.ExternalClass827869EC849748BA97C0C651FF0B96D9 .externalclass0a016e8b1cbf4f49bf33d5539400146c .csharpcode .attr
{color:#ff0000;}
.ExternalClass827869EC849748BA97C0C651FF0B96D9 .externalclass0a016e8b1cbf4f49bf33d5539400146c .csharpcode .alt
{background-color:#f4f4f4;width:100%;margin:0em;}
.ExternalClass827869EC849748BA97C0C651FF0B96D9 .externalclass0a016e8b1cbf4f49bf33d5539400146c .csharpcode .lnum
{color:#606060;}

And here is the result:

clip_image014

The SharePoint team has definitely put a lot of work into giving users many more options to display simple data out of the box. With a little more work you can display the data any way you like, and unlike with SP 2007 and the Content Query Web Part, SP Designer 2010 gives you instant feedback on how your custom XSLT is going to look on the page. Hopefully the new features offered with the XSLT List View Web Part will make displaying data across your SP 2010 site much easier.

Tags: , ,

One thought on “Using the XSLT List View Web Part to style your data – SP 2010

Leave a Reply