Skip to Content

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

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 D: 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).

To report this post you need to login first.

56 Comments

You must be Logged on to comment or reply to a post.

  1. Brian Kudera

    This is AWESOME!!! Very nicely done! This meets 99.9% of our requirements for what we would need in a dashboard. The only remaining piece is to be able to set alerts on the KPI’s to proactively be notified when something is out of threshold rather than having to review the dashboard every hour/day etc. (Have you ever seen this type of capability added in a lumira document?)

    (1) 
    1. Michael Jung Post author

      mmh… in the previous bw-based solution i stored the favorites in a dso (custom planning function). so in this case you have the information about user and relevant kpi in bw. But there is something missing, the thresholds. With bpc or bi-ip you can also enable your users to maintain the thresholds in a crosstab. You can run a report every hour in background for executing query-result and check whether a threshold was exceeded. as the result you can send an email to the corresponding user with the link to the dashboard.

      (2) 
  2. Former Member

    Dear Michael

    The Dashboard look absolutely fantastic

    Can you please tell me how long did it take you to build it, assuming you have all data ready in BW?

    Thanks,

    Dror G

    (1) 
    1. Michael Jung Post author

      Hi Dror,

      difficult to say, because I’ve developed the dashboard over the last few years. I started only with some value-tiles created using Design Studio 1.4.

      Much work was the data model in BW (transactional data and especially masterdata). Then i devoloped a solution for the startpage, with integrated planning to store the favorites in BW (custom planning function).

      The final dashboard in the internal bw-based solution has more than 70 datasources, 250 KPIs and approx. 3500 components.

      Now i come back to your question: if you know what you want and you know how it works you need only few days if the data is well prepared. For the downloadable demo I spent about 10 days. You see, the effort with Lumira 2.0 is significantly lower.

      Best regards,

      Michael

      (2) 
  3. Former Member

     

    Great Dashboard! and hard work from Micha,  I know how many hours/ days micha invested from the early begining in this dashboard, lumira 2.0 looks a bit like design Studio

    (1) 
  4. Lucas Borges

    IMPRESSIVE work! End-to-end from blog documentation up to downloadable LUMX-File.

    I wish more blogs from SAP would be like this. Keep ’em coming!

    (1) 
  5. Hayden Gill

    Any chance you could also make the spreadsheets available for download? It would make it easier to decipher which parts of the code are accessing which bits of data.

     

    Thanks

    (1) 
      1. Michael Jung Post author

        Hi Vladislav,

        spreadsheets looks exactly like the preview in lumira designer.

        For masterdata-sheet:

        • column A: key of kpi
        • column B: description
        • column C: area (used for search-function to find tab)
        • column D: 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 formatting of kpi

        BR,

        Michael

        (0) 
  6. Bill Cheng

     

    Very nice posting. Thanks very much for sharing! I downloaded both lumx files, I didn’t find the adaptive container in neither one. It doesn’t look like it contains everything explained in the pdf file. Do you have a more complete download? Do you have a version that contains steps for connecting to BW data sources? thank you!

    (0) 
    1. Michael Jung Post author

      Hi,

      please search for ADAPTIVE_LAYOUT_1, ADAPTIVE_LAYOUT_2, ADAPTIVE_LAYOUT_3,

      ADAPTIVE_LAYOUT_4 or ADAPTIVE_LAYOUT_HOME.

      BR,

      Michael

      (0) 
  7. Vineet Gupta

     

    Great starting point for a KPI dashboard. We were able to use it to build a proof of concept using BW queries as datasource. The business really likes the design, ability to create custom home page and mobile compatibility. The blog does a great job of describing the design and it was easy to adapt to our environment. Thanks a lot Michael. SAP should consider bundling it as a sample or a template with the product.

    (0) 
  8. Regys Mene

    Hi Michael,

    I guess it has taken you a long time to build this dashboard!! It just looks perfect and complete. Thanks a lot for sharing it. AWESOME!!

    Best, Regys

     

    (0) 
  9. Beat Andreas Honegger

    Hi Michael

    Very good Job 🙂

    Thanks alot also for the english Version.

    Question: When I try to replace the KPI_Tile I get 3 Objects like:

    LUM_9BB26EB2E9EFB499D479C4E19E5C7AB5_KPI_TILE

    LUM_8ADF17A7EACC37FDF287602DB361A520_KPI_TILE

    LUM_4A051463DCEC317959A7D8E2236D5A7E_KPI_TILE

    Which one I have to choose?

    Thanks for your feedback.

    Beat

    (0) 
    1. Michael Jung Post author

      Hi Beat,

      it looks like, that you imported my file three times. So close all lumx-files (right-click –> close) except your current lumx-file.
      If you open the script editor again, only one tile-component shoud be remaining.

      Best regards,
      Michael

      (0) 
  10. Diogo Leal Chagas

     

    Hi Michael,

    Could you share the LUMX-FILE again or send it to me by mail? I got this error message when i access the link on mdoc “Share is no longer available; contact the owner if you need access”.

    Regards,

    DLC

    (0) 
  11. MOHD FAHAD

    Perfecto…

    In other words, whats in the wind these days, its a Goal….!!!! by Michael

     

    Great example to defend SAP Powerhouse Dashboards against fly-by visualization tools.

     

    Your Dashboard will serve as a great point-of reference of One-Point-Interface across user base.

    Its a DECK that target various audience ‘VP, Manager, Analyst’. Off-course by managing tabs security based on user-log.

     

    Michael – Any chance of re-opening access to Demo-file?

     

    Regards,

    Fahad

    (0) 
  12. Xin Lu

    Hi Michael,

    This is the best document I have read so far in SAP Lumira community. Thanks for sharing,

    I definitely would have a look at LUMX file, could you possible re-open share access for file !

     

    Many thanks,

    Xin

    (0) 
  13. Anthony Hennard

    Hi Michael,

    Many thanks for this presentation.

    Is it possible to re-open share download for lumx file, is no more available !

     

    Best regards,

    Anthony

     

    (0) 
  14. Ibrahim Noorali

    Hi Michael

     

    Many thanks for the post. Could you please share how the dashboard locks the orientation to landscape in IPad?

     

    Thanks

    Ibrahim N.

    (0) 

Leave a Reply