Wayne Hall

Pretty printing display of multi-item choice fields from Sharepoint lists (one per line)

I was working on a poor-man's customer information system... you know, a little replacement of sticky notes and little web pages all over the company that different groups use to keep track of current information about specific customers.  You know how it goes in medium to large sized companies -- sometimes you have several different back-end operational systems scattered across the company; some are web-enabled and others aren't; some groups use part of this system, all of that system and none of this other system; people might not have logins or a license to use a client of that other system over there, etc.

So we had put together something very very basic -- just a big sharepoint list with about 30-40 fields.  It contained 5-10 fields specific to about 5 different groups and the information or links to information about that customer specific to that group.  Once we had the information in there, we needed an easy interface to view the information for all the different customers.  I'll blog on that later.

In general (side comment) -- This is one of my first real uses of connectable web parts.  The other blog will expand on that more, but this exercise gave me a great look into how to really use two webparts on a page as navigation.  Also, I found out just how much more FrontPage can do for you when working with connected web parts.

One of the issues I ran into was how to display the information from a data field that was a Choice type, but configured so that multiple items could be selected with checkboxes.  You know the one -- it's the one that says “allow multiple selections” and looks like this in the setup:

      

and looks like this in the data form view:

     

So when I created my List view web part and went into FrontPage 2003, imagine my horror when it actually printed out a list with semicolons and pound signs between fields, and all one big long string:

So I'm not an XSLT or XSL writer at all.  In fact, I'm pretty sure I can mis-use XSL in a sentence and even might misspell it every now and then.  But I *am* a Perl programmer, so I'm thinking something along the lines of a match, search, replace or translate function.  I figured if I could replace the “;#” with a newline or <BR> tag, that would be exactly what I was going for.

Let me tell you I was in for a little ride, trying to learn XSL, templates, how to call the functions and escaping the characters.  I'm guessing you don't care too much about the ride, but you'd like to see the result.

Well the good news is I was able to figure out and borrow code from others on how to get this to print like this:

How did I do it?  Well, these are the general steps

1. I created a web part page that would house my navigation and data view web part (more on this in a separate blog to be written)
2. I already had the data source as a list.  So I went to the web part page, Modify Shared Page, then Add Web Part, then dragged the list over into a zone.  This created a sharepoint list view web part for me.
3. Then I used the built-in sharepoint web tools to modify the view of that part to contain all the different fields I wanted.  Click the little triangle, modify shared web part, edit current view.  I checked all the boxes for fields I wanted to display.
4. Then I launched FrontPage 2003 and edited that web part page.
5. I right-clicked on the list view web part and selected to convert to XSLT (I forget the exact wording).
6. Then I put all the fields in tables, rows, columns, changed fonts and display formatting and made the general data view web part look like I wanted.
7. I went into code view and found the WebPartPages:DataViewWeebPart section that was specific to this Data View Web part.  That code starts off with the parameters and then has an xsl stylesheet.  I went past the “xsl:param“ tags and found the templates.  I added a template tag of the following:

   <xsl:template name="break">
      <xsl:param name="text" select="."/>
      <xsl:choose>
         <xsl:when test="contains($text, ';#')">
            <xsl:value-of select="substring-before($text, ';#')"/>
            <br/>
            <xsl:call-template name="break">
               <xsl:with-param name="text" select="substring-after($text, ';#')"/>
            </xsl:call-template>
         </xsl:when>
         <xsl:otherwise>
            <xsl:value-of select="$text"/>
         </xsl:otherwise>
      </xsl:choose>
   </xsl:template>
   

8. This code I borrowed from several places out on the net, and it was a search and replace function.  The primary thing that helped me was http://www.biglist.com/lists/xsl-list/archives/200310/msg01013.html
9. Then I went into the code and found where it was displaying my field.  My field was called “List of Products“ and FrontPage had created code that looked like <xsl:value-of select="@List__x0020_of_x0020_Products">lt;xsl:value-of>nbsp; I replaced that with this:
   
   

      
   <xsl:variable name="list_of_products" select="@List_x0020_of_x0020_Products"/>
   <xsl:call-template name="break">
   <xsl:with-param name="text">
   <xsl:value-of xmlns:xsl="http://www.w3.org/1999/XSL/Transform" select="$list_of_products"/>
   </xsl:with-param>
   </xsl:call-template>
   
   
   The resulting HTML is
   
      
   <BR>
   Access - MultiMeg (NxT1-DS3)<BR>
   Hosted GRAS (CAAA)<BR>
   Site-to-Site VPN (Private Network)<BR>
   
   
   
   which is exactly what I wanted.
   
   

posted on Monday, June 13, 2005 7:42 AM