How to customize a grouped view in the Data View web part

How about to use a Data View Web Part (DWWP) to display a grouped view of news pages by year and month? Let’s improve the findability and give the users a simply way to browse the news pages in a news archive page. This technique could be useful for any kind of item in a list; you could for example do the same to display documents from a library or items in an announcement list.

Click News pages

►

Some things we need to do:

• Create two calculate columns that will serve us when the items is created or published; this is an easy way to create the grouping.
• Create a click function (expand / collapse) for the whole row, for the year and month in the group header.
• Show number of items for each month
• Sort the month by their actual numbers but display the month by their names

Let’s start!

• Open and the site that containing the news pages with SharePoint Designer 2010, in the example it’s a news site based on the publishing site template in SharePoint 2010 server.
• Add two new calculated columns to the Pages library. You can do this in SharePoint Designer or by the browser. Name the first column to ArticleYear with data type Single line of text. Us the formula: =TEXT([Article Date],”YYYY”) name the next column ArticleMonth with data type Single line of text. Us the formula: =TEXT([Article Date],”MM”). In this example I use a column called Article Date and I use this column in the actual page layout for the news pages. Be sure to include this column in your page layout and set dates to the news pages in the library. If you don’t want to use this column you can use the inbuilt column Created instead.
• Create a new aspx page with SharePoint Designer and open this page, save this somewhere in the site. Place the cursor inside the form tag and click Insert in the ribbon. Click at Display Item Form button and select Pages.
• Before you’ll get into the code view, do the settings for the DVWP you’ll need with help of the ribbon buttons. Set the paging, filter, sort and grouping like this:
  • Paging eq display All Items
  • Add / Remove columns. Display this columns: Title, Article date, ArticleYear and ArticleMonth
  • Filter eq article date Not Null
  • Sort order eq Article Date desc
  • Group ArticleYear by asc, show group header and make it collapse
  • Group ArticleMonth by asc, show group header and make it collapse

At this point you’ll have the basic stuff needed to get going with the UI customizations. Now you it’s your turn to do the branding and start work on functionality. If you want to see my specific example, you can download the aspx page, the CSS and the image (see the bottom of this blog post) where you’ll see the HTML structure, how to set onclick at rows, how you todisplay month names how to count a nodeset to display numer of news items per each month. In this page you’ll also how you can display month names. When you done, you can save the web part as to a file and upload this to the news site and put in a news archive page.

A quick view of things you can do more

Display month names

<xsl:choose>
 <xsl:when test="$fieldvalue='01'">January</xsl:when>
 ---
 <xsl:when test="$fieldvalue='12'">December</xsl:when>
 <xsl:otherwise></xsl:otherwise>
</xsl:choose>

Get number of items (news) per each month:

<xsl:value-of select="count($nodeset)"/>

Onclick event for the rows

<tr class="YearRow" id="group{$groupid}" style="display:{$displaystyle}" onclick="javascript:ExpGroupBy(this);return false;">

If you consider to use divs instead of tables, keep in mind that the ExpGroupBy function that lives in the Core.js needs to be overridden to match you structure.

One thing more, if you like to have this grouped DVWP connected to a a list instead of a Page library, no problems! The only thing that will be different is the link to the actual item, try rewrite the link like this:

<a href="{@FileDirRef}/DispForm.aspx?ID={@ID}"><xsl:value-of select="@Title" /></a>

Download the files here

/ Christian

Advertisement