This is one of the most popular requirements I always get from clients. Especially when they have large collection of documents and want to give their user an easy way to browse document items in Data Form Web Part (DFWP).

For example, you have a list of documents displayed in DFWP and each document has "Published Date" field. How can you group DFWP items by its "Published Date" month value?

Goal

Solution

Luckily, all you need to do is to change a few lines in XSL that renders your DFWP. Here is step by step of how to do it.

1. Add "Group By" to Data Form Web Part.

Here is what your original DFWP should look like without any "Group by" on field

In SharePoint Designer (SPD), open DFWP's Common Data View Tasks and select "Sort and Group"

Select DateTime field you want to Group by, In this example it is "Published Date". "Show group header" is also selected here because this way you can see what values are used to group items

After above steps, you can see the DFWP is correctly grouped on "Published Date" field. But it treats each DateTime value as a different group value.

By default, DFWP group DateTime field based on their actual Date (YYYY-MM-DD) value. Not just year and month (YYYY-MM).

Since requirement here is to group items with same month (item with "Publsihed Date" 08/16/2008 and 08/03/2008 in this example) in same group. Further steps are needed.

2. Modify XSL

Inside the XSL that renders your DFWP, search for "dvt_groupfield". If you use "Search All" within XSL, <xsl:when test="not ($dvt_groupfield)"> is the line you want.

And you will see this section,

Change this to,

Above change is critical, that's where you specify how you want to group items in DFWP.

The original @PublishedDate value is presented in format "YYYY-MM-DDTHH:MM:SSZ". substring(@PusblishedDate,1,7) gives us "YYYY-MM" which is what we want DFWP to group by. Note: In XSL, index starts from 1 not 0.

You will see this after above changes

Items are now group correctly, but group header still displaying incorrect text. Because In DFWP XSL, group value and header value are generated from different template. You have changed first one (in above step), and now last step is to change header value.

Just scroll down from where you changed group value in XSL a bit, and you should see this line

Change ddwrt:GenDisplayName(string(@PublishedDate)) to substring(@PublishedDate,1,7). Like following,

And you should get this as result

You can also change Group Heading to display in format YYYY-MMM (like the one in first screen shot) , or anything you like by changing above XSL.

Part 1. Build your own data source for Data Form Web Part

Part 2. Use XSLT generated from SharePoint Designer to display data  

In last post I have described how to build a data source and use it in custom DataFormWebPart to query cross-site lists.

Now, I am going to explain how you can display result data easily by using XSLT from SharePoint Designer.

Like I have mentioned in previous post, you should build data result in specific format. The format respects the XSLT that will be generated by SharePoint Designer. The format looks like this

Atrribute 1,2,3 can be field name.  

1. Create a new page with DataFormWebPart

Once you have data present in above format. You can then go into SharePoint Designer and open the library/list that your cross-site query will be queried on. And create a new temporary .aspx page in this library.

In our case, this page can be created in any sub-site's page library.

After you created a new page, insert a data view (DataFormWebPart)  control to this page.

And select a data source from the data source panel for this control

In this example we select "Pages" library as our data source. Because we want to use the site columns for the content type used in this page library as display fields. (Same fields we queried in result data in Part 1.)

Surely You can create this temporary .aspx page in any place you like. But create it under right site avoid extra works for set up data source library manually. To get site columns you want.

2. Customise the presentation of DataFormWebPart

Now, you can select all the fields you wanted to display in your cross-site lists DataFormWebPart. And insert them to the control.

Sample data view will be displayed on the page for you to preview the result.

3. Copy XSLT

If everything looks good to you, right click on the DataFormWebPart on the page and select "Web Part Properties..".

In XSL Editor box, copy the XSLT and save it to separate file for your custom cross-list DataFormWebPart to use.  

Now, You should be able to display data without any changes to this XSLT. Because display fields matches attributes of our result XML data.

At this stage you have both custom cross-site DataFormWebPart control and XSLT presentation file.

Note

If you changed the display layout in Step 2 to enable Sorting and Filtering on column headers. You may find filtering does not work properly. It returns no data for you to perform filtering when you click on column headers.

It is because the default implementation of the method (the one return filtering data)  in DataFormWebPart class does not support our custom data source.

Coming up..

In Part 3. I will post about how to get filtering to work on column headers!