Skip to Content

Design Studio SDK (1.3) – Databound and Colored KPI Tile Set using SDK Launchpad

This is a continuation of my blog on Design Studio SDK (1.3) – Fiori-like LaunchPad (aka sap.m.TileContainer).  In that blog, I wrote about how to use the TileContainer as a form of a launching point like Fiori Launch Pad.

One thing was missing though, which would be a visual indicator to alert the users whether things are going good/ok/bad or whatever while still holding that clean look and not using too much superfluous indicator or stoplights.  I wanted to just do some simple conditional formatting in the form of coloring some of the information on the tiles.

A good example of some of these I like can be found in this link and called out in the illustration below (Generic Tile Example)


These are a little different than what we are using in the LaunchPad, as from what I can tell, they are in the sap.suite.* JavaScript libraries which are not included in the current Design Studio 1.3 includes despite my best efforts.  So while having the micro charts will have to wait for another day, we can surely adapt the sap.m tiles with a little CSS, no?

I wanted to keep it simple so after adding a new ‘CSS Class’ property to each tile (and is shown in previous blog entry as I first started thinking about this), we just need to know the right rules to create to start styling.  For your convenience, I’ve canned one into the newer version of this component called ‘RYG’ (for Red, Yellow, Green).  By adding ‘RYG’ to the Launch Pad’s CSS Class, we can then apply some other CSS Classes per-tile to activate the styling.  Let’s start with the CSS I included so you can see how you could adapt your own rule set:



  /* Good Formatting */
  .utilPackLaunchPad.RYG .good .sapMStdTileIconDiv,
  .utilPackLaunchPad.RYG .good .sapMStdTileNumDiv .sapMStdTileNum,
  .utilPackLaunchPad.RYG .good .sapMStdTileNumDiv .sapMStdTileNumS,
  .utilPackLaunchPad.RYG .good .sapMStdTileNumDiv .sapMStdTileNumM,
  .utilPackLaunchPad.RYG .good .sapMStdTileNumDiv .sapMStdTileNumUnit
    color : #009966;
  /* Medium Formatting */
  .utilPackLaunchPad.RYG .medium .sapMStdTileIconDiv,
  .utilPackLaunchPad.RYG .medium .sapMStdTileNumDiv .sapMStdTileNum,
  .utilPackLaunchPad.RYG .medium .sapMStdTileNumDiv .sapMStdTileNumS,
  .utilPackLaunchPad.RYG .medium .sapMStdTileNumDiv .sapMStdTileNumM,
  .utilPackLaunchPad.RYG .medium .sapMStdTileNumDiv .sapMStdTileNumUnit
    color : #EBAD00
  /* Bad Formatting */
  .utilPackLaunchPad.RYG .bad .sapMStdTileIconDiv,
  .utilPackLaunchPad.RYG .bad .sapMStdTileNumDiv .sapMStdTileNum,
  .utilPackLaunchPad.RYG .bad .sapMStdTileNumDiv .sapMStdTileNumS,
  .utilPackLaunchPad.RYG .bad .sapMStdTileNumDiv .sapMStdTileNumM,
  .utilPackLaunchPad.RYG .bad .sapMStdTileNumDiv .sapMStdTileNumUnit  {
    color : #FF0000

So using this canned CSS, let’s see what is needed at design time:


We can see now with by creating some CSS rules (RYG which again is included for you), and setting them on the component and its tiles, we can create some nice looking alert-based tiles.

Also a discussion brought up in the first blog about this component was around how to pull data into these Tiles (that’s pretty important, after all).  As mentioned previously, I’m leaving that job to BIAL to do.  Below is an example of what I wrote in code and then the runtime results.

First, the BIAL that finds the data, and applies the business logic to classify each KPI as good/medium/bad in various ways, and even a calculated KPI tile at the end:


If you go back an illustration, you may notice the ‘Wrench’ button – This is just a shameless plug to show the PopOver Button (Design Studio SDK (1.3 SP0 & SP1) – Popover Buttons) also at use.  Below is the configuration and the BIAL for On Select:


So let’s see the result at runtime already…  (Click for animation)


Hope this is a useful demonstration for BIAL to fill data as well as CSS to help with alerts/conditions.


You must be Logged on to comment or reply to a post.
  • Hi,

    If i input

    LAUNCHPAD_1.addTile("Sales", "YTD", "sap-icon://money-bills", "1234", "USD", "good"); the whole tile will not appear.

    But if if

    LAUNCHPAD_1.addTile("Sales", "YTD", "sap-icon://money-bills", "1234", "USD");

    The tile will appear.

    Where should i put the RYG.css file.

    and how to set the LAUNCHPAD to use this file?

  • Hi Mike,

    For the Title create in the LAUNCHPAD at design time. I can set the good, medium, bad cssClass.

    But the code

    var tileConfig = LAUNCHPAD_1.getTileProperty("Tile 1");


    will return none for tileConfig.valueState.

    How can i switch the status on the fly.

    Best Regards.


  • Hi Mike,

    I am using Design Studio 1.5. I am looking for similar FIORI launch pad component but instead of putting a text, I need to put a graph (just like here)

    How can I achieve this?

    • The GenericTile component in the link you showed is under the sap.suite.ui.commons UI5 package which is not included/loaded as of DS 1.5.  Karol Kalisz has however included these files and played around with them in the SCN community package but perhaps in 1.6 or higher these will come "standard".

      As to how to achieve this, go read up on SAPUI5 and JS if you don't know that stuff already.