Traffic Lights with Custom Controls in SAPUI5

I was working on the same demo I talked about in my last blog Gauges in SAPUI5 and as a tabular visualization for KPIs for multiple plants, we used a table with traffic light icons : Green, Red and Yellow to show the status of the KPIs. It somehow looked liked this :

Now when we demoed it to the client they were very clear about their needs. “It either shows a value with the traffic light or it is of just no use to us.” Coming to think of it, a colored traffic light only represents a range of values and not any value in particular and this got us thinking about how we could best display the same using SAPUI5.

We decided that displaying the number within the circle could go a long way to meet the customer’s needs and thus decided to create a simple and basic custom control for the same. It’s called ColorCircle and the source code for the same can be downloaded from here. How does it look ? Somewhat like this :

The circles are generated using CSS and have been done with the help of Jose Vargas’ Responsive CSS Circles blog.

The different properties of the custom control are as follows :

• value : int : Value to display inside the traffic light. (default : 0)
  
• size : sap.ui.core.CSSSize : Size of the traffic light circle (default: 50px)
• asc : boolean : Flag for comparison logic. If the color changes from Green to Yellow to Red as the value increases set true else set false if the color changes in the opposite direction as the value increases (default : true)
• glimit : int : The max value where the Green zone ends. For e.g. if values up to 50 should display a Green light then glimit should be set as 50 (default: 75)
• rlimit : int : The max value where the Red zone begins. For e.g. if values up from 90 and above should display a Red light then rlimit should be set as 90 (default: 90)

The custom control can be used in a column in a SAPUI5 Table Column thus  :

var oColumn3 = new sap.ui.table.Column({
  label: new sap.ui.commons.Label({text: "KPI 2"}),
  template : new com.fujitsu.custom.ColorCircle({size:"50%"}).bindProperty("value", "KPI2"),
  width: "13%"
});
oTable.addColumn(oColumn3);

That’s it ! Your shiny new Traffic Light with values are ready 🙂

If you would want to create your own Custom Controls using SAPUI5, read here the documentation here.