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.
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.
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’.
And the result:
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:
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.
Hi , please let me know how to display above result in horzontal manner.
Thanks and Regards
Kriss