Apply a Style to the XML Viewer Web Part

XML Viewer web part for SharePoint 2010 (Called XML Web Part under SharePoint 2007) is a very useful to display structured data and XML-based documents. The good thing about this XML web part is that it allows you to customize your XML document with the help of XSLT (Extensible Stylesheet Language Transformations) by applying the style to the XML before the content is displayed. There are many ways of using the XML Viewer web part, but for now I will concentrate on displaying a RSS feed. And what better feed I could come up with than the TopSharePoint.com Blog feed.

So, let’s start with adding the web part to the page. Click on Site Action and then select Edit Page.

Pick a side where the new XML Viewer will be displayed on the page. For this example I used the right panel. Click on the “Add a Web Part” link and then under the top ribbon make sure you’re under Browse tab.

Select Content Rollup and then XML Viewer and click on the Add button.

Under the newly added web part click on the “open the tool pane” link to customize it.

On the XML Viewer web part settings panel, under XML Link plug in your RSS feed and then click on XSL Editor button to get to the Text Editor webpage dialog window.


Copy & Paste the code below and then click OK.

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="yes"/>
<xsl:param name="TITLE"/>
<xsl:template match="rss">
  <div style="background:#fff; padding:0; font-size:10px;">
      <xsl:for-each select="channel/item">
        <a href="{link}" target="_new"><xsl:value-of select="title"/></a><br/>    
        <xsl:value-of disable-output-escaping="yes" select="description"/><br/>
      </xsl:for-each>
  </div>
</xsl:template>
<xsl:template match="description"><xsl:value-of select="."/><br/></xsl:template>
</xsl:stylesheet>

Make the necessary aesthetics changes: web part Title, Width, Height and Chrome Type and click OK.

Of course the XSL style sheet provided can be customized farther, like referencing an external CSS by adding a class attribute to the div tag instead of using inline styling. And, here is the outcome:

6 responses so far, want to say something?

Leave a Reply