Skip to Content
Technical Articles

Reveal More Analytical Insight with Custom Fiori Launchpad Tiles: Part 3

In first and second parts of my I demonstrated how to reveal more analytical insight with 2×1 Custom Fiori Launchpad Tiles visualizing target value or comparison value with Microchart.

In third part of my blog I will demonstrate how to reveal some more analytical insight with 1×1 Custom Fiori comparing multiple values with a single Microchart.

 

Below are 3 standard dynamic tiles (Numeric Content):

Current Seats Occupancy rate is compared with 6 months Seats Occupancy rate and 12 months Seats Occupancy rate. The same information can be visualized better using 1×1 Comparison Microchart Custom Fiori Tile.

Below is a list of steps to create a Custom Fiori Launchpad Tile:

  1. Create Custom Tile Web IDE project;
  2. Deploy Custom Tile Web IDE project to back-end system;
  3. Register Custom Tile.

To use custom tile you need:

  1. Create Data Service that feeds Custom Tile with data;
  2. Configure Tile in Fiori Launchpad Designer.

The above steps are explained in following 2 blogs:

How-To: Create Custom Tile types for OnPremise Fiori Launchpad

Create and use custom tile type

I am not going to repeat the same information over again, but rather focus on what requires additional clarification and specific to my Custom Tiles.

This is what I learned from my experience:

  • Custom Tiles deployed to back-end system must have unique custom tile view and controller names (in my case CustomTile4)
  • UI2 cache needs to be cleared to make changes to your custom tile take into effect (execute /UI2/INVALIDATE_CLIENT_CACHES and /UI2/INVALIDATE_GLOBAL_CACHES programs)

 

1×1 Comparison Microchart Custom Tile

This is a structure of Comparison Microchart Custom Tile Fiori project in Web IDE:

You can download project from here

Below is a portion of CustomTile4.view.js code that displays the Custom Tile data:

var data1 = new sap.suite.ui.microchart.ComparisonMicroChartData({
	title: "{/data/emp/title1}",
	value: "{/data/emp/value1}",
	color: "{/data/emp/color1}"
});
var data2 = new sap.suite.ui.microchart.ComparisonMicroChartData({
	title: "{/data/emp/title2}",
	value: "{/data/emp/value2}",
	color: "{/data/emp/color2}"
});
var data3 = new sap.suite.ui.microchart.ComparisonMicroChartData({
	title: "{/data/emp/title3}",
	value: "{/data/emp/value3}",
	color: "{/data/emp/color3}"
});

return new sap.m.GenericTile({
	header: '{/data/display_title_text}',
	subheader: '{/data/display_subtitle_text}',
	frameType: "OneByOne",
	tileContent: [new sap.m.TileContent({
	footer: "{/data/emp/footer}",
		unit: "{/data/emp/unit}",
		content: [
			new sap.suite.ui.microchart.ComparisonMicroChart({
				size: "M",
				data: [
					data1,
					data2,
					data3
				]
			})
		]
	})],
	press: [oController.onPress, oController]
});

This is how Comparison Microchart Custom Tile is registered:

Once registered the tile is available in Fiori Launchpad Designer:

ZTILE_COMP_SRV OData Service created to feeds Comparison Microchart Custom Tile with data

Below is ZTILE_COMP Entity Type of the service

Note: first comes properties of standard dynamic tile followed by properties specific to my Comparison Microchart Tile (in red rectangle)

ZTILES_COMP Entity Set is defined based on ZTILE_COMP Entity Type:

ZTILE_COMP_SRV OData Service has GetEntity (Read) operation implemented for ZTILES_COMP Entity Set:

Below is the implementation:

METHOD ztiles_comp_get_entity.

  er_entity = zcl_tile_comp=>get_entity( io_tech_request_context ).

ENDMETHOD.

Note: ZCL_TILE_COMP=>GET_ENTITY method takes request context as an input and calls method that correspond to entity key

METHOD get_entity.

  DATA(wt_keys) = io_tech_request_context->get_keys( ).
  TRY.
    DATA(w_title) = wt_keys[ name = 'TITLE' ]-value.
    DATA(w_method) = REPLACE( val =  |GET_ENTITY_{ w_title CASE = UPPER }| regex = '\s' WITH = '_' OCC = 0 ).
    CALL METHOD (w_method) RECEIVING rs_entity = rs_entity.
  CATCH cx_sy_itab_line_not_found cx_sy_dyn_call_error.
  ENDTRY.

ENDMETHOD.

Note: this method dynamically calls respective method for each entity key. In case of ‘Flight Occ’ entity key ZCL_TILE_COMP=>GET_ENTITY_FLIGHT_OCC method is called

This is how ZCL_TILE_COMP=>GET_ENTITY_FLIGHT_OCC method is implemented:

METHOD get_entity_flight_occ.

  rs_entity = VALUE #(
    subtitle = 'Curr / 3 Mn / 6 Mn'
    title    = 'Fastest Jet Fligth Occupancy'
    unit     = '%'
    title1   = 'Jul 2018'
    value1   = '85.0'
    color1   = c_good
    title2   = 'May 2018 - Jul 2018'
    value2   = '78.6'
    color2   = c_error
    title3   = 'Feb 2018 - Jul 2018'
    value3   = '76.1'
    color3   = c_error ).

ENDMETHOD.

ZCL_TILE_COMP class source code can be downloaded from here

Comparison Microchart Custom Tile is configured in Fiori Launchpad Designer as displayed below:

 

In fourth part of my blog I will demonstrate how to reveal some more analytical insight with 2×1 Custom Fiori visualizing trend with Line Microchart.

1 Comment
You must be Logged on to comment or reply to a post.
  • This was very helpful Uladzislau, thank you.

    I wonder if it’s possible to make the number of bars rendered dynamic? If a caller wants to pass only content for title1/value1/color1 and title2/value2/color2 but not title3/value3/color3? Since the Tile Type is actually rendered prior to the OData service being called to populated these fields, is there some way to make the Microchart tile more reusable by allowing the caller to decide whether to compare 2 things or 3 things?

    If caller passes title3/value3/color3 but leaves their values blank, the Microchart still renders a third row, but it’s grayed out. It would be preferable to render only the bars where data is passed.

    Cheers,
    Amy King