Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
michael_jung2
Product and Topic Expert
Product and Topic Expert
60,556
Please also see my 2nd Blog about SAC und DSP: SAP Community

Introduction


The dashboard at hand is supposed to provide insights into the new Lumira 2.x features: The new composites, the integration of offline data and the adaptive containers are most important to note. Hence, this demo aims at showing how these features work in combination. Moreover, it serves as an inspiration and can be regarded as a template. Data used in dashboard is dummy data only. Visualizations have been chosen randomly to show a variety of chart types (e.g. radar, tag cloud, doughnut). The chosen type may therefore not match the type actually recommended for use for a specific KPI. Feel free to visit this blog regularly to stay up-to-date with the new Lumira innovations. The lumx-file can be downloaded at the end of the page.



Video (without audio):



Features:

  • Offline-data imported via Lumira Discovery

  • KPI-tiles as custom components

  • Fiori 2.0 Look & Feel

  • Details for all KPIs

  • Built-in search functionality for KPIs

  • Freely configurable Home-Page

  • KPI-specific reports incl. map


Update 08.01.2018 (Lumira 2.1):

  • The application has been translated into English (all screenshots in this blog have been replaced)

  • Dynamic creation of tiles for Home-Page

  • Comments

    • Comments application-based (copied from 2.1 Feature Samples) - first icon top right

    • Comments on Crosstabs (copied from 2.1 Feature Samples) - open context menu for crosstab

    • Comments on Members for tab "Description" in details



  • New Scroll-Container


Update 12.01.2018 (Lumira 2.1):

  • Redesign of "Extended Evaluation"

  • Data Labels in Tiles

  • Crosstabs in Tiles


Update 05.07.2018 (Lumira 2.1):

  • New App based on Belize Theme (default app)

  • New help-function, which can be activated by clicking the help-icon top right




Update 16.10.2018 (Lumira 2.2):

  • New area "Sales"

  • New feature for tiles: switch dimension for charts

  • New table configurator. Just bind the composite to a crosstab.

    • Composite in Composite

    • Search for dimensions

    • Sort dimensions

    • Show/hide dimensions






 



If you like this blog, please click on the like-button.

Custom Components for Tiles




The tile composite can be used either with or without chart area. It has the following features / properties:

  • Display of KPI name

  • Display of values, optionally with color code

  • Unit of KPI

  • Trend icon and value

  • Link to KPI details




All relevant elements are binded to the composite properties, so no script is needed here. There is only some script in the formatter functions and for the central function setValues to set the composite properties from outside the composite.

Update 12.01.2018 (Lumira 2.1):

I added the option to show a crosstab instead of chart and data labels for charts:



 

Adaptive Container


Each page of the TabStrip makes use  of an adaptive container. In this demo, the adaptive container was configured in a way that it matches tablets, desktops and large desktop screens. There is also a fourth viewport used for smartphones, but it seems that smartphones does not support composites.

It is important to note, that due to the architecture of the adaptive container, tiles with charts should always be displayed at the beginning of a block in order to enable an optimal design. The different block size decides whether the lower part of the tile (the chart) is displayed or not.



Update 08.01.2018 (Lumira 2.1):

In the 2.0 version I allowed to scroll the page of tab-strip via css. In Lumira 2.1 there is a new component called scroll-container. So every adaptive container is embedded in a scroll container.

Usage of Tiles


Tiles are initialized with the following command:
GS_TILES.calcTile(„1000“, KPI_TILE)

The value “1000” corresponds to the internal ID of the KPI. "KPI_TILE" is the technical name of the tile composite.

The values are read from a central DataSource and transferred to each tile via script. The tile itself does not have a data connection, it rather obtains its data using the consuming app and the respective DataSource. If you use a DataSource in a tile, the DataSource is loaded per instance of tile. Therefore, I would not recommend to use DataSources in Composites if you want to use the same composite more than once per Application.

In order to display chart data in the tile, the function setChartConfig is invoked within the tile. In this step, the type of the chart and the DataSources from the app are transferred to the tile (Update 12.01.2018: data labels can now also be configured).



The original solution was based on BW and the usage of attributes (KPI as main info object). To simulate attributes i decided to store all masterdata concatenated in one field separated by a "|".

In the onstartup-Event the function "splitMasterdata" is called. In this function the masterdata is read from the DataSource and splitted among the different arrays.



The following illustration exemplary shows how master data is used:



  • column A: key of kpi

  • column B: description

  • column C: area (used for search-function to find tab)

  • column 😧 category (not used)

  • column E: sub-category (not used)

  • column F: unit for kpi

  • column G: delta-unit for kpi

  • column H: color of the arrow when the value increases compared to the previous period

  • column I: number of decimal places for kpi

  • column J: scaling factor

  • column K-end: ranges for conditional format of kpi


Details


For each KPI, one can jump to a detail screen. This detail screen consists of the following areas: monthly progress, description and further evaluation of the KPI (if available).



The monthly progress shows the actuals, average and plan values. The description displays a long text for the KPI. The comment field on this page does not have a function. In the original BW-based solution, the text was written back to the BW using a specific planning function type from the BW-IP.

The detailed evaluation is always displayed in the same way. This area surely requires revision. However, it does show how KPI-specific evaluations can be integrated in a dashboard of this kind.



As Lumira 2.0 also provides an enhancement of the map component, a map illustration on the level of buildings was implemented for the KPI “Ø Enegy Costs per Building”:



The map can be found on third tab. Switch to the chart, activate navigation and choose in the chart type picker the map. From technical point of view the chart is set to invisible and the map-component gets visible. Sure, the third tab needs a little bit of rework.

Update 08.01.2018 (Lumira 2.1):

I added a commentary solution to the tab "Description". It is based on the new comment-function in Lumira 2.1 and the corresponding component "feed list".



The comments are bound to kpi-members and public.
var text = COMMENTS_TEXT.getValue();
COMMENTS_TEXT.setValue("");
APPLICATION.createInfoMessage(gv_selected_kpi);

var commentId = COMMENTS.create(text,{
"context": {"(MEASURES_DIMENSION)":"DS:60,MEAS:id_169","DS:60,DIM:id_151":gv_selected_kpi} ,
"contextType": CommentContextType.MEMBER,
"dataSource": DS_TRANSACTIONAL_DATA,
"isPublic": true
});

COMMENTS_FEEDLIST_GLOBAL.addItem(COMMENTS.getComment(commentId),true);

Update 12.01.2018 (Lumira 2.1):

The "extended evaluation" has been completely redesigned. Some features have been copied from the Generic-Anaylsis-Template.



 

KPI-Search


In the demo data, several KPIs distributed along the four tabs were already illustrated. If  the end user searches for a specific KPI and does not want to click through all of the tabs, he or she can use the search function to directly navigate the desired KPI. The search can alternatively be invoked using CTRL+F.

This is just a very simple search solution based on Stringsearch.


Home


Each user can select and save his favorite KPIs with the Dashboard start page.

Up  to nine tiles can be stored. Tiles can also be deleted using the ‘delete’-symbol. The ordering is displayed in accordance to the time stamp of recording. Here, the new bookmarks from Lumira 2.0 are used. In the background, solely the IDs (1000,1001, etc.) of the selected tiles are saved and the tiles are rebuild with every start.



Update 08.01.2018 (Lumira 2.1):

With Lumira 2.1 it is possible to create components during runtime, composites included. So it is a nice feature to reimplement my home-tab.



I only created an empty adaptive container at design time, the tiles and the plus-sign are created during runtime. Because each tile consists of a block and a custom component we must create in the first step a block and in step 2 the custom component in the previous created block:
block = COMPONENTS.createComponent(ComponentType.Block,ADAPTIVE_LAYOUT_HOME);
// copy properties from an empty block, otherwise the content of block is copied too
COMPONENTS.copyProperties(BLOCK_HOME_EMPTY_TEMPLATE, block);
tile = COMPONENTS.createComponent(ComponentType.LUM_9BB26EB2E9EFB499D479C4E19E5C7AB5_KPI_TILE, block);
// we need the standard script for onClickNewTile... there is no api so we copy from existing newTile
COMPONENTS.copyProperties(KPI_TILE_HOME_TEMPLATE, tile);

Because there is no API to config the block via Script I copied the settings from a blank block (BLOCK_HOME_EMPTY_TEMPLATE) which was configured in design time. Same for my tile component because after dynamic creation the script for my interface function "openPopup" is empty. The function copyProperties also copies this type of properties.

With the new feature of dynamic creation of components and this new approch there is no limit for tiles on the home-page.

 

Misc



Download


Please do not rename the lumx-file to avoid script errors during lumira 2.x runtime. Just copy it to your lumira documents folder.

LUMX-File

If you want to upload the lumx-file to your BIP, please keep in mind to change the following:

GS_TILES->calcTile looks like:
I_TILE.as(ComponentType.LUM_C88EE0E557C0A60833590B6DAD6626FA_KPI_TILE).setValues(Convert.floatToStringUsingLocale(actual_value.value / scaling_factor,number_decimal_places), description, unit, delta, deltaValue , time, I_KPI, valueCondFormat, details, deltacolor,xxl_text);

"LUM_C88EE0E557C0A60833590B6DAD6626FA_KPI_TILE" is generated by Lumira Designer so you have to change it. Please use content assistant to find the right one (should be begin with LUM*).

Same in GS_TILES-> calcAllTiles. Replace all occurrences of "LUM_C88EE0E557C0A60833590B6DAD6626FA_KPI_TILE" with your new Tile-ID.

There are a few more places where the ID schould be replaced:

  • GS_SEARCH--> select

  • ICON_HOME_TILE_1_DELETE - ICON_HOME_TILE_9_DELETE -> onClick

  • TIMER_SEARCH -> onTime


In 2.0 SP2 PL1 it looks like there is an issue with composites as type in input paramaters of functions so I decided to use generic type "component" and cast it to the right type via "as".

Update 08.01.2018 (Lumira 2.1):

I added a new file to the share for Lumira 2.1. In same folder there is also the "old" 2.0 version if you are running 2.0 (but sure, without new features).

Update 16.10.2018 (Lumira 2.2):

I did not change the name of the file for 2.2.
151 Comments
spiegler_s
Explorer
0 Kudos
Hi Michael Jung,

Also not sure if you share the link directly.

Can you send it to me.

Or Upload a new Link ?

Thanks for your work.

Best regards

Sebastian
0 Kudos
Great post. Can anyone re-share the .lumx file please?  Many thanks!
ftenreyro
Discoverer
0 Kudos
Hi Michael! Your post is very interesting. I tried to download the lumx flie but the link doesn't work.

Could you please send it to me or re-share the file ?

Many thanks.
former_member595826
Discoverer
0 Kudos
Hi,

this is awesome

can u share it with me. Link is expired:(

 

thanks

 
former_member642493
Discoverer
0 Kudos
Hi Michael, is possible to share link once again ?

Post very impressive.

Thanks a lot!

Best regards,

Tomasz
christoph_kretner
Product and Topic Expert
Product and Topic Expert
0 Kudos
Link has been fixed now
0 Kudos
Thanks Michael.

Really very interesting post.

Request you to please share the link once again.

 

Best Regards

Vaishali
former_member662684
Discoverer
Thanks Michael.

 

Could you please share the link again as it seems that the link is already expired!

 

Thank you again
former_member662684
Discoverer
0 Kudos
Still I can't download the document. Could you please fix it again
0 Kudos
Could you please share the link again.

 

Thank you!
0 Kudos
Hi the link does not work. Please share again.

 

Thanks
0 Kudos
Hi, Jung,

Great document!

Could you please update the download link or send it to my email box within my account? I was noticed that It's expired when I clicked the download link.

Thanks a lot.

Best regards,

Michael Van
0 Kudos
Hi, Rainer,

The download link is not working now. Could you please share the downloaded file with me via my email within my account?

Thanks a lot.

Michael.Van
0 Kudos
Hi, Baig,

The download link is not working now. Could you please share the downloaded file with me via my email within my account?

Thanks a lot.

Michael.Van
0 Kudos
Hello Dharma,

The download link is not working now. Could you please share the downloaded file with me via my email within my account?

Thanks a lot.

Michael Van
0 Kudos
Hi Beat,

The download link is not working now. Could you please share the downloaded file with me via my email within my account?

Thanks a lot.

Michael Van
former_member696829
Discoverer
0 Kudos
Hi,

Can pm me with the link please?
0 Kudos
Hi Maulin,

Could you please share the downloaded files or send them to my email box within my account? I can not download them.

Thanks a lot.

Best regards,

Michael Van
0 Kudos
Hello Marco!

Could you please share the file with me?

Best regards,

Michael
0 Kudos
hi Micheal / Friends,

 

can you please share the link again, its not active

 

Regards

Smijoe
olaf_gaertner
Discoverer
0 Kudos
It would be nice if the link can be shared again.
robweeks
Explorer
0 Kudos
Does anyone have a copy of the LUMX file?  The link is broken and I can't locate the copy I used to have.
johannes_esser1985
Discoverer
0 Kudos
I would also appreciate if the Template could be made available for download again.
michael_jung2
Product and Topic Expert
Product and Topic Expert
available again.
johannes_esser1985
Discoverer
Thank you very much Michael and Have a nice Day.
former_member642493
Discoverer
Thanks a lot Michael, great job! I'm going to test now 😉
Adem_Baykal
Product and Topic Expert
Product and Topic Expert
0 Kudos
Thank you really much for resharing your KPI Dashboard Michael.
0 Kudos
thank you so much.

 

Regards

Smijoe
david_lai
Participant
0 Kudos
Hi Michael,

Is it possible if you can kindly make the template available for download again?

 

Thanks

David
benjamin_masahud
Discoverer
0 Kudos
Thanks Michael,

The Dashboard look and feel is great!

We would like to try and see what we can do with our current Dashboards based on your KPI template.

Can you make your template available for download once more?

 

Regards,

Benji
michael_jung2
Product and Topic Expert
Product and Topic Expert
0 Kudos
done
benjamin_masahud
Discoverer
0 Kudos
Thanks very much!

Regards,

Benji
michael_jung2
Product and Topic Expert
Product and Topic Expert
0 Kudos
you're welcome.
former_member564136
Participant
0 Kudos
Hi Michael,

I really appreciate your efforts.. Could you please provide the access to download the file.

 

Regards,

Ajay Emmadi
robert_goldgruber
Discoverer
0 Kudos
Hi,

very nice dashboard. Unfortunately the download link is not working, can you please update the link?

Thanks,

Robert
michael_jung2
Product and Topic Expert
Product and Topic Expert
try again...
former_member753204
Discoverer
0 Kudos
Is it possible to have different KPIs refresh at different times? If a tab (specific module) data is updated weekly and other tab (another module) is updated daily, is it possible to keep this in the dashboard?

This is when using online datasources
former_member753204
Discoverer
0 Kudos

Hi Michael,

Is it possible to have different KPIs refresh at different times? If a tab (specific module) data is updated weekly and other tab (another module) is updated daily, is it possible to keep this in the dashboard?

This is when using online datasources

former_member771498
Discoverer
0 Kudos
Hello,

 

Great document!

Can you please make the file avialable for download?

 

Thanks,

Rahul
0 Kudos
Link doesn't work
michael_jung2
Product and Topic Expert
Product and Topic Expert
0 Kudos
try again
maenmustafa
Discoverer
0 Kudos
the link expired , could you please upload it to more safe place not expiring every day?

thank you
michael_jung2
Product and Topic Expert
Product and Topic Expert
0 Kudos
try again. 90 days is max for one drive.
jens_gross
Member
0 Kudos
Hi Michael, the link doesn't work.
Can you update it again? Thank you.
former_member10803
Discoverer
0 Kudos
Hi Michael,

Can you update it again? Thank you.

Kind Regards,

Sebastian
michael_jung2
Product and Topic Expert
Product and Topic Expert
0 Kudos
try again.
christiankrug
Discoverer
0 Kudos
Would you mind updating the link once more?
michael_jung2
Product and Topic Expert
Product and Topic Expert
0 Kudos
try again...
christiankrug
Discoverer
0 Kudos
Thank you so much
S0008194347
Discoverer
0 Kudos
Hello Micheal,

 

it seems I was one day late with the download and I think the 90 days session on the one drive has expired. Can I kindly ask you to update this "hot" link?

Thank You in advance and all the best in the upcoming year.