Design Studio SDK: (Generic) Kpi Tile Functions for Complex Properties

[Karol-K]

some time ago I have posted the blog on KPI Tile in Design Studio, see Design Studio SDK: (Generic) Kpi Tile. This component is allowing usage of UI5 controls and changes in the runtime via BIAL functions.
The restriction was: only primitive properties could be changed, this is now removed. It means, also complex properties (e.g. for charts can be changed now).

How?
First of all, you need to make a logical transfer of the property definition to the property path.

Example

The Definition for the CHART is.

<MicroAreaChart minXValue='0' maxXValue='100' minYValue='0' maxYValue='100' class='marginTopLeft' press='press'>

       <firstXLabel>

         <MicroAreaChartLabel label='June 1' color='Good'/>

       </firstXLabel>

       <lastXLabel>

         <MicroAreaChartLabel label='June 30' color='Critical'/>

       </lastXLabel>

       <firstYLabel>

         <MicroAreaChartLabel label='0M' color='Good'/>

       </firstYLabel>

       <lastYLabel>

         <MicroAreaChartLabel label='80M' color='Critical'/>

       </lastYLabel>

       <chart>

         <MicroAreaChartItem>

           <points>

            <MicroAreaChartPoint x='0' y='0' />

            <MicroAreaChartPoint x='30' y='20' />

            <MicroAreaChartPoint x='60' y='20' />

            <MicroAreaChartPoint x='100' y='80' />

          </points>

         </MicroAreaChartItem>

       </chart>

       <target>

         <MicroAreaChartItem>

           <points>

            <MicroAreaChartPoint x='0' y='0' />

            <MicroAreaChartPoint x='30' y='30' />

            <MicroAreaChartPoint x='60' y='40' />

            <MicroAreaChartPoint x='100' y='90' />

          </points>

         </MicroAreaChartItem>

       </target>



       <minThreshold>

         <MicroAreaChartItem color='Error'>

           <points>

            <MicroAreaChartPoint x='0' y='0' />

            <MicroAreaChartPoint x='30' y='20' />

            <MicroAreaChartPoint x='60' y='30' />

            <MicroAreaChartPoint x='100' y='70' />

          </points>

         </MicroAreaChartItem>

       </minThreshold>

       </MicroAreaChart>

And now we want to change some properties in this definition, e.g. the label "June 30".
The path is:
* control name is "CHART"
* the main node "MicroAreaChart" is the root node and not relevant
* child: "lastXLabel"
* child: "MicroAreaChartLabel"
* property: "label"

-> this makes a path: "CHART/lastXLabel/MicroAreaChartLabel/label".

when you add such property under "CHART" control, you can later edit it by the function:

KPITILE_1.setPropertyValue("CHART/lastXLabel/MicroAreaChartLabel/label", "new label");

More Complex Property

The main goal of this function is to allow also changes in the chart data, which is mainly complex property with arrays. In general the way of definition is same as above, there is only small addition to address arrays:

We want to change the the number "x=0 y=0" under the node chart->MicroAreaChartItem->points. The value is a property "y" of the node "MicroAreaChartPoint".

Our path will be created as above, but as the node "points" is an array, we have to say which array element we want to address by index-based access (0-based):

-> it makes "CHART/chart/MicroAreaChartItem/points/MicroAreaChartPoint/0/y"

and the example function used looks like this one (sets all values to 80)

KPITILE_2.setPropertyValue("CHART/chart/MicroAreaChartItem/points/MicroAreaChartPoint/0/y", "80");

KPITILE_2.setPropertyValue("CHART/chart/MicroAreaChartItem/points/MicroAreaChartPoint/1/y", "80");

KPITILE_2.setPropertyValue("CHART/chart/MicroAreaChartItem/points/MicroAreaChartPoint/2/y", "80");

KPITILE_2.setPropertyValue("CHART/chart/MicroAreaChartItem/points/MicroAreaChartPoint/3/y", "80");

With this way of property definition you can easily change the properties of dynamic elements with complex structures.

Download & Use

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

Example as BIAPP:

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

-> SDK_KPI_TILE_COMPLEX

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