Me & My SharePoint [FrontEnd]

© Christian Stahl – All about SharePoint branding & customizations

How to customize a grouped view in the Data View web part — September 18, 2011

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.

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 calculated column to ArticleYear with data type Single line of text. Us the formula: =TEXT([Article Date],”YYYY”) name the next calculated 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. If you’re using another language on the site than english, you may have to written the formulas a bit different, for example if you use the Swedish language you have to use ; instead of a comma character.
  • 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:when test="$fieldvalue='01'">January</xsl:when>
 <xsl:when test="$fieldvalue='12'">December</xsl:when>

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.

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>

One thing more, if you want to use this as an archive for news pages and don’t want to display the current year you can change the Rows varible to this:

<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row[not(contains(@ArticleStartDate,substring(ddwrt:TodayIso(),1,4)))]"/>

Download the files here

/ Christian

Book review: SharePoint 2010 Branding in Practice — September 6, 2011

Book review: SharePoint 2010 Branding in Practice

This book is for the web developer or designers that works and are quite familiar with branding in general and knows relevant techniques like CSS, HTML and JS and wants to know more about SharePoint 2010 branding; like approaches and best practices. You will find clear examples and advices to typical branding scenarios and it includes the code you’ll need related to the examples.

Hot spots from the book:

  • How to set up a visual studio solution structure for branding
  • Using module and provisioning techniques
  • Branding publishing sites v/s collaboration sites
  • Feature stapling for My site
  • Customizing search center
  • Branding list views
  • Client side interaction with web services
  • Third party UI components integration
  • A lot of code with step to step instructions

SharePoint 2010 Branding in Practice is probably not your first choice if you’re more into the visual graphic design part of web designing, it’s aimed to the front end web developer or the web designer that implement mockups in SharePoint. If you want to learn development techniques and effective approaches when it comes to packing and deploying files and code applied to SharePoint Branding, this is definitive a straight forward book for you.

I like this book and can highly recommend it; if you want to break in more to SharePoint branding and need structured examples and best practices you will find a lot of great stuff that takes you to the next level in the air of SharePoint designing. Thanks for writing this book!

For source code or more information about the author, Yaroslav Pentsarskyy:

Happy branding!