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

SDK_AREA_MICRO_DATABOUND

SDK_AREA_MICRO_MANUAL

SDK_BULLET_MICRO_DATABOUND

SDK_BULLET_MICRO_MANUAL

SDK_HARVEY_MICRO_DATABOUND

SDK_HARVEY_MICRO_MANUAL

SDK_MICRO_CHARTS

Documentation

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