Skip to Content

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 project)

 

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.

To report this post you need to login first.

Be the first to leave a comment

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

Leave a Reply