RSS Viewer Webpart In Sharepoint

In this blog, I will explain how to use RSS Viewer web part to display feeds from external websites to the SharePoint portal.

Introduction

Using this RSS Viewer Web Part, you can display data like weather and news from external sites into your SharePoint site. Let’s see how to get started with it.

Navigate to SharePoint portal.

Click on Edit page - > Add a Webpart.

Under content roll-up -> pick RSS Viewer.



After adding this web part, click on "Edit web part".

I am getting the feed from my website http://sharepointanchor.com/feed/

Now, just expand the RSS Properties.

Pass the RSS Feed URL.



We can also set the row limit of feeds. This will help you to display the top 5 to 10 numbers from the external sites.

I myself set the Feed limit to 10.



Also, you can set the feed refresh time. This helps to refresh the feed from the external site to view the recently updated content in your SharePoint portal.

I'm going to change “60 sec” and reduce to 1 minute.

Click "Apply" and check.


So now, the Feed has been displayed in your SharePoint portal from your external site. One thing has been missing from the output; i.e., User Interface. Now, I am going to customize this using XSLT Template.

Click on Edit webpart -> at the end, you are able to see the data view properties.



Click "XSL Editor".

I'm going to change the View to the table.

Just find the XSL named “RSSMainTemplate.body”.

Add the table header.

Code

<table border="1">
    <tr bgcolor="#9acd32">
      <th style="text-align:left">Blog Title</th>
        </tr>
Next remove the default div start “<div class="item link-item" >” End tag “</div>”
Add a table row <tr> and table data <td> enclosed with  <a href>
             <tr>
                      <td>
                            <a href="{concat("javascript:ToggleItemDescription('",$CurrentElement,"')")}" >
                                <xsl:value-of select="title"/>
                            </a>
                            <xsl:if test="$rss_ExpandFeed = true()">
                                <xsl:call-template name="RSSMainTemplate.description">
                                    <xsl:with-param name="DescriptionStyle" select="string('display:block;')"/>
                                    <xsl:with-param name="CurrentElement" select="$CurrentElement"/>
                                </xsl:call-template>
                            </xsl:if>
                            <xsl:if test="$rss_ExpandFeed = false()">
                                <xsl:call-template name="RSSMainTemplate.description">
                                    <xsl:with-param name="DescriptionStyle" select="string('display:none;')"/>
                                    <xsl:with-param name="CurrentElement" select="$CurrentElement"/>
                                </xsl:call-template>
                            </xsl:if>
                        </td>
                        </tr>
                </xsl:if>
            </xsl:for-each>
             </table>

Full section looks like the following.

<xsl:template name="RSSMainTemplate.body" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt">
          <xsl:param name="Rows"/>
          <xsl:param name="RowCount"/>
           <table border="1">
  <tr bgcolor="#9acd32">
    <th style="text-align:left">Blog Title</th>
      </tr>
          <xsl:for-each select="$Rows">
              <xsl:variable name="CurPosition" select="position()" />
              <xsl:variable name="RssFeedLink" select="$rss_WebPartID" />
              <xsl:variable name="CurrentElement" select="concat($RssFeedLink,$CurPosition)" />
              <xsl:if test="($CurPosition <= $rss_FeedLimit)">
                    <tr>
                    <td>
                          <a href="{concat("javascript:ToggleItemDescription('",$CurrentElement,"')")}"  style="color: tomato;">
                              <xsl:value-of select="title"/>
                          </a>
                          <xsl:if test="$rss_ExpandFeed = true()">
                              <xsl:call-template name="RSSMainTemplate.description">
                                  <xsl:with-param name="DescriptionStyle" select="string('display:block;')"/>
                                  <xsl:with-param name="CurrentElement" select="$CurrentElement"/>
                              </xsl:call-template>
                          </xsl:if>
                          <xsl:if test="$rss_ExpandFeed = false()">
                              <xsl:call-template name="RSSMainTemplate.description">
                                  <xsl:with-param name="DescriptionStyle" select="string('display:none;')"/>
                                  <xsl:with-param name="CurrentElement" select="$CurrentElement"/>
                              </xsl:call-template>
                          </xsl:if>
                      </td>
                      </tr>
              </xsl:if>
          </xsl:for-each>
           </table>
      </xsl:template>

Just paste the updated XSL Code on the window. Click OK. 

Finally, the output looks like this.

Click on the link to read the description.



Click on the "more" link to redirect to the external site.

 

Conclusion

In this article, you learned how to feed the external site information into your SharePoint portal with a custom design. Hopefully, it will be helpful for SharePoint developers, beginners, SharePoint administrators, and business professionals who are using SharePoint.

Happy SharePointing!