Enhance your Fiori app with a Twitter widget
I was exploring Twitter APIs and thought if I can easily add Twitter widgets to Fiori apps. This especially made sense for Marketing and Campaign Fiori apps. I tried it in jsbin and found it to be very simple and wanted to share that experience.
Scenario: Consider you are running a marketing campaign and wanted to keep a tab on the twitter stream for a specific search-term.
Step1. Generate Code.
First thing to do is to create a widget in Twitter site here. Here you need to provide your search term and “Create Widget”.
Step 2. Adding the generated Code to our Fiori app.
XML views can be easily enhanced with HTML without any need to encapsulate the code.
Add the first line above where ever you want to display the widget.
<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="XMLViewController" xmlns:html="http://www.w3.org/1999/xhtml"> <Page id="page1" title="Products by Category" enableScrolling="false"> <content> <html:a class="twitter-timeline" href="https://twitter.com/hashtag/drilling" data-widget-id="673559594208112640">#drilling Tweets</html:a> </content> </Page> </mvc:View>
Note that I have added ‘html’ namespace to the ‘a’ tag in the original code.
That is it. You are done.
I have not yet enhanced any Fiori app with this, but got it done in a JS Bin. You can check it here.
Hope it was useful!