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:choose>
<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:call-template>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="$text" />
</xsl:otherwise>
</xsl:choose>
</xsl:template>

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:call-template>
</xsl:variable>
<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.

Advertisements
Leave a comment

12 Comments

  1. oman

     /  September 5, 2012

    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

    Reply
  2. Henrik

     /  January 29, 2013

    Thanx! I had to escape the linebreaks to get it working.

    Reply
  3. kriss

     /  March 17, 2013

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

    Reply
    • That isn’t what I’m discussing here. You might have more luck with the Microsoft forums. Sorry.

      Reply
  4. You have to replace the ” with ‘<br/>’ ps.This was vary helpful .

    Reply
  5. “<br/>”

    Reply
  6. & l t ; b r / & g t ; With no spaces

    Reply
  7. Janet

     /  May 3, 2013

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

    Reply
  8. Schneider,
    Many thanks for this quick tip. You made my day.

    Reply
  9. gerard mcgrath

     /  September 18, 2014

    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

    =(AZI1&”
    “&AZI2&”
    “&AZI3&”
    “&AZI4&”
    “&AZI5)

    The results are displayed in the view as

    Project1 Project2 Project3 Project4 Project5

    I then to display the results as

    Project1
    Project2
    Project3
    Project4
    Project5

    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?

    Reply
  10. san

     /  December 29, 2015

    Amazing tutorials, pls keep posting

    Reply

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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: