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.

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="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.

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!