Skip to Content
Technical Articles
Author's profile photo Uladzislau Pralat
Uladzislau Pralat
January 27, 2019 10 minute read

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

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

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

From the tile user can tell that Fastest Jet airline meets Seats Occupancy rate target for period from Feb 2018 to Jan 2019 compared for same period of last year, but the problem is that user does not know how company progressed through this period and where the problems are.

Custom Tile is more informative and reveal more analytical insight:

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

 

2×1 Numeric Content & Area 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 CustomTile6.view.js code that displays the Custom Tile data:

var point1 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/point1XValue}",
	y: "{/data/emp/point1YValue}"
});
var point2 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/point2XValue}",
	y: "{/data/emp/point2YValue}"
});
var point3 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/point3XValue}",
	y: "{/data/emp/point3YValue}"
});
var point4 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/point4XValue}",
	y: "{/data/emp/point4YValue}"
});
var point5 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/point5XValue}",
	y: "{/data/emp/point5YValue}"
});
var point6 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/point6XValue}",
	y: "{/data/emp/point6YValue}"
});
var point7 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/point7XValue}",
	y: "{/data/emp/point7YValue}"
});
var point8 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/point8XValue}",
	y: "{/data/emp/point8YValue}"
});			
var point9 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/point9XValue}",
	y: "{/data/emp/point9YValue}"
});
var point10 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/point10XValue}",
	y: "{/data/emp/point10YValue}"
});
var point11 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/point11XValue}",
	y: "{/data/emp/point11YValue}"
});
var point12 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/point12XValue}",
	y: "{/data/emp/point12YValue}"
});
var point13 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/point13XValue}",
	y: "{/data/emp/point13YValue}"
});
var point14 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/point14XValue}",
	y: "{/data/emp/point14YValue}"
});
var point15 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/point15XValue}",
	y: "{/data/emp/point15YValue}"
});
var point16 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/point16XValue}",
	y: "{/data/emp/point16YValue}"
});			
var point17 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/point17XValue}",
	y: "{/data/emp/point17YValue}"
});
var point18 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/point18XValue}",
	y: "{/data/emp/point18YValue}"
});
var point19 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/point19XValue}",
	y: "{/data/emp/point19YValue}"
});
var point20 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/point20XValue}",
	y: "{/data/emp/point20YValue}"
});
var point21 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/point21XValue}",
	y: "{/data/emp/point21YValue}"
});
var point22 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/point22XValue}",
	y: "{/data/emp/point22YValue}"
});
var point23 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/point23XValue}",
	y: "{/data/emp/point23YValue}"
});
var point24 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/point24XValue}",
	y: "{/data/emp/point24YValue}"
});
var point25 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/point25XValue}",
	y: "{/data/emp/point25YValue}"
});
var point26 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/point26XValue}",
	y: "{/data/emp/point26YValue}"
});
var point27 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/point27XValue}",
	y: "{/data/emp/point27YValue}"
});
var point28 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/point28XValue}",
	y: "{/data/emp/point28YValue}"
});
var point29 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/point29XValue}",
	y: "{/data/emp/point29YValue}"
});
var point30 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/point30XValue}",
	y: "{/data/emp/point30YValue}"
});
var point31 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/point31XValue}",
	y: "{/data/emp/point31YValue}"
});			

var target1 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/target1XValue}",
	y: "{/data/emp/target1YValue}"
});
var target2 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/target2XValue}",
	y: "{/data/emp/target2YValue}"
});
var target3 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/target3XValue}",
	y: "{/data/emp/target3YValue}"
});
var target4 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/target4XValue}",
	y: "{/data/emp/target4YValue}"
});
var target5 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/target5XValue}",
	y: "{/data/emp/target5YValue}"
});
var target6 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/target6XValue}",
	y: "{/data/emp/target6YValue}"
});
var target7 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/target7XValue}",
	y: "{/data/emp/target7YValue}"
});
var target8 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/target8XValue}",
	y: "{/data/emp/target8YValue}"
});
var target9 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/target9XValue}",
	y: "{/data/emp/target9YValue}"});
var target10 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/target10XValue}",
	y: "{/data/emp/target10YValue}"
});
var target11 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/target11XValue}",
	y: "{/data/emp/target11YValue}"
});
var target12 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/target12XValue}",
	y: "{/data/emp/target12YValue}"
});
var target13 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/target13XValue}",
	y: "{/data/emp/target13YValue}"
});
var target14 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/target14XValue}",
	y: "{/data/emp/target14YValue}"
});
var target15 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/target15XValue}",
	y: "{/data/emp/target15YValue}"
});
var target16 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/target16XValue}",
	y: "{/data/emp/target16YValue}"
});						
var target17 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/target17XValue}",
	y: "{/data/emp/target17YValue}"
});
var target18 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/target18XValue}",
	y: "{/data/emp/target18YValue}"
});
var target19 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/target19XValue}",
	y: "{/data/emp/target19YValue}"
});
var target20 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/target20XValue}",
	y: "{/data/emp/target20YValue}"
});
var target21 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/target21XValue}",
	y: "{/data/emp/target21YValue}"
});
var target22 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/target22XValue}",
	y: "{/data/emp/target22YValue}"
});
var target23 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/target23XValue}",
	y: "{/data/emp/target23YValue}"
});
var target24 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/target24XValue}",
	y: "{/data/emp/target24YValue}"
});
var target25 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/target25XValue}",
	y: "{/data/emp/target25YValue}"
});
var target26 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/target26XValue}",
	y: "{/data/emp/target26YValue}"
});
var target27 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/target27XValue}",
	y: "{/data/emp/target27YValue}"
});
var target28 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/target28XValue}",
	y: "{/data/emp/target28YValue}"
});
var target29 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/target29XValue}",
	y: "{/data/emp/target29YValue}"
});
var target30 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/target30XValue}",
	y: "{/data/emp/target30YValue}"
});
var target31 = new sap.suite.ui.microchart.AreaMicroChartPoint({
	x: "{/data/emp/target31XValue}",
	y: "{/data/emp/target31YValue}"
});			
	
var firstXLabel = new sap.suite.ui.microchart.AreaMicroChartLabel({
	label: "{/data/emp/firstXLabel}"
});
var lastXLabel = new sap.suite.ui.microchart.AreaMicroChartLabel({
	label: "{/data/emp/lastXLabel}"
});

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.AreaMicroChart({
					width: "144px",
					height: "78px",
					colorPalette: "#5cbae6",
					minXValue: "{/data/emp/minXValue}",
					maxXValue: "{/data/emp/maxXValue}",
					minYValue: "{/data/emp/minYValue}",
					maxYValue: "{/data/emp/maxYValue}",
					firstXLabel: [firstXLabel],
					lastXLabel: [lastXLabel],
					lines: [new sap.suite.ui.microchart.AreaMicroChartItem({
								points: [
									point1, point2, point3, point4, point5, point6, point7, point8,
							        point9, point10, point11, point12, point13, point14, point15, point16,
							        point17, point18, point19, point20, point21, point22, point23, point24,
							        point25, point26, point27, point28, point29, point30, point31]
							})],
					target: [new sap.suite.ui.microchart.AreaMicroChartItem({
								points: [
									target1, target2, target3, target4, target5, target6, target7, target8,
								    target9, target10, target11, target12, target13, target14, target15, target16,
								    target17, target18, target19, target20, target21, target22, target23, target24,
								    target25, target26, target27, target28, target29, target30, target31]
							})]
				})	]
		}) ],
		press: [oController.onPress, oController]
	});

 

This is how Numeric Content & Area Microchart Custom Tile is registered:

Once registered the tile is available in Fiori Launchpad Designer:

ZTILE_NUM_AREA_SRV OData Service created to feed Numeric Content and Area Microchart Custom Tile with data

Below is ZTILE_NUM_AREA Entity Type of the service:

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

 

ZTILES_NUM_AREA Entity Set is defined based on ZTILE_NUM_AREA Entity Type:

ZTILE_NUM_AREA_SRV OData Service has GetEntity (Read) operation implemented for ZTILES_NUM_AREA Entity Set:

Below is the implementation:

METHOD ztiles_num_area_get_entity.

  er_entity = zcl_tile_num_area=>get_entity( io_tech_request_context ).

ENDMETHOD.

Note: ZCL_TILE_NUM_AREA=>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_AREA=>GET_ENTITY_FLIGHT_OCC method is called

This is how ZCL_TILE_NUM_AREA=>GET_ENTITY_FLIGHT_OCC method is implemented:

METHOD get_entity_flight_occ.
DATA: w_pointyvalue  TYPE i,
      w_targetyvalue TYPE i.

  rs_entity = VALUE #(
    icon             = 'sap-icon://waiver'
    number           = '78.8'
    numberDigits     = '5'
    numberFactor     = ''
    numberState      = get_number_state_maximize( iv_value_1 = '78.8' iv_value_2 = '77.6' )
    numberUnit       = '%'
    subtitle         = 'Feb 2018 - Jan 2019'
    title            = 'Fastest Jet Seats Occupancy'
    unit1            = '%'
    unit2            = '%'
    firstXLabel      = 'Feb 2018'
    lastXLabel       = 'Jan 2019'
    minXValue        = '1'
    maxXValue        = '12'
    minYValue        = '76'
    maxYValue        = '81'
    point1YValue     = '78'
    point2YValue     = '76'
    point3YValue     = '79'
    point4YValue     = '78'
    point5YValue     = '80'
    point6YValue     = '77'
    point7YValue     = '79'
    point8YValue     = '79'
    point9YValue     = '80'
    point10YValue    = '79'
    point11YValue    = '80'
    point12YValue    = '81'
    target1YValue    = '80'
    target2YValue    = '79'
    target3YValue    = '78'
    target4YValue    = '76'
    target5YValue    = '78'
    target6YValue    = '76'
    target7YValue    = '77'
    target8YValue    = '80'
    target9YValue    = '77'
    target10YValue   = '76'
    target11YValue   = '78'
    target12YValue   = '77'
 ).
*
   DATA(wt_components) = CAST cl_abap_structdescr( cl_abap_typedescr=>describe_by_data( rs_entity ) )->components.
   LOOP AT wt_components ASSIGNING FIELD-SYMBOL(<s_components>) WHERE name CP 'POINT*XVALUE'.
     FIND ALL OCCURRENCES OF REGEX '([0-9]{1,2})' IN <s_components>-name SUBMATCHES DATA(s1).
     ASSIGN COMPONENT <s_components>-name OF STRUCTURE rs_entity TO FIELD-SYMBOL(<field>).
     <field> = s1.
   ENDLOOP.
   wt_components = CAST cl_abap_structdescr( cl_abap_typedescr=>describe_by_data( rs_entity ) )->components.
   LOOP AT wt_components ASSIGNING <s_components> WHERE name CP 'TARGET*XVALUE'.
     FIND ALL OCCURRENCES OF REGEX '([0-9]{1,2})' IN <s_components>-name SUBMATCHES s1.
     ASSIGN COMPONENT <s_components>-name OF STRUCTURE rs_entity TO <field>.
     <field> = s1.
   ENDLOOP.
   LOOP AT wt_components ASSIGNING <s_components> WHERE name CP 'POINT*YVALUE'.
     ASSIGN COMPONENT <s_components>-name OF STRUCTURE rs_entity TO <field>.
     <field> = w_pointyvalue = COND #( WHEN <field> <> 0 THEN <field> ELSE w_pointyvalue ).
   ENDLOOP.
   LOOP AT wt_components ASSIGNING <s_components> WHERE name CP 'TARGET*YVALUE'.
     ASSIGN COMPONENT <s_components>-name OF STRUCTURE rs_entity TO <field>.
     <field> = w_targetyvalue = COND #( WHEN <field> <> 0 THEN <field> ELSE w_targetyvalue ).
   ENDLOOP.

ENDMETHOD.

ZCL_TILE_NUM_AREA class source code can be downloaded from here

Numeric Content and Area Microchart Custom Tile is configured in Fiori Launchpad Designer as displayed below:

 

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.