XSLT and SharePoint – Part 3

I seem to have been busy for a couple of weeks so writing this final part of the series got delayed.

As a quick recap we looked at the basics of XSLT style sheets and presenting content from a SharePoint list.  This example list I am using is has just two columns – the standard Title and also a URL (hyperlink).

Instead of presenting a long list of links which can take up quite a bit of space on the page, it would be great to be able to put these into a dropdown control.  Easy to get to and takes up very little space.

Well fortunately XSLT is perfect for this so let us have a look at how easy this is.

<xsl:template match="/" >
 <xsl:variable name="Rows“ select="/dsQueryResponse/Rows/Row"/>
 <!-- Add in a select control which will open up our URL when we change the dropdown value -->
 <select onchange="location=this.options[this.selectedIndex].value;">
  <xsl:for-each select="$Rows">
   <xsl:call-template name="dvt_1.rowview" />
  </xsl:for-each>
 </select>
</xsl:template>
<xsl:template name="dvt_1.rowview">
 <!-- Instead of our anchor tag we now use the option with the value as our URL -->
 <option value="{@URL}"><xsl:value-of select="@Title" /></option>
</xsl:template>

And that is it.  I told you it was simple.  The links in your list will now appear in a dropdown box and will go straight to the URL when you select it from the dropdown.

The opportunities XSLT opens up are endless.  I would be keen to hear more example of how you have used it to good effect.

This entry was posted in SharePoint. Bookmark the permalink.

13 Responses to XSLT and SharePoint – Part 3

  1. RakeMeBack says:

    Nice post. I was checking continuously this blog and I
    am impressed! Extremely useful info specially the last part :
    ) I care for such info much. I was looking for this certain information for a long time.
    Thank you and good luck.

  2. ScottK says:

    great step-by step – this is an example i can use right away!

    thanks much

  3. Atif says:

    Great Post.
    Waiting for part 4:)

  4. James says:

    Great post, I’m glad I stumbled across this.

    I have a similar approach that I’m trying to complete, if you have a moment to have a read, that would be great!

    I am essentially trying to recreate the following (http://jsfiddle.net/JamesHorner/GSHTX/) but using a content query web part. I have a list that contains a column called “Year” which I would like to populate the drop down filter. When selecting the year, the list items that contain the the selected year are displayed. Any ideas?

    Again, thanks for an awesome post.

    • paylord says:

      Hello James,

      There are a couple of ways but the simplest would probably be to get the year into a SELECT tag – check my other posts for details on that if they are in a list. Set the value of the options to:
      value="?Year=@Year"

      You could then use something like:
      ONCHANGE="location.search=this.options[this.selectedIndex].value();"

      This will add a Year parameter to the URL.

      You can now add a filter to your CQWP where Year is equal to [PageQueryString:Year].

      Dave

  5. James says:

    Thank you Dave – Appreciated!

  6. Johnson says:

    Excellent post! It has been very useful. I’m interested in learning more about XSLT, can you point me to some resources? Thanks!

    • paylord says:

      As usual has some reference links.

      Marc Anderson (of SPServices fame) also has a nice Codeplex project gathering useful XSLT templates .

      Remember that XSLT is not SharePoint specific so if you may have to filter through what is out there if that is your focus.

      Feel free to reply with any other good references you find and hope you have fun!

  7. Digambar Kashid says:

    Inspiring Post …You highlight XSLT in Excellent way all three post are Awesome……
    Thanks…:)

  8. daniel says:

    This seems great but I can’t get it working😦 anychance you could helo ?

    • paylord says:

      Hello Daniel,

      Happy to try, what seems to be the problem? One of the common issues is when code has been copied the quotation marks often paste in a format that the XSLT does not like – I would definitely recommend you check those.

      Dave

  9. paylord says:

    Updated to present example scripts better

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