Dear all,
As of today working with KPI tiles in Design Studio involves assigning data points to pre-designed and pre-positioned KPI tiles. Meaning requirement or even data set changes impact your dashboard since the existing KPI tile components are static by design. To overcome that you have to adjust your dashboard for every use case and target device over and over again or create a big set of tiles and hide them if they are not used.
The same rules apply if you filter KPIs during runtime. Eventually you have to come up with a hide and show logic to visualize that behavior in an understandable way.
That approach is quite static, scales badly and is not future prone. I would like to introduce you to a component which solves all of these problems out-of-the-box.
How does it work?
At the core I am using the SAPUI5 TileContainer, the StandardTile and the CustomTile from the sap.m library. The TileContainer takes care of the management of its tiles. That means it rearranges the tiles according to the available space and creates navigation elements if necessary. Check out the video below:
[If you cannot see the video make sure to have http as request protocol and not https because the video is called over http from youtube]
Ok, that’s it for the visual part. But what about the data flow? We want the component to create as many tiles as there is information on the data source even if that changes during runtime.
For that purpose I created a property which allows you define a dimension “Tile Creation Dimension” which will be used as “tile creator”.
Choosing Tile Types and sap.commons headaches
Once setup, you can choose in between the sap.m.StandardTile (left image) and the sap.m.CustomTile (right image) by utilizing the property “Tile Type”. The CustomTile enables us to tailor the visualization of the tile to our individual needs. As a start I added a trend indicator in a similar way like the SAPUI5 GenericTile example uses it. I will add the GenericTile to the available types once the sap.m version of it becomes available on DesignStudio. Unfortunately our SCN community version of the GenericTile is not compatible with the sap.m.TileContainer because of its origin from the sapui5 commons library.
Properties to map data source characteristics to tile content are provided
The other properties allow you to match header, sub-header, value, footer and icon information on your data source so that the tile creation mechanism can put them on the newly created tiles. The formatting of the value can be altered with numeral.js formatting strings. The number formatting is local dependent.
To map icons you need to add a key of the tile creation dimension and put a valid sap icon string (e.g sap-icon://play).
To enable value coloring and trend indicators you may define the property “Comparison Dimension” with another measure in addition to the “Target Measure Dimension”. If the difference is negative your target value (footer text for the standard tile) will be colored red and a negative trend indicator will be added to it. The same behavior applies for positive differences and green colors. On top of that you can define an interval spanning the target value to ignore small changes (in percentages) using the property “Compare Tolerance (%)”. Target values within that interval will be shown in grey and a trend indicator pointing to the right.
All of the individual tile properties are available through Design Studio scripting functions on the event “Tile Press”.
Of course you have to make sure that the data breakdown on the data source assigned to the tile container has a suitable structure. The component expects a 1-1 match between the characteristics and the measures. If you need more sub dimensions you need to add more tile containers. Every instance handles only one target dimension!
Final Words
I showed you how to setup your KPI tiles in a more responsive way and explained what the current shortcomings are when working with KPI components in Design Studio.
You can get the component by installing the latest SCN SDK repository package. The SCN blog entry below can give you directions on how to work with our awesome Design Studio SDK package:
Like all our SCN community SDK components the code is published open-source on GitHub:
https://github.com/org-scn-design-studio-community/sdkpackage
As always feel free to leave comments and ask lots of follow up questions.
Yours
Martin
- SAP Managed Tags:
3 Comments
