Skip to Content
Author's profile photo Michael Howles

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.


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Byrne Zumwalt
      Byrne Zumwalt

      Damn! You're building out every component I'd hoped would one day be available to us! Way to go! See you in Vegas!

      Author's profile photo Meng Wang
      Meng Wang


      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?

      Author's profile photo Meng Wang
      Meng Wang

      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.


      Author's profile photo Nadim Sohail
      Nadim Sohail

      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?

      Author's profile photo Michael Howles
      Michael Howles
      Blog Post Author

      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.