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:

GitHub: https://github.com/entmike/DesignStudio1.3UtilityPack/blob/master/res/css/LaunchPad.css

Snippet:

  /* 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.

Enjoy!