Custom RSS SPFx Feed WebPart In Modern UI

Requirement

 
A client had a  requirement to display the RSS feed on a modern UI page for 40,000 users.
 

Challenge

 
The main challenging part is that CORS has an issue with  reading RSS feeds (xml). If the RSS feed is in a JSON format then we may use jsonpdataType to resolve the CORS issue.
 
Modern UI supports out of the box RSS Feed web part. But it has some limitations which are  listed below:
  • This web part is available only for Office 365 Group Enabled team sites.
  • Users should have Outlook account and it has to be manually added to the Office 365 group.
  • Only supports 2500 users.
  • No options were available to alter the format in which information is displayed.
There are custom SPFx solutions available:
  • spfx-40-fantastics – RSS Feed Reader webpart
    URL - https://github.com/OlivierCC/spfx-40-fantastics/wiki/Rss-Reader
    This webpart solution is not working at the moment.
    Reference - https://github.com/OlivierCC/spfx-40-fantastics/issues/97
  • SP-Dev-fx Webparts – React RSS Reader webpart
    URL - https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-rss-reader
    This solution uses the below ways to read RSS feed
  • Direct – This has an issue with CORS policy
  • 3rd party solutions like https://feed2json.org or https://rss2json.com.

    https://feed2json.org is open source but has limitations as below
  • It has to be hosted on a separate server
  • It does not support CORS.

    https://rss2json.com free version has limitations as below
  • It takes 1 hour to display the updates.
  • Supports a maximum of only  10,000 requests per day.
  • Maximum of  25 feeds were allocated per account

Solution

 
To overcome this we came up with this approach with the help of Microsoft Flow, SharePoint Lists and ReactSharePoint Framework Web part.
 
Note
Microsoft Flow license is needed.
 
RSS feeds are generally available in XML file format and contain the URL, title, and summary of each page to display. So we developed a Microsoft recurring flow which reads the RSS feed XML and updates a SharePoint List Column with the XML content.
 
SharePoint List
 
We created a SharePoint List with a multi-line text column.
 
Microsoft Flow
 
We developed a Microsoft recurring flow which looks as below.
 
The explanation of the steps of the flow:
  1. Recurrence – specifies the schedule of execution of flow. We had scheduled it to execute the flow every 30 minutes.
  1. Initialize variable – This initializes a variable to save the RSS url.
  1. Get Item – This reads the RSS Feed url from a SharePoint List (We used a predefined SharePoint List to store the RSS Url. This also provides the facility to the end user to change the RSS Feed URL if needed).
  1. Apply to each – Assigns the RSS url variable with the value for RSS Feed url from the previous step.
  1. HTTP -Make a HTTP call with GET Method to read the text from RSS Feed XML.
  1. Update Item –Updates a SharePoint List multi-line text column with the output of HTTP call made in the previous step.
After all the above steps are completed, the execution of the flow will update the SharePoint List multi-line text column with XML content of the RSS Feed XML file.
 

React SharePoint Framework Web part

 
We developed a simple SharePoint client-side web part to display the RSS feed on Modern site page in the same format as the OOTB RSS Web part for Modern pages. Additionally, we can customize the display format for RSS as well with our custom web part solution.
 
In order to convert XML text to JSON text we used npm xml-js.
 
The web part directly queries the SharePoint List multi-line text column value using REST API Call. Then converts the stored XML data to JSON text and loops through all the RSS feed data to display it in descending format of Published Date.
 
Which problem have we resolved?
  1. Now, we are not depending on any third party webparts and third-party API to read RSS feed data, hence we don’t face any request and feed limits.
  2. Resolved CORS issue by directly accessing feed data from already-stored feed using MS Flow.
  3. We can customize the display format for RSS as well with our custom web part solution.