XSL Based Views in SharePoint 2010: The XsltListViewWebPart

Posted on 12/24/2009 @ 12:48 AM in #SharePoint by | Feedback | 8261 views

The below article uses excerpts from my upcoming book on SharePoint 2010.

 

If you’d ask me, what the biggest pain in the donkey in SharePoint 2007 was, I’d have to say – it was writing custom views on lists. Seriously, that was a royal pain! Don’t believe me? Well, visit the SharePoint university of reverse engineering, reverse engineer the CAML for any list – heck pick one, ANY ONE! Lets start with the Custom List, and just SEE how big the CAML is for the “Views” section. Not just big, it is ugly! Uglier than yeti’s butt. And has more issues than Time magazine, and is harder to maintain than a 16 year old Britney spears! And by the time you manage to get the first HTML table working in your view, your mood is already more foul and black than satan’s stool sample. You get my point! It was just awful.

Well, in SP2010, you don’t have to deal with that crap anymore! like seriously fer sure! Views on lists in SP2010 are much cleaner and much nicer. And they revolve around the XsltListViewWebpart.

This new XsltListViewWebpart WebPart doesn’t just fix the lists issue. There used to be a another rather important WebPart in SharePoint 3.0 called as the DataViewWebPart. The XsltListViewWebPart is a better and improved replacement for the DataViewWebPart. The DataViewWebPart is still available, but the XsltListViewWebPart is much easier and better to use, and I hope you will agree with me by the end of a real world example.

To begin with, I am going to create a simple list based on the Custom List template. Then go ahead and add a column and call it "Population". This column will hold numeric data, so make it a "Number" kind of a column. Then, I went to http://www.census.gov/ipc/www/idb/ranks.php and got myself some sample data. You can tell that I am trying to come up with some data for a real world example - if you prefer to be adventurous and create your very own sample data, be my guest!

Once my list is populated with some sample data, I will next start using the XsltListViewWebPart to customize the presentation of data in my List.

To recap, my source data is a Custom List, with a column called "Population". I put in some sample data to show populations of the top 50 most populous countries in the world.

First, start SharePoint Designer 2010. SharePoint designer 2010 is a tool that ships with Office 2010. It is intended for use by developers and moderately sophisticated business users. The eqiuvalent tool in SharePoint 2007 was SharePoint designer 2007. SharePoint Designer 2010 can be used only with SharePoint 2010 sites it cannot be used with SharePoint 2007 sites. Thus if you have SharePoint 2007 sites to manage as well, you can install SharePoint designer 2007 and SharePoint designer 2010 side by side on the same machine. However it is important to note that if you need to install SharePoint designer 2007 and SharePoint designer 2010 on the same machine both of them will need to be 32 bit only. Thus you cannot have 64 bit office 2010 and SharePoint designer 2007 on the same machine. Personally speaking, I virtualize my work, so this is never an issue for me anyway.

You cannot have 64 bit Office 2010 and 64 bit SharePoint Designer 2010 and SharePoint designer 2007 on the same machine. You can have them side by side in 32 bit versions.

Assuming that you have SharePoint designer 2010 open and running on your machine now click on the open site button in SharePoint designer as shown below.

When prompted to enter a site name enter, http://sp2010. If you have worked with SharePoint designer 2007 before you would note that SharePoint designer 2010 presents a completely different task oriented UI. What I intend to do next is to edit the site home page and use the XsltListViewWebPart to display the information in that country's list in a user friendly form.

In SharePoint designer 2010 with your site open in the customization section click on the edit sites home page link as shown below.

Clicking on the edit site home page link opens the home page of the site in edit mode. Next click on the left WebPartZone, and then click on the insert on the ribbon in SharePoint designer. Under the insert can look for the data view button. Click on the data view button and choose the countries list under lists as shown in the figure below.

This would insert the country's list using the XsltListViewWebPart as shown in the figure below

If you saved the homepage in SharePoint Designer at this time and refresh the page in your browser you should see the country's list data the surface on the homepage of the site.

But let's make it a little bit more interesting. Go ahead and click on any of the numeric populations cells you see on the right. With your cursor in the numeric population cell look for the options tab under list view tools in the SharePoint Designer ribbon. Click on the conditional formatting button and then choose format column as shown in the figure below.

You will next be prompted with two dialog boxes the first asking you for a condition for the column, and the second asking you for a visual formatting style. Using these two dialog boxes I choose to format countries with population greater than 80,000,000 with a background color of pink. No go ahead and save the page and using your browser, visit http://sp2010. You would note that the country's list information is now shown on the homepage. Go ahead and sort the title column in ascending order. You would note that the formatting information you specified is carried through even when the sort order is changed. This can be seen in the figure below.

As you can see the XsltListViewWebPart gives you immense flexibility in formatting how your list looks in the browser. 

Now check this out rather interesting thing. I'd like you to try is to visit the country's list in the browser one more time, and click on the list tab in the ribbon. Look for the "Modify View" dropdown and choose "Modify in SharePoint designer" as shown in the figure below.

When that page opens, check out it’s source code. As you can see the view pages in SharePoint 2010 are also customized using the XsltListViewWebPart.

This is a major improvement over SharePoint 2007's CAML based views.

Sound off but keep it civil:

Older comments..


On 5/20/2010 3:33:51 PM David Remillard said ..
Great post! In the old Dataform Web Part we used to be able to specify CrossList queries, but I haven't been able to make it work in 2010. For example, pulling all the tasks from all the subwebs in a site collection. Have you tried that yet?


On 7/14/2010 2:08:22 PM Sandeep said ..
David , Answer to that will be Content Query Webpart


On 11/30/2010 10:50:08 PM mc said ..
While the XsltListViewWebPart may offer more power from the GUI, it's XSLT is so much more complicated and hard to modify.


On 12/8/2010 5:43:46 AM Pankaj said ..
Thanks for this Nice Post.


On 4/5/2011 4:55:14 AM Drasko Popovic said ..
XsltListViewWebpart is pretty useless. MC has right, XSLT is much more complicated so designers can't use it (they can use it only in trivial cases such as this demo). I can't see them implementing custom view pattern with this web part.


For developers it's useless too because it's much more easier to create web part than to create XsltViewWebPart with custom html. And XsltViewWebPart with external xslt doesn't work in anonimous mode (caching problem).


So bring me back Data view part. I would manually change GUIDs and work with CAML. it's smoother experience than this.


On 5/18/2011 5:21:02 PM Joel said ..
I totally agree. If you pick up at the end of your instructions and then try any significant modifications to the format of the list items -- say a nicely formatted view with a Thumbnail image along the left side and a footer (showing info about the date of the post, author, category, for example) below the text that's on the right -- you'll see that the xsl overly complex and difficult to work with. It seems like the assumption is that everyone loves the simple rows and columns view. Most people I work with want anything but that type of presentation.