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

[uladzislau_pralat]

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. If nothing else works, try following reports /UI2/DELETE_CACHE_AFTER_IMP and /UI5/UPDATE_CACHEBUSTER)

 

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.