SAP Fiori Launchpad as a real-time display for financial data

6 April 2016

Tiago Almeida

Tiago Almeida

UI5 Consultant

The SAP Fiori Launchpad is capable of much more than presenting tile-based access to SAP Fiori apps. Read on to find out about using it to display real-time financial data.

By now, you have probably heard of the SAP Fiori suite of apps and the accompanying interface to launch them - the Fiori Launchpad.

What you may not know is that this responsive web application is actually capable of much more than mimicking the 1990s concept of shortcuts. 

Because it is built on the tried and tested SAPUI5 framework, it can be stretched (almost) to your heart’s content. From radically different themes that make you disbelieve you are running SAP, to custom applications embedded within it, and a whole lot more.

Bitcoin data in real-time

To illustrate this point, let me tell you about a simple real-time chart that I built and exposed on the Launchpad. It was pretty straightforward to implement, and should also help you to better understand what's possible, giving you inspiration for uses within your organisation.Tiago-Fiori-2.jpg

The demo chart, shown here, displays continuous pricing information on the bitcoin virtual currency.  

A bitcoin is a currency like the U.S. Dollar or the Euro except it is not legally recognized in most countries. In any case, people and businesses trade them for “real” currencies making its market suitably dynamic for it to be interesting as a good source of ever-changing data.

Note that the chart tile looks larger than normal. That's because while Launchpad tiles are for the most part sized at 1x1 units, you can have tiles at 1x1, 1x2, 2x1 and even 2x2 units, as I have used here. 

You can see an illustration of the real-time nature of the data, and how it is reflected in the chart, in this short YouTube video:

Creating the chart tile

Here is an overview of how you would go about creating such a chart tile for yourself.

Start with the SAP Web IDE connected to your Fiori Launchpad and HANA Cloud Platform (HCP) instance. For those unfamiliar with the Web IDE, it is a web-based development environment that makes it easy to develop and deploy your UI5 project to either an on-premise SAP backend or an HCP instance. Unless you have a preferred alternative tool chain, it should be the environment of choice for this type of work.

In the Web IDE, create a barebones project with a single view with a vizframe line chart. The vizframe examples available in the "SAPUI5 Explored" app are a good starting point for this view, with which you should become familiar if you are seriously developing with UI5.

Once you have a line chart with static data deployed into your HCP instance, you can then modify it to continuously update the information displayed. The general idea of such a change is to periodically poll a remote web server that can serve the latest pricing value. This is easily done on the chart controller by setting up a function to be executed periodically. In this example, we are querying the Bitstamp public API with an AJAX call, inserting the new data point into the chart’s data model and letting the UI5 binding mechanism take it from there. It is actually easier than it sounds.

Assuming you are happy with the way the chart behaves, proceed to the Fiori Launchpad configuration and configure a new custom tile that references our new UI5 view. As shown, I used a 2x2 tile for my example, but other sizes are possible.

Other data and KPI uses

Similar techniques could of course be employed to display other kinds of data on your Launchpad dashboard, be it your company’s stock price history, employee headcount over time or even the last five tweets of your CEO. The mechanism is very powerful and can be put to great use, limited only by your imagination.

Upcoming webinar

If you are interested in learning about what the Fiori Launchpad is capable of, you may want to tune in to the upcoming webinar on 26th April 2016 - The SAP Fiori Launchpad as a Human-Centric Dashboard. The webinar is one hour long and free to attend. Perhaps we will see you there!

About the author

Tiago Almeida

UI5 Consultant

Tiago is passionate about building effective computer systems and believes that web technologies will enable the user interfaces of the future.

With a strong software engineering background and six years' worth of development experience for SAP-based systems, his aim is to renew SAP systems' interfaces from obsolete paradigms while delivering excellent user experiences.

Familiar with custom implementations requiring multiple technologies, Tiago has worked in various roles. These have included Technical Lead and Trainer. As a technology enthusiast Tiago is always eager to learn new technologies.

Bluefin and SAP S/4HANA - welcome to the one horse race