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

[uladzislau_pralat]

In first part of my blog I demonstrated how to reveal more analytical insight with 2x1 Custom Fiori Launchpad Tiles visualizing target value or compared value with Microchart.

In second part of my blog I will demonstrate how to reveal some more analytical insight with 2x1 Custom Fiori Launchpad Tiles visualizing trend with Column Microchart.

Below is standard dynamic tile (numeric content):



From the tile user can tell that Fastest Jet airline does not meet FTD 2017 Seats Occupancy rate target, but the problem is that user does not know how company progressed through fiscal year and where the problems are.

I created two custom tiles to address the issue with Mircrochart visualizations:

2×1 Numeric Content & Column Microchart (4 columns)
2×1 Numeric Content & Column Microchart (12 columns)

Custom Tiles are more informative and reveal more analytical insight:



This Custom Tile is especially helpful when target value changes.

 

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 CustomTile2 and CustomTile3)


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

 

2×1 Numeric Content & Column Microchart (4 columns)

 

This is a structure of Numeric Content & Column Microchart (4 columns) Custom Tile Fiori project in Web IDE:



You can download the project from here

Since the tile is 2×1 some specific configuration needs to be done in CustomChip.xml file:



 

Below is a portion of CustomTile2.controller.js code that passes additional data to custom tile:

successHandleFn: function(oResult) {

	var oConfig = this.getView().getModel().getProperty("/config");

	this.oDataRequest = undefined;

	var oData = oResult,

		oDataToDisplay;



	oDataToDisplay = sap.ushell.components.tiles.utilsRT.getDataToDisplay(oConfig, oData);

	var aKeys = [

		// Additional data for our KPI Tile //

		"leftTopLabel", "rightTopLabel", "value1", "value2", "value3", "value4", "color1", "color2", "color3", "color4", "footer1",

		"footer2", "unit1", "unit2"

		// End additional data //

	];

	

	// Prepare emp object:

	oResult.results = {};

	for (var i = 0; i < aKeys.length; i++) {

		if (i === 2 || i === 3 || i === 4 || i === 5) {

			oResult.results[aKeys[i]] = parseFloat(oResult[aKeys[i]]);

		} else {

			oResult.results[aKeys[i]] = oResult[aKeys[i]];

		}

	}

	

	// Store the additional results back to emp

	oDataToDisplay.emp = oResult.results;

	

	// set data to display

	this.getView().getModel().setProperty("/data", oDataToDisplay);

	

	// rewrite target URL

	this.getView().getModel().setProperty("/nav/navigation_target_url",

		sap.ushell.components.tiles.utilsRT.addParamsToUrl(

			this.navigationTargetUrl,

			oDataToDisplay

		));

},

Note: value1, value2, value3 and value4 are converted to float to have them displayed correctly

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

var lefttoplabel = new sap.suite.ui.microchart.ColumnMicroChartLabel({

	label: "{/data/emp/leftTopLabel}",

	color: "Neutral"

});

var righttoplabel = new sap.suite.ui.microchart.ColumnMicroChartLabel({

	label: "{/data/emp/rightTopLabel}",

	color: "Neutral"

});

var column1 = new sap.suite.ui.microchart.ColumnMicroChartData({

	value: "{/data/emp/value1}",

	color: "{/data/emp/color1}"

});

var column2 = new sap.suite.ui.microchart.ColumnMicroChartData({

	value: "{/data/emp/value2}",

	color: "{/data/emp/color2}"

});

var column3 = new sap.suite.ui.microchart.ColumnMicroChartData({

	value: "{/data/emp/value3}",

	color: "{/data/emp/color3}"

});

var column4 = new sap.suite.ui.microchart.ColumnMicroChartData({

	value: "{/data/emp/value4}",

	color: "{/data/emp/color4}"

});



return new sap.m.GenericTile({

	header: '{/data/display_title_text}',

	subheader: '{/data/display_subtitle_text}',

	frameType: "TwoByOne", //TwoByOne

	tileContent: [

		new sap.m.TileContent({

			footer: '{/data/emp/footer1}',

			unit: '{/data/emp/unit1}',

			content: [

				new sap.m.NumericContent({

					scale: '{/data/display_number_factor}',

					value: '{/data/display_number_value}',

					truncateValueTo: 5, //Otherwise, The default value is 4.

					indicator: '{/data/display_state_arrow}',

					valueColor: '{/data/display_number_state}',

					icon: '{/data/display_icon_url}',

					width: '100%'

				})

			]

		}),

		new sap.m.TileContent({

			footer: '{/data/emp/footer2}',

			unit: '{/data/emp/unit2}',

			content: [

				new sap.suite.ui.microchart.ColumnMicroChart({

					leftTopLabel: lefttoplabel,

					columns: [column1, column2, column3, column4]

				})

			]

		})

	],

	press: [oController.onPress, oController]

});

This is how Numeric Content & Column Microchart (4 columns) Custom Tile is registered





Once registered the tile is available in Fiori Launchpad Designer



ZTILE_NUM_COL4_SRV OData Service is created to feed Numeric Content & Column Microchart (4 columns) Custom Tile with data

Below is ZTILE_NUM_COL4 Entity Type of the service



Note: first comes properties of Standard Dynamic Tile followed by properties specific to my Numeric Content & Column Microchart Tile (4 columns)

ZTILES_NUM_COL4 Entity Set is defined based on ZTILE_NUM_COL4 Entity Type



ZTILE_NUM_COL4_SRV OData Service has GetEntity (Read) operation implemented for ZTILES_NUM_COL4 Entity Set



Below is the implementation:

METHOD ztiles_num_col4_get_entity.



  er_entity = zcl_tile_num_col4=>get_entity( io_tech_request_context ).



ENDMETHOD.

Note: ZCL_TILE_NUM_COL4=>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_NUM_COL4=>GET_ENTITY_FLIGHT_OCC method is called



This is how ZCL_TILE_NUM_COL4=>GET_ENTITY_FLIGHT_OCC method is implemented:

METHOD get_entity_flight_occ.



  rs_entity = VALUE #(

    icon             = 'sap-icon://waiver'

    number           = '76.0'

    numberDigits     = '5'

    numberFactor     = ''

    numberState      = 'Error'                           "Positive or Error

    numberUnit       = '%'

    subtitle         = 'FTD 2017'

    title            = 'Fastest Jet Seats Occupancy'

    unit1            = '%'

    unit2            = '%'

    leftTopLabel     = '2017 Q2'

    rightTopLabel    = '2018 Q1'

    value1           = 80

    value2           = 70

    value3           = 75

    value4           = 81

    color1           = 'Good'

    color2           = 'Error'

    color3           = 'Error'

    color4           = 'Good' ).



ENDMETHOD.

ZCL_TILE_NUM_COL4 class source code can be downloaded from here

Numeric Content & Column Microchart Tile (4 columns) is configured in Fiori Launchpad Designer as displayed below:



Note: /sap/opu/odata/SAP/ZTILE_NUM_COL4_SRV/ZTILES_NUM_COL4('Flight Occ')/?$format=json URL has ‘Flight Oc’ entity key corresponds to ZCL_TILE_NUM_COL4=>GET_ENTITY_FLIGHT_OCC method

 

 

2×1 Numeric Content & Column Microchart (12 columns)

 

This is a structure of  Numeric Content & Column Microchart Custom Tile (12 columns) Fiori project in Web IDE:



You can download the project from here

Since the tile is 2×1 some specific configuration needs to be done in CustomChip.xml file:



Below is a portion of CustomTile3.controller.js code that passes additional data to the custom tile:

successHandleFn: function(oResult) {

	var oConfig = this.getView().getModel().getProperty("/config");

	this.oDataRequest = undefined;

	var oData = oResult,

		oDataToDisplay;

	oDataToDisplay = sap.ushell.components.tiles.utilsRT.getDataToDisplay(oConfig, oData);

	var aKeys = [

		// Additional data for our KPI Tile //

		"leftTopLabel", "rightTopLabel", "value1", "value2", "value3", "value4", "value5", "value6", "value7", "value8", "value9",

		"value10", "value11", "value12", "color1", "color2", "color3", "color4", "color5", "color6", "color7", "color8", "color9",

		"color10", "color11", "color12", "footer1", "footer2", "unit1", "unit2"

		// End additional data //

	];

	// Prepare emp object:

	oResult.results = {};

	for (var i = 0; i < aKeys.length; i++) {

		if (i === 2 || i === 3 || i === 4 || i === 5 || i === 6 || i === 7 || i === 8 || i === 9 || i === 10 || i === 11 || i === 12 || i ===

			13) {

			oResult.results[aKeys[i]] = parseFloat(oResult[aKeys[i]]);

		} else {

			oResult.results[aKeys[i]] = oResult[aKeys[i]];

		}

	}



	// Store the additional results back to emp

	oDataToDisplay.emp = oResult.results;



	// set data to display

	this.getView().getModel().setProperty("/data", oDataToDisplay);



	// rewrite target URL

	this.getView().getModel().setProperty("/nav/navigation_target_url",

		sap.ushell.components.tiles.utilsRT.addParamsToUrl(

			this.navigationTargetUrl,

			oDataToDisplay

		));

},

Note: value1 through value12 are converted to float to have them displayed correctly

Below is a portion of CustomTile3.view.js code that displays the custom tile data:

var lefttoplabel = new sap.suite.ui.microchart.ColumnMicroChartLabel({

	label: "{/data/emp/leftTopLabel}",

	color: "Neutral"

});

var righttoplabel = new sap.suite.ui.microchart.ColumnMicroChartLabel({

	label: "{/data/emp/rightTopLabel}",

	color: "Neutral"

});



var column1 = new sap.suite.ui.microchart.ColumnMicroChartData({

	value: "{/data/emp/value1}",

	color: "{/data/emp/color1}"

});

var column2 = new sap.suite.ui.microchart.ColumnMicroChartData({

	value: "{/data/emp/value2}",

	color: "{/data/emp/color2}"

});

var column3 = new sap.suite.ui.microchart.ColumnMicroChartData({

	value: "{/data/emp/value3}",

	color: "{/data/emp/color3}"

});

var column4 = new sap.suite.ui.microchart.ColumnMicroChartData({

	value: "{/data/emp/value4}",

	color: "{/data/emp/color4}"

});

var column5 = new sap.suite.ui.microchart.ColumnMicroChartData({

	value: "{/data/emp/value5}",

	color: "{/data/emp/color5}"

});

var column6 = new sap.suite.ui.microchart.ColumnMicroChartData({

	value: "{/data/emp/value6}",

	color: "{/data/emp/color6}"

});

var column7 = new sap.suite.ui.microchart.ColumnMicroChartData({

	value: "{/data/emp/value7}",

	color: "{/data/emp/color7}"

});

var column8 = new sap.suite.ui.microchart.ColumnMicroChartData({

	value: "{/data/emp/value8}",

	color: "{/data/emp/color8}"

});

var column9 = new sap.suite.ui.microchart.ColumnMicroChartData({

	value: "{/data/emp/value9}",

	color: "{/data/emp/color9}"

});

var column10 = new sap.suite.ui.microchart.ColumnMicroChartData({

	value: "{/data/emp/value10}",

	color: "{/data/emp/color10}"

});

var column11 = new sap.suite.ui.microchart.ColumnMicroChartData({

	value: "{/data/emp/value11}",

	color: "{/data/emp/color11}"

});

var column12 = new sap.suite.ui.microchart.ColumnMicroChartData({

	value: "{/data/emp/value12}",

	color: "{/data/emp/color12}"

});



return new sap.m.GenericTile({

	header: '{/data/display_title_text}',

	subheader: '{/data/display_subtitle_text}',

	frameType: "TwoByOne", //TwoByOne

	tileContent: [new sap.m.TileContent({

			footer: '{/data/emp/footer1}',

			unit: '{/data/emp/unit1}',

			content: [

				new sap.m.NumericContent({

					scale: '{/data/display_number_factor}',

					value: '{/data/display_number_value}',

					truncateValueTo: 5, //Otherwise, The default value is 4.

					indicator: '{/data/display_state_arrow}',

					valueColor: '{/data/display_number_state}',

					icon: '{/data/display_icon_url}',

					width: '100%'

				})

			]

		}),



		new sap.m.TileContent({

			footer: '{/data/emp/footer2}',

			unit: '{/data/emp/unit2}',

			content: [

				new sap.suite.ui.microchart.ColumnMicroChart({

					leftTopLabel: lefttoplabel,

					rightTopLabel: righttoplabel,

						columns: [column1, column2, column3, column4, column5, column6, column7, column8, column9, column10, column11, column12]

				})



			]

			})

		],

		press: [oController.onPress, oController]

});

This is how Numeric Content & Column Microchart Custom Tile (12 columns) is registered:





Once registered the tile is available in Fiori Launchpad Designer



ZTILE_NUM_COL12_SRV OData Service is created to feed Numeric Content & Column Microchart (12 columns) Custom Tile with data

Below is ZTILE_NUM_COL12 Entity Type of the service



Note: first comes properties of Standard Dynamic Tile followed by properties specific to my Numeric Content & Column Microchart Tile (12 columns)

ZTILES_NUM_COL12 Entity Set is defined based on ZTILE_NUM_COL12 Entity Type



ZTILE_NUM_COL12_SRV OData Service has GetEntity (Read) operation implemented for ZTILES_NUM_COL12 Entity Set



Below is the implementation:

METHOD ztiles_num_col12_get_entity.



  er_entity = zcl_tile_num_col12=>get_entity( io_tech_request_context ).



ENDMETHOD.

Note: ZCL_TILE_NUM_COL12=>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_NUM_COL12=>GET_ENTITY_FLIGHT_OCC method is called



This is how ZCL_TILE_NUM_COL12=>GET_ENTITY_FLIGHT_OCC method is implemented:

METHOD get_entity_flight_occ.



  rs_entity = VALUE #(

    icon             = 'sap-icon://waiver'

    number           = '76.0'

    numberDigits     = '5'

    numberFactor     = ''

    numberState      = 'Error'                           "Positive or Error

    numberUnit       = '%'

    subtitle         = 'FTD 2017'

    title            = 'Fastest Jet Seats Occupancy'

    unit1            = '%'

    unit2            = '%'

    leftTopLabel     = 'Apr 2017'

    rightTopLabel    = 'Mar 2018'

    value1           = 81

    value2           = 80

    value3           = 79

    value4           = 75

    value5           = 65

    value6           = 70

    value7           = 76

    value8           = 75

    value9           = 74

    value10          = 77

    value11          = 85

    value12          = 0

    color1           = 'Good'

    color2           = 'Good'

    color3           = 'Error'

    color4           = 'Error'

    color5           = 'Error'

    color6           = 'Error'

    color7           = 'Error'

    color8           = 'Error'

    color9           = 'Error'

    color10          = 'Error'

    color11          = 'Good'

    color12          = 'Neutral' ).



ENDMETHOD.

ZCL_TILE_NUM_COL12 class source code can be downloaded from here

Numeric Content & Column Microchart Tile (12 columns) is configured in Fiori Launchpad Designer as displayed below:



Note: /sap/opu/odata/SAP/ZTILE_NUM_COL12_SRV/ZTILES_NUM_COL12('Flight Occ')/?$format=json URL has ‘Flight Oc’ entity key corresponds to ZCL_TILE_NUM_COL12=>GET_ENTITY_FLIGHT_OCC method

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.