I was approached by a colleague regarding one of his customers where they want to provide students the ability to get informational updates, announcements, news, etc. For this customer I was given links that ended up being RSS feeds as this is what they use to post some of their updates. Of course there are many apps that can handle RSS feeds, but the difference here is that the customer also will want to provide updates from possibly other sources, like Sharepoint for example. I can also imagine that there are many other sources of information that may be valuable that we will explore with them as we move forward.
Thinking about this, it made a lot of sense to me to use Mobile Cards as the solution. They will be able to build a custom Mobile Cards client with our Cloud Build Service, they will be able to create cards for multiple back-ends, differentiating them with card decks and subscription, they will receive notifications when new articles come in, they will be able to use the Today Screen Widget to view the most important feeds, and many other features with no work other than designing the card to get the look they want.
While looking into this, I decided it would make sense to describe how I approached enabling RSS feeds for Mobile Cards. In another posting, I'll talk about enabling Sharepoint for Mobile Cards.
The first thing that was going to be a roadblock was that RSS feeds return their responses in XML. Mobile Cards does not handle XML, it handles JSON. Poking around, I found
RSS to JSON Converter. This tool takes an RSS feed URL and then converts the response to JSON. It was just what I needed.
To test this, just enter
https://news.sap.com/feed into the URL and you'll see the response returned as JSON.
Let's create the card.
You'll want to sign up for a free account and get an API Key, once you have this
- Enter the URL that that is used to get your RSS feeds, in my example it's https://news.sap.com/feeds.
- Copy the URL that is created. It'll show the API call as a URL similar to below, but with your API key at the end.https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fnews.sap.com%2Ffeed&api_key=xxxxxxxxxxxxxx
In your Mobile Services Cockpit, go to Mobile Applications->SAP Mobile Cards and select Connectivity under the Assigned Features. Create a new Destination by selecting the Create button. The following will need to be set, you can leave everything else with the defaults.
Type: Mobile Destination
Destination Name: RSStoJSON
URL:
https://api.rss2json.com
Rewrite Mode: No Rewriting
SSO Mechanism: No Authentication
Go back to SAP Mobile Cards and select the Create button. Enter in the Name that you want users to see in the Subscription menu in the client. You can download my template from the following
GitHub Repository, the template will be named RSSFeedTemplate.zip. For the Resource Package use the Browse button and select the zip file.
Delete the entry PeoplePortal from the Grouping. In the Query entry replace the URL with the URL that you go from the RSS to JSON site starting from /v1, it should be similar to
/v1/api.json?rss_url=https%3A%2F%2Fnews.sap.com%2Ffeed&api_key=xxxxxxxxxxxxxx
From here you can change the card to fit your desired look and feel. If you want to use a different logo for the top corner of the card, go into Assets and upload a new image file. In the Editor you will want to change the name of the file to what you have just uploaded. This will be on line 8 of the editor in the <img src=> tag.
You'll notice that I'm not using Data Mapping so if you want to add content that is coming from the JSON response you'll use the handlebar tags right in the HTML, you should see the changes reflected in the preview window. As an example, you can add {{items.author}} if you would like to note the Author somewhere.
Save the card and subscribe to your RSS feed in the Mobile Cards App. You'll get your RSS feeds and the card is configured to show on the
Today Screen as well.
To configure more cards take a look at some of these links, there are many examples these are only a few to get you started.
Enable Purchase Order Approvals with Mobile Cards
Build Cards from Fiori Applications
Enable Unified Inbox for Mobile Cards
Mobile Cards Interactive Tutorials
Enable Mobile Cards for S/4
Use Mobile Cards in S/4 Cloud
Mobile Cards with Success Factors
Mobilize your Enterprise data using SAP Cloud Platform Mobile Cards