Custom RSS SPFx Feed WebPart In Modern UI

• 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.

• 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.

 

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.

 

 

We created a SharePoint List with a multi-line text column.

 

1. Recurrence – specifies the schedule of execution of flow. We had scheduled it to execute the flow every 30 minutes.

2. Initialize variable – This initializes a variable to save the RSS url.

3. 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).

4. Apply to each – Assigns the RSS url variable with the value for RSS Feed url from the previous step.

5. HTTP -Make a HTTP call with GET Method to read the text from RSS Feed XML.

6. 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.

 

 

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.

 

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.