Displaying Multiple Select Fields One Per Row in a Dataview Web Part

As I’m working more and more with SharePoint Designer 2010, I’m finding that I’m developing a library of XSLT snippets that might be useful for others. This is one example. (Note, all screenshots are from SPD2010. Click the images to view a larger version.)

The Scenario

You have a list that uses another list as a look up and allows for multiple values. You want to display that list in a Data View Web Part. The out of the box behavior is to display the multiple values as a semi-colon delimited string of text. Like so:

Default Behavior - an unreadable string of text
Default Behavior – an unreadable string of text

We can make the text readable by adding a parameter to the select statement – disable-output-escaping=”yes.” That will render a functional list of links.

<xsl:value-of select="@Program_x0020_Area" disable-output-escaping="yes"/>

A Functional List of Links
A Functional List of Links

But, a semi-colon delimited list of links isn’t exactly the most user-friendly presentation.

The Solution

Thankfully, there’s a fairly simple way to fix it, though it does require diving into XSLT. I grabbed the base template from kicktech, and simply implemented it in SharePoint Designer.

In split view, find the XSLT in your page. You can put this extra template anywhere outside of the existing templates. I like to add my templates at the end of the stylesheet. So, search for </xsl:stylesheet></XSL> and paste the following right above it.

<xsl:template name="string-replace-all">
<xsl:param name="text" />
<xsl:param name="replace" />
<xsl:param name="by" />
<xsl:when test="contains($text, $replace)">
<xsl:value-of select="substring-before($text,$replace)" />
<xsl:value-of select="$by" />
<xsl:call-template name="string-replace-all">
<xsl:with-param name="text"
select="substring-after($text,$replace)" />
<xsl:with-param name="replace" select="$replace" />
<xsl:with-param name="by" select="$by" />
<xsl:value-of select="$text" />

Now, find the column where you are outputting your multiple select lookup. It should look something like this:
<xsl:value-of select="@YourColumnName" disable-output-escaping="yes"/>

We are going to replace that simple select with a call to our custom template. But, we need to wrap it with variable tags, so that when we’re done, we can once again disable the output escaping. Then, we’ll do a simple select on our new variable. Here’s an example of replacing the semi-colon with a line break (change “@YourColumnName” to the column you want to display):
<xsl:variable name="thisRow">
<xsl:call-template name="string-replace-all">
<xsl:with-param name="text" select="@YourColumnName" />
<xsl:with-param name="replace" select="';'" />
<xsl:with-param name="by" select="'<br/>'" />
<xsl:value-of select="$thisRow" disable-output-escaping="yes"/>

The final result is a one-per-line list of the items selected in the multiple select column.

Final Result - One Item Per Line
Final Result – One Item Per Line

You might note that XLST has a built-in translate function that would do the same thing if you’re only wanting to replace one character with another. However, it doesn’t work to replace a single character with a set of characters.


12 thoughts on “Displaying Multiple Select Fields One Per Row in a Dataview Web Part

  1. Hi mate,
    first of all, thanks for this awesome tutorial..
    using this solution, how to keep the lookup field to
    display in dialog box??
    currently, it display in new page instead on dialog box..

    thanks in advance

  2. Hi, I need to display the fields with images in horizontal manner so please let me know how to do!!!

  3. How do you accomodate for the & value in the text? It find the semicolon and replaces it there also.

  4. Hi,

    I am looking to do something similar.

    I have tried to create a timesheets application in SP 2013.
    I built an infopath form which users need to create each day.
    The form has a drop down list field with a list of the various projects that are ongoing, users then select the one project from the list and then assign time against the project.

    I have 5 different fields so users can select up to 5 different projects for any given day.

    I created some basic views which list the time worked per day/week/month and year and todays timesheets.

    I need to create a more complex view which will allow me to see how much time was spent on a specific project.

    I have created a calculated Column which combines the 5 fields together


    The results are displayed in the view as

    Project1 Project2 Project3 Project4 Project5

    I then to display the results as


    so that i can sort on the column and see what project was worked on

    any idea on how to get the results listed on a new line in my view?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s