Traffic Lights with Custom Controls in SAPUI5

[abesh]

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 :smile:

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

[htammen]

Hi Abesh,

thank you for this nice custom control. I hope that much more from other people of the community (including myself) will follow

Regards Helmut

[abesh]

You are welcome Helmut :smile:

Looking forward to see some exciting controls from you too :smile:

[Former Member]

Hi Abesh,

Thanks for the good post

looking forward for your next book including UI5 with MII

Best Regards,

Namita

[abesh]

Thanks Namita !

[ChandraMahajan]

Hi Abesh,

Good example of custom control and Thanks for sharing it on github!

Regards,

Chandra

[abesh]

Thanks man :smile:

[rajendrengovend]

Nice work Abesh! Thanks for sharing.

[abesh]

Thanks so much !

[avital_ben-natan]

Thank you for sharing. Nice work.

I've also published a custom control for Here.com/Nokia map control in GitHub. The blog post is here.

[former_member187007]

Hello Abesh, does this traffic lights work with sap.m libraries too?, I mean is it responsive?

Thank you in advanced.

Jhon Jairo.

[Former Member]

Hi Abesh,
Github url is not working. I am not able to download. Could you please update the url or provide the new link.

Regards,
MS