Skip to Content
Author's profile photo Former Member


In my introduction to this blog series I laid out my fairly specific objectives. I’ll restate them here to make sure we’re all have the same expectations … in this series we are going to build a lightweight proof-of-concept dashboard that displays SAP technical performance data in an interesting and visually stimulating way.

This is what we’ll produce (the demo appication automatically pings the target server and updates the Gauges in ‘real-time’):

Final Output.png

I have decided to use the following structure for the series, with the intention that we explore each component technology in turn and then a final instalment explaining the key-strokes:

  1. Picking the Visualization  – introducing D3.js and the concept of data joins;
  2. Introduction to the SAPUI5 Shell ‘bootstrap’ environment (you are here) and how to integrate components;
  3. Description of the SAP SMON functions and how to creating a new service in the SAP ICF;
  4. Bringing it all together – this is the instalment that I’ll use to describe each of the individual steps

This instalment is a bit shorter because I just need to introduce the SAPUI5 and related technologies. If you want more detail there is phu-lenty out there, Don’t we live in remarkable times where information is so freely available.


So what is HTML5?

In a nutshell HTML5 is a collection of technologies working together, including:

  1. HTML – a mark-up language, the latest version of which includes some key features that are exploited by the D3.js library we saw last time, namely the <canvass> element and support for Scalable Vector Graphics.
  2. CSS – Cascading Style Sheets, again particularly relevant for D3 manipulations
  3. JavaScript – this key internet coding language has now come of age, and certainly benefited from the common WebKit engine that underpins most modern browsers.

There is so much hype around HTML5 you won’t struggle to find more info anywhere on-line if you need it. Obviously the key differentiator is the compatibility of HTML5 with the iPhone, and the well documented demise (for the same reason) of Flash. You could download the HTML5 boilerplate, but we’ll actually be using one of the SAPUI5 components, read-on MacDuff, read-on!


SAPUI5 is the latest user interface technology suite offered by SAP. SAP have built their reputation on building applications and user interfaces for manipulating data and storing and reading data from enterprise scale databases.

The SAP user interface story is an interesting one, with a few false branches (Visual Composer, BSP and WDJ spring to mind, but that’s just me nd I mean no offence if any of these is your environment du jour). However the early forays into web UI technologies have left an interesting legacy: the SAP Internet Connection Framework. This is a web application server for SAP solutions, born to support the earlier web UI’s but it lingers on and is the cornerstone of our demo solution.

There is so much information available on SAUI5 that it can be intimidating and difficult to ‘break-in’, but check out Bjoern Goerkes’s post for a good overview.

The most important aspect for our purposes is that you don’t need any special hardware to run SAPUI5, simply download the libraries from here, unzip and away you go.

You’re going to need a local web server at some point. I like Apache, but there are many others out there and many communities supplying help and answering questions. This link gets you the latest version of Apache.

Again, no new hardware required or license fees payable … nice!


Once you have downloaded the SAPUI5 pack, set up your webserver and configured it, you need to install SAPUI5, which simply means unzipping the pack to your web server’s documents folder – that’s the htdocs folder for Apache, and wwwroot for MS IIS.


The best way I’ve found for exploring the SAPUI5 libraries is to dig into the DemoKit content.

SAP have really excelled in providing a fantastic developer guide, great workable examples, and a fully functional Test Suite.

I picked out the Shell layout component as the host for my Gauges page, but you could use any of the container elements. Here is the Shell example from the Controls section of the SAPUI5 DemoKit:

Shell example.PNG 

Reality Check

So far we have looked at a couple of use-cases for a simple JavaScript client connecting to SAP. We’ve evaluated some visualization libraries and settled on D3.js. And now in this instalment we’ve acquired the SAPUI5 libraries, set up a local web server and unpacked the SAPUI5 files to the appropriate location of your web server.

Next we will look at the ABAP side of things to understand the SAP prerequisites for our demo, before the final ‘money’ chapter where I’ll explain step-by-step how to set up the Gauges demo.


Assigned Tags

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