How to Add a Tile with Dynamic Content to the SAP Fiori Launchpad

In SAP Fiori Launchpad, it’s possible to use tiles of various types.

See: Configuring Tiles

In my previous notes on SAPUI5, I consistently used the static app launcher tile type.

See: Static App Launcher Tiles

This is straightforward: you have an application that should be launched from the launchpad, along with a fixed tile name and icon.

In this note, I plan to demonstrate an example of using a tile with dynamic content.

See: Dynamic App Launcher Tiles
In contrast to regular (static) app launcher tiles, the information that is displayed on a dynamic app launcher tile can be pulled from a back-end system using an OData service. This topic describes the parameters for configuring dynamic app launcher tiles

You can focus the user's attention on a specific business process metric. A good example in this context is a counter for incoming tasks where the user logged into the launchpad is the designated processor.

To control the tile’s displayed content, you need to create an OData service that returns data in a specific format.

See: OData Structure for Dynamic App Launchers

OData services can be created in transaction SEGW.

Note: Be aware that all OData properties mentioned in the documentation are case-sensitive.

Define the rules by which the tile content will change. SAP provides flexible options here (from tile title to visual indicators). These rules should be implemented in the *GET_ENTITY method of the newly created OData service.

For this demo, I’ll use a custom table and pull some sample data from it. Based on the analysis, the tile’s content will be dynamically updated. For example:

DATA lv_count TYPE int_5.
 
    CALL FUNCTION 'ZFMTABLE_READ'
      EXPORTING
        im_uname    = sy-uname
      IMPORTING
        ex_zznumber = lv_count.
 
    IF lv_count < 3.
      er_entity-title = 'Sad Tile'.
      er_entity-info = ':-('.
      er_entity-number = lv_count.
      er_entity-subtitle = 'Mood: sad'.
      er_entity-icon  = 'sap-icon://BusinessSuiteInAppSymbols/icon-face-bad'.
      er_entity-infostate = 'Critical'.
      er_entity-numberdigits = ''.
      er_entity-numberfactor = ''.
      er_entity-numberunit = ''.
      er_entity-numberstate = 'Critical'.
      er_entity-statearrow = 'Down'.
      er_entity-infostate = 'Critical'.
    ELSEIF lv_count >= 3 AND lv_count <= 5.
      er_entity-title = 'A little bit happier tile'.
      er_entity-info = ':-|'.
      er_entity-number = lv_count.
      er_entity-subtitle = 'Mood: better'.
      er_entity-icon  = 'sap-icon://BusinessSuiteInAppSymbols/icon-face-neutral'.
      er_entity-infostate = 'Negative'.
      er_entity-numberdigits = ''.
      er_entity-numberfactor = ''.
      er_entity-numberunit = ''.
      er_entity-numberstate = 'Negative'.
      er_entity-statearrow = 'None'.
      er_entity-infostate = 'Negative'.
    ELSEIF lv_count > 5.
      er_entity-title = 'Happy tile'.
      er_entity-info = ':-O'.
      er_entity-number = lv_count.
      er_entity-subtitle = 'Mood: happy'.
      er_entity-icon  = 'sap-icon://BusinessSuiteInAppSymbols/icon-face-okey-dokey'.
      er_entity-infostate = 'Positive'.
      er_entity-numberdigits = ''.
      er_entity-numberfactor = ''.
      er_entity-numberunit = ''.
      er_entity-numberstate = ''.
      er_entity-statearrow = 'Up'.
      er_entity-infostate = 'Positive'.
    ENDIF.

Don’t forget to activate the class and register the OData service in the system.

While editing the tile catalog (transaction /ui2/FLPD_CUST), create a new tile of type App Launcher – Dynamic.

Define the path to the OData service, specify the Entity Set, and set a refresh interval that determines how often the tile data should be updated.

Note: No fixed parameters are defined for the new tile since its content will be retrieved dynamically from the backend.

In the accompanying video, you can see the process of executing a functional module that updates the table data used by the tile. After each execution, I return to the launchpad and wait for the tile content to refresh. For demonstration purposes, the refresh interval is set to 10 seconds.