Skip to Content
Author's profile photo Karol Kalisz

Design Studio SDK: New Unified UI5 Components

started with the Design Studio SDK: (Generic) Kpi Tile I have targeted some general workflow for creation of components which are based on the SAPUI5 Explored library. Again, the goal is to reduce “development” time.

Actually, the idea is to not develop, but use all the specifications which are already available. And the specifications are there…(like the UI5 control specs, here an example – BulletChart control). It means, I have created some generic code which is doing following:

  • read the specification of “new component” I want to create – blog Design Studio SDK: Specification Driven Development (or create a full component in 20 minutes)
  • checks if this component is “extending” some other specs, like the BulletMicroChart – component specification
  • and then, is reading out the spec from the UI5 page (http call to get the content)
    • the spec will be recursively parsed and a json SDK spec for the included component will be created.
    • in addition, based on the type of the properties – additional DS properties will be generated. As an example, all aggregation will get also data list binding which can be used for binding the content to the data
  • the component is extending the UI5 componen in terms of ZTL implementation – so no own ZTL is required (unless we make custom extensions in the component)
  • then, as last, based on the spec and included specs a single contrbution.xml will be created.

How does it work for SDK user?

As an SDK user, you can place one of those component into canvas and immediately use the components out-of-the-box with manual specification using the Additional Property Sheet.

Then, for every property which can be bound to data, there is an “boolean” flag ” Use ‘<the property name>’ “. if it is unchecked, the data binding is used – of course you need to specify data binding to the property, see for ” ‘<the property name>’ Data List ” – and fill in the data there.

Of course, there is also some magic behind, as every property has a “context” information, how the data set should be used. Eg. properties for “maximum” of something must calculate the maximum of the data cells, some must calculate the length, etc. There are plenty of rules behind, including information how to mash-up the data bound data with some information which is not coming from data and still can be maintained in the manual area (like colors).

For technicians, you can see here. Currently those information is centralized, but this should be later also in the property specification.

How does it work for me (on creation time?)

Actually, the generation code was costing me 2 weekends and some evenings. But now, new component can be created in the prommissed 20 minutes, including the Java Script part, as this is generated as well.

How does it look?

Today some small examples for those who want to check out immediately, but there will be a need to describe the components separately in detail (perhaps someone wants to take this over and makes some blogs with findings?).


The APS as Example / using all Miks’s functionality of cascading properties.


The same component with data binding:


and the bindable properties:


Examples will be soon in the application repository, check for some with “MICRO” in name.

Download & Use

This component is available on the community package, release 2.0 for Design Studio 1.5, as in SCN Design Studio SDK Development Community

Example as BIAPP:

org-scn-design-studio-community/applications · GitHub









Component List – SCN Design Studio Community -> look for the component in the list.

Any thoughts?

feel free to add as usual…

Enhancements Ideas?

if you have good ideas (to those who would like to contribute but cannot code…) – place an “issue” with tag “enhancement” under Issues · org-scn-design-studio-community/sdkpackage · GitHub

Assigned Tags

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

      Hi Karol,

      Again a great blog and sdk! Thanks!!

      It took me quite some time to realize those new components only work in Blue Crystal theme. : P

      Are you going to extend those components? Or these will only get updated from UI5 explored library?



      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      Hi Alfred,

      yes, those are ok only in blue crystal, refer to my blog Why use Blue Crystal style in Design Studio apps?.

      how you mean "extend", do you have some "request" or idea?

      To be honest, there are not much component in the UI5 explored page left. The infrastructure I have made allows to wrap a new component with 3hours effort (one evening).

      In terms of extension, those are already data bound and non-data bound, so this is actually all I can make.


      Author's profile photo Former Member
      Former Member

      Hi Karol,

      Thank you for the info.

      I am mainly studying  bullet micro chart now.

      As it's a little bit complicated for me to understand all properties, I hope there are dropdowns for some properties, such as "Mode", "Size", and "Scale Colour".

      In "Actual" property, maybe it's good if we can specify color code in addition to "Good", "Critical", and "Error".

      Besides, when I use data binding, I realize that I can use "Scaling Factor" in Initial View to change the display of label. However, setting "Decimal Place" seems not work.

      Do I miss anything?


      Thank you!



      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      hello Alfred,

      this component is using 1:1 the SAPUI5 suite component BulletMicroChart, SAPUI5 Explored).

      And this is where the colors are coming from.. there are only those which are offered.

      To the decmal places and scaling. Scaling is processed by data processing in BICS / OLAP. Decimal places is only applied on the "formattedValue" in SDK (unfortunately). And the Bullet Chart itself is requiring the value as float, but there is no property in the chart to format the value (eg. by decimal display).

      It all means, for both topics we would require to update the UI5 library.


      Author's profile photo Former Member
      Former Member

      Hi Karol,

      Thank you for the quick and detailed reply! 🙂

      Yes, I guess for now it's better to use non-data bound mode with scripting to control the display.

      Look forward to the update~

      Best regards,