Tuesday 8 December 2015

Render SharePoint list headers in the order you want

When it comes to presenting the contents of a SharePoint list in a Data View Web Part (Data Form Web Part), your out-of-the-box options are a bit limited. It's certainly possible to group list items under headings, but SharePoint relentlessly displays these headings in alphabetical (or reverse alphabetical) order. This can be a bit frustrating if you had some other order in mind.

For example, I was planning to display a list of navigational links on a page. I had stored the link data in a list, and I'd even added a custom column to the list to contain the group headings and tagged all my links with a group value.


But when I switched to SharePoint Designer and created the DVWP, and I selected Show group header under Sort and Group ...


... SharePoint helpfully displayed the headers in alphabetical order!



What I really wanted was for the headings to display in a different order. I thought about finding ways to create headings where the order of importance would also be alphabetical order, but that proved far too difficult and awkward. So I resolved to figure out another way to manage the order of the headings.

I wanted "Head Office" as the first heading, followed by "UK Locations", then "Europe", then "Rest of the World". The only way I could think of to do this was to preface each heading with a number value (to force the order) then, in the web part, perhaps use the "substring" function to remove the numerical value from the beginning of each header.


So ... in SharePoint Designer, add your DVWP to the page.

Then use the Common Data View Tasks panel to arrange the list output under headers by clicking on Sort and Group and selecting the radio button next to Show group header. This displays the headers in alphabetical order as noted earlier, but this time, we can see the number prefixes I placed at the beginning of each header value.


To get rid of the number prefixes, we're going to use the substring function.

In SharePoint Designer, navigate to the DVWP and find the XSLT call that renders the header name. It should include the variable "$fieldvalue". It'll be towards the end of the DVWP code, and look like this:

<xsl:value-of select="$fieldvalue" />

In my version, I added a <strong> tag and, as I wanted my headers to be rendered in blue, I added a color attribute, like this:

<strong style="COLOR: #009ae4;"><xsl:value-of select="$fieldvalue" /></strong>

Then, to remove the number prefix, I changed the "$fieldvalue" call to look like this:

<strong style="COLOR: #009ae4;"><xsl:value-of select="substring($fieldvalue, 3)" /></strong>


The substring function here specifies the character to begin rendering the string, in this case, the third one. The result is that my headers still appear in the order specified by the number prefixes in the List but those number prefixes are invisible.


Hope this helps someone.