Skip to Content
Author's profile photo Krishna Kishor Kammaje

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


This will create the code for your widget. For the above Search Query it looked like this.second.PNG

As you can see first line is a HTML tag and second and third line here contain javascript code.

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="">
                    <Page id="page1"  title="Products by Category" enableScrolling="false">
                          <html:a class="twitter-timeline" href="" data-widget-id="673559594208112640">#drilling Tweets</html:a>

Note that I have added ‘html’ namespace to the ‘a’ tag in the original code.

Add the javascript code (2nd and 3rd line in this case, without script tag) in the generated code to the “onInit” method of the controller.

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.

JS Bin – Collaborative JavaScript Debugging

Hope it was useful!

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.