XSLT and SharePoint – Part 1

Confession time – I love XSLT.
Most will probably find this rather strange but as a non-developer I find it gives me so much flexibility to present information from lists or from other sources for that matter.
If you are new to XSLT then you probably find it rather daunting and may not even be clear why it is useful to you. I am going to try to write a short series of blogs for those who would like to learn more about XSLT and what you can do with it.

XSLT Stylesheet

XSLT Stylesheet

XSLT is contained in a StyleSheet. If you use SharePoint Designer than it will recognise an XSL file extension and provide you with some nice intellisense and formatting – but essentially it is just a text file. It has a collection of ‘templates’ which get the data from the list and present it on the page using HTML.

In SharePoint, XSLT is becoming increasingly important given that the new list web parts are XSLT based. XSLT can be used to format the output from all of the following:

  • List View web parts
  • Data View web parts
  • Content Query web parts
  • Search web parts

You can either modify the XSLT directly in the page itself or create a separate XSLT stylesheet file and then link it to any web parts you would like to use it with.  The advantage of the external XSLT file it that you can apply it to publishing pages and reuse it on several web parts on different sites and pages.

For the purposes of this example I am going to use a very simple SharePoint list with the standard Title column and one other column called URL which is set to be a Hyperlink.

Title = Single line of Text
URL = Hyperlink

The following section of code includes comments to explain what is going on and can be pasted into a text file and saved as tabular.xsl.


<!--
This section is the set up and can be used at the top of any external XSLT stylesheet file
-->
<xsl:stylesheet
xmlns:x="http://www.w3.org/2001/XMLSchema"
xmlns:d="http://schemas.microsoft.com/sharepoint/dsp"
version="1.0"
exclude-result-prefixes="xsl msxsl ddwrt"
xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"
xmlns:asp="http://schemas.microsoft.com/ASPNET/20"
xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxsl="urn:schemas-microsoft-com:xslt"
xmlns:SharePoint="Microsoft.SharePoint.WebControls"
xmlns:ddwrt2="urn:frontpage:internal">
<xsl:output method="html" indent="no"/>
<!--
End of Set Up
-->
<!--
The initial template which in this case is matching everything with "/"
It then creates a variable called Rows - this is accessed as $Rows
A standard HTML table and header row with the names of our columns is next followed by a loop through each row of the list and calls our second template dvt1-rowview to display the contents
-->
<xsl:template match="/" xmlns:x="http://www.w3.org/2001/XMLSchema">
<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row" />
<table>
<tr>
<td>Title</td>
<td>URL</td>
</tr>
<xsl:for-each select="$Rows">
<xsl:call-template name="dvt_1.rowview" />
</xsl:for-each>
</table>
</xsl:template>
<!--
End of first template
-->
<!--
Standard HTML rows and cells contain the contents of our list row
xsl:value-of command is used to display our columns
Columns are accessed as @InternalColumnName
-->
<xsl:template name="dvt_1.rowview">
<tr>
<td><xsl:value-of select="@Title" /></td>
<td><xsl:value-of select="@URL"/></td>
</tr>
</xsl:template>
</xsl:stylesheet>

Now edit a page in SharePoint and add your list with the Title and URL columns onto the page.

Edit the web part and open up the Miscellaneous section.  Type in the name of the saved XSL file including a path if needed.

XSL Link

XSL Link

Apply the changes and you should now see the results looking something like this:

Tabular XSLT

Tabular XSLT

This is very simplistic and just gives us a tabular output from our list very similar to what you get from a standard List View. Next post we will build on this further to see what more we can do with XSLT in SharePoint.

About these ads
This entry was posted in SharePoint and tagged , , , , , , . Bookmark the permalink.

31 Responses to XSLT and SharePoint – Part 1

  1. ScottK says:

    Good learning module – thank you – I’m starting to get this with your help.
    There are a couple errors in the above code

    1)

    SHOULD HAVE QUOTES:

    2) when I copied/ pasted – there was a bad quote in the 2nd to last character:

    SHOULD BE:

    Since I’m a total newbie at this – I had to figure out that i needed to modify the web part and link this to the web part – I stumbled, but am still running!`

  2. ScottK says:

    Apparently – the code in quotes did not come through…
    1) should be
    xsl:template match=”/” xmlns:x=”http://www.w3.org/2001/XMLSchema”
    2) should be (will be the last character here, since I took off the gt/lt
    xsl:for-each select=”$Rows”

  3. caleb says:

    Worked for me. Changed the following line: ”
    to::

  4. tim says:

    Thanks for this! I struggled through quite a few articles on this subject and yours was the one that worked for me.

  5. Ece Ozmen says:

    It’s great.
    I want to modify the view of links list web part. But it looks www.”google.com” instead of “google”. I couldn’t find how can I reach the fieldref of “description”. How should I fix this? Here is my code.

    • paylord says:

      Hello Ece

      Sorry I cannot see your code, but if I understand correctly you want to use a standard Links list and you are struggling to get the description part of the URL column.

      Try using @URL for the hyperlink and @URL.desc for the description.

      Let me know if you have trouble with this and I will try to email something through.

      Good luck

      Dave

  6. Sagar says:

    Great Post. Since SP 2013 does not provide design view anymore we have to manage everything through xslt. Thanks !

  7. Chuck Duncan says:

    Excellent, but I missed one important point. Where does one put/save the XSL file so that it can be referenced in your first figure (dialog box). I know where SharePoint’s are, but it’s probably not a best practice to store them there. :-) Thanks in advance.

    • paylord says:

      Hello Chuck,

      I usually put my XSL files in a custom folder in the Style Library. If the files are for a list view web part then it does not really matter where they are – any document library will do. If they are for a CQWP then they MUST be in the Style Library or SharePoint will refuse to use them.

      Dave

  8. 1d8cd98f00b204e9800998ecf8427e says:

    Hey there! I just would like to offer you a
    huge thumbs up for your excellent info you have got here on this post.
    I will be coming back to your site for more soon.

  9. Iona says:

    It’s a relief that I managed to come across wordpress.com: it has the resources I was really looking for. It’s astonishingly helpful and you’re clearly quite well-informed in this field. Thanks to your wealth of information, I’ve learned a whole lot more about the topic and
    will be coming back for more.

  10. Mani says:

    Hey Dave,
    I’m not sure what I’m missing but this has not worked for me. I’ve created a custom list (SP2010) and have added URL as hyperlink. I’ve added 1 row to the list. I copied the XSL code above and saved it @ %14%\TEMPLATE\LAYOUTS\XSL. On the Miscellaneous section I’ve put the file name with and without the entire directory but this has not worked.

    Any idea on what could be the problem?

    Thanks in advance
    Mani

    • paylord says:

      Hi Mani,

      What error are you getting? I usually put my XSL files in the Style Library but they should work fine from your location – and yes, I think you would need a relative path in the link.

      Have you checked the quote marks? This is a common issue when copying code as the quotes copies from the browser are not accepted by XSLT. Try replacing the quotes and see if that helps.

      Dave

      • Mani says:

        I’m not getting any error the transformation is just not happening :-(. The row shows up as is.

        What is “Style Library”? I can try and put the file over there and try. And yeah I did had the full path and I did an IISReset too.

        I did not check the quote marks I thought maybe you fixed it.. I will try and check the quotes too.

        Thanks
        Mani

      • paylord says:

        Style Library is a special document library at the site collection level. This is where the XSL files that support CQWPs live.

        The XSL file could also be located in a document library and does not even have to have the XSL extension.

        Let me know how it goes with the quotes.

        Dave

  11. Mani says:

    Dave,
    I replaced all the quotes but that didn’t work.
    I’ve also uploaded the file in the Style Library but that didn’t work either.

    Mani

    • paylord says:

      Hello Mani

      It is a little difficult without being able see what you have done but reading through your message it all sounds correct.

      I would suggest reading through the post again and double-checking each step to make sure you have it right.

      Then maybe simplify the XSL so your template does nothing but write something simple on the page – eg

      Hello

      – this way you can start to isolate where the issue lies. If this still does not work then it must be something to do with the way you are linking the file. If this does work then it means there is an issue with the XSL and you should start adding back to it one bit at a time until it stops working again.

      If you still have problems then see if you can post links to some screenshots to help me understand where the issue is.

      Good luck.

      Dave

  12. Pingback: Sharepoint XSL / XSLT | Just tinkering Blog

  13. damo says:

    I have tried this in Announcement list embeded in list webpart, the styles are comming for list item, but i need Add new Announcement list to come in footer, pls guide to get “Add new Announcement” after applying xsl……

    • paylord says:

      The easiest way to do this will be to copy the way that SharePoint does it. In SPD create a page and add your Announcement list as a data view/list view to the page. Select the web part and you should see new ribbon options. I think it is under the design tab you will find the option to convert to XSL. Convert the whole web part. This will give you around 4000 lines of code in your page so now you just have to find the bit that gives you the Add new Announcement link.

      The other option is to simply add a link to the NewForm.aspx wherever you would like it to appear. The usual is at the end so this would appear after your for-each loop.

  14. damo says:

    Followed as you said, i got the required result, thanks a bunch for your quick help…..

  15. prasad says:

    Hey Buddy,
    You have got me writing an XSLT. It was not so easy before I read your article. Now I love XSLTs. God bless you. :-)

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