Skip to Content
Author's profile photo Karol Kalisz
Karol Kalisz
October 19, 2016 2 minute read

Design Studio SDK: (Generic) Kpi Tile Data Bound (Repeatable)

finally, following the “what next” topic in KPI Tile, here the new “Repeatable KPI Tile” which is now Data Bound.

The original Post can be found here, Design Studio SDK: (Generic) Kpi Tile. Please check the initial post for general information, I do not want to repeat all here.

Second important post is here, Design Studio SDK: (Generic) Kpi Tile Functions for Complex Properties.

Now, the CHANGES.

In general, the number of KPIs equals to number of rows in the data source.
The KPIs will be placed in an dynamic layout with 2 properties which are deciding on the content size:

– content height
– number of rows

The real KPI size is calculated from the current size and number of rows.

How does look?

1. Assign Data Source

This component is now supporting data source assignment, so you have to assign some data source (see example below and in the application).

2. Make “binding” to dimension.
The next step is to create a property and use the new setting “Linked Dimension or Measure Key”. This one is required to get the connection to data from corresponding data source.

3. Cast

for some properties it is required to cast the data source to specific type, eg. for the micro charts it must be an integer, even if the data source is bringing double value as measure. Choose the correct cast – in other cases there will be no display.

Properties as Image

no big change to the standard KPI Tile in this part, but the “Content” has now the complex properties.

Binding on Data Source

here you can see the “Linked” property entry, it is string based w/o value help, the input must be the KEY of dimension or Measure (this example is on BYOD data source)

also, the cast property is visible, required to cast correctly especially for micro charts as those are expecting integers.

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_REPEATABLE_KPI_TILE

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

Assigned Tags

      7 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Martin Pankraz
      Martin Pankraz

      Just amazing Karol! At some point we should merge our tile container approach with the available tile components that we already have on the community repos. That way we will get responsive design out of the box.

      What do you think?

      Kind regards
      Martin

      Author's profile photo Marton Horvath
      Marton Horvath

      Hi Martin, Karol,

      I have just finished combining/extending TileContainer with MicroCharts. Please check out, and let me know what do you think: https://youtu.be/EHgxluJFemA

      I need to tidy up the code, and plan to share the source with the SCN community. Thank you for sharing your code!

      Regards,

      Márton

      Author's profile photo Martin Pankraz
      Martin Pankraz

      Hi Márton,

       

      I like it a lot and thanks for the nice video you posted there. Did you also consider Karol's repeatable Tile approach for truly dynamic KPI dashboards?

       

      Kind regards

      Martin

      Author's profile photo Marton Horvath
      Marton Horvath

      Hi Martin,

       

      Thank you!

      I'm not sure what aspect of Karol's approach you are referring to. I have tried to make it as dynamic as possible, and incorporate as much of Karol's work as I could. But probably I don't "get" everything what he did.

      I use his microchart "rendering" function though: "createComponentByJson"

      As i see there are two "types" of dynamic content in tiles, and tried to combine your and Karol's approach to solve these:

      • The tile content that has a 1-to-1 relationship to a "flat" data source comes as properties. (As in the original TileContainer) Examples: tile header, tile footer. One data point for each tile.)
      • The tile contents that has N-to-1 relationship to a tile, may come as an XML, similarly to Karol's approach. Examples: charts and specifically chart points. There are many chart points to a single tile.

      So you can add charts like:

      TILECONTAINER_1.addMicroChart("1", "ColumnMicroChart", "<ColumnMicroChart><leftTopLabel><ColumnMicroChartLabel label='0M' /></leftTopLabel><rightTopLabel><ColumnMicroChartLabel label='80M' /></rightTopLabel><leftBottomLabel><ColumnMicroChartLabel label='June 1' /></leftBottomLabel><rightBottomLabel><ColumnMicroChartLabel label='June 30' /></rightBottomLabel><columns><ColumnMicroChartData value='-20' color='Error' /><ColumnMicroChartData value='-25' color='Error' /><ColumnMicroChartData value='-26' color='Error' /><ColumnMicroChartData value='-30' color='Error' /><ColumnMicroChartData value='40' color='Neutral' /><ColumnMicroChartData value='40' color='Neutral' /><ColumnMicroChartData value='80' color='Good' /><ColumnMicroChartData value='35' color='Neutral' /><ColumnMicroChartData value='-10' color='Error' /><ColumnMicroChartData value='55' color='Good' /><ColumnMicroChartData value='60' color='Good' /><ColumnMicroChartData value='75' color='Good' /><ColumnMicroChartData value='95' color='Good' /></columns></ColumnMicroChart>");

      Where:

      param1=1 is the "Tile creation dimension" - the identifier of the tile to add the chart to

      param2=ColumnMicroChart is the chart type

      param3=is the XML definition of the chart with all of the chart points

       

      I have published my code to: https://github.com/martonhorvath/lumiradesignercommunityext_src

      I would be happy to contribute it to the master code-base. Had a pull request for an earlier version but no response yet. ( https://github.com/org-scn-design-studio-community/lumiradesignercommunityext_src/pulls )

      Can you help me how can we merge my update to the community code base?

      Regards,

      Marton

       

       

       

       

      Author's profile photo Martin Pankraz
      Martin Pankraz

      Hi Marton,

       

      it seems there is a merge conflict you need to resolve first at legacy_src/org.scn.community.databound/contribution.ztl.

      Mike Howles are you able to allow the pull request afterwards? I see only a button to merge the external pull request.

       

      Kind regards

      Martin

      Author's profile photo Marton Horvath
      Marton Horvath

      Thanks for pointing out the conflict. I have resolved now and closed the pull request.

       

      Since than I have done some new enhancements. If it goes well, I would initiate thoese in a new pull request.  

      Author's profile photo Martin Pankraz
      Martin Pankraz

      Thanks Marton!