Display Live RSS Feeds In XML Viewer Web Part Using Custom XSLT

In many public facing site’s landing pages we might have seen the latest updates, news headlines or twitters feeds displayed in small sections. We can implement the same in SharePoint web part using Out-Of-Box XML viewer web part.

The below mentioned steps will be helpful for implementing it.

Step 1: Get the live RSS feed URL and edit the SharePoint Web Part page.

Then add XML Viewer webpart.





XML Link: Sample live news feed.

XSL Editor: Click “XSL Editor” button in the “XML Viewer Webpart” properties. Paste the XSL tags in the XML Editor.



Click OK and close the properties window and save the SharePoint webpart page.



Final output.



Step 2: To create the XSL we need to first get the structure of the XML from the RSS Feed.

RSS feed from sample live news feed.



XSLT can be created using W3Schools online XSLT tool.



Detailed explanation of how XSLT is mapped to XML (RSS) elements is given below.

In the RSS XML source we can see the root rss tag, channel (parent node) and item (child node).

<xsl:template match=”/rss”>

This states the root rss tag and within this tag the html, head, title and body elements are enclosed in XSLT. Inside the body <xsl:apply-templates select=”channel”/> is mentioned to incorporate the content of channel (parent node).

Next define the template for channel.

<xsl:template match="channel">
    <h3><xsl:value-of select="title"/></h3>
    <table cellpadding="2" cellspacing="0" border="1" width="75%">
        <xsl:apply-templates select="item" />
    </table>
</xsl:template>

Here the provision to incorporate the items within the channel is given below.

<xsl:template match="item">
    <tr>
        <td colspan="2" style="text-align:left;padding-top:10px;">
            <div><span style="color:blue;"><h4><xsl:value-of select="title" disable-output-escaping="yes" /></h4></span></div>
            <div><span style="color:grey;"><xsl:value-of select="pubDate" disable-output-escaping="yes" /></span></div>
            <div><span><xsl:value-of select="description" disable-output-escaping="yes"/></span>
                <xsl:element name="a"> (For creating a hyperlink)
                    <xsl:attribute name="href">
                        <xsl:value-of select="link" />
                    </xsl:attribute>
                    <span style="color:blue;"> more..</span>
                </xsl:element>
            </div>
        </td>
    </tr>
</xsl:template>

The below image shows the mapping of XSLT elements and the Output.