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

[uladzislau_pralat]

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

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.



From the tile user can tell that Fastest Jet airline does not meet Seats Occupancy rate target for period from Aug 2017 to Jul 2018, 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 CustomTile5)


• 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 & Line 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 CustomTile5.view.js code that displays the Custom Tile data:

var point1 = new sap.suite.ui.microchart.LineMicroChartPoint({

	x: "{/data/emp/point1XValue}",

	y: "{/data/emp/point1YValue}"

});

var point2 = new sap.suite.ui.microchart.LineMicroChartPoint({

	x: "{/data/emp/point2XValue}",

	y: "{/data/emp/point2YValue}"

});

var point3 = new sap.suite.ui.microchart.LineMicroChartPoint({

	x: "{/data/emp/point3XValue}",

	y: "{/data/emp/point3YValue}"

});

var point4 = new sap.suite.ui.microchart.LineMicroChartPoint({

	x: "{/data/emp/point4XValue}",

	y: "{/data/emp/point4YValue}"

});

var point5 = new sap.suite.ui.microchart.LineMicroChartPoint({

	x: "{/data/emp/point5XValue}",

	y: "{/data/emp/point5YValue}"

});

var point6 = new sap.suite.ui.microchart.LineMicroChartPoint({

	x: "{/data/emp/point6XValue}",

	y: "{/data/emp/point6YValue}"

});

var point7 = new sap.suite.ui.microchart.LineMicroChartPoint({

	x: "{/data/emp/point7XValue}",

	y: "{/data/emp/point7YValue}"

});

var point8 = new sap.suite.ui.microchart.LineMicroChartPoint({

	x: "{/data/emp/point8XValue}",

	y: "{/data/emp/point8YValue}"

});

var point9 = new sap.suite.ui.microchart.LineMicroChartPoint({

	x: "{/data/emp/point9XValue}",

	y: "{/data/emp/point9YValue}"

});

var point10 = new sap.suite.ui.microchart.LineMicroChartPoint({

	x: "{/data/emp/point10XValue}",

	y: "{/data/emp/point10YValue}"

});

var point11 = new sap.suite.ui.microchart.LineMicroChartPoint({

	x: "{/data/emp/point11XValue}",

	y: "{/data/emp/point11YValue}"

});

var point12 = new sap.suite.ui.microchart.LineMicroChartPoint({

	x: "{/data/emp/point12XValue}",

	y: "{/data/emp/point12YValue}"

});

var point13 = new sap.suite.ui.microchart.LineMicroChartPoint({

	x: "{/data/emp/point13XValue}",

	y: "{/data/emp/point13YValue}"

});

var point14 = new sap.suite.ui.microchart.LineMicroChartPoint({

	x: "{/data/emp/point14XValue}",

	y: "{/data/emp/point14YValue}"

});

var point15 = new sap.suite.ui.microchart.LineMicroChartPoint({

	x: "{/data/emp/point15XValue}",

	y: "{/data/emp/point15YValue}"

});

var point16 = new sap.suite.ui.microchart.LineMicroChartPoint({

	x: "{/data/emp/point16XValue}",

	y: "{/data/emp/point16YValue}"

});

var point17 = new sap.suite.ui.microchart.LineMicroChartPoint({

	x: "{/data/emp/point17XValue}",

	y: "{/data/emp/point17YValue}"

});

var point18 = new sap.suite.ui.microchart.LineMicroChartPoint({

	x: "{/data/emp/point18XValue}",

	y: "{/data/emp/point18YValue}"

});

var point19 = new sap.suite.ui.microchart.LineMicroChartPoint({

	x: "{/data/emp/point19XValue}",

	y: "{/data/emp/point19YValue}"

});

var point20 = new sap.suite.ui.microchart.LineMicroChartPoint({

	x: "{/data/emp/point20XValue}",

	y: "{/data/emp/point20YValue}"

});

var point21 = new sap.suite.ui.microchart.LineMicroChartPoint({

	x: "{/data/emp/point21XValue}",

	y: "{/data/emp/point21YValue}"

});

var point22 = new sap.suite.ui.microchart.LineMicroChartPoint({

	x: "{/data/emp/point22XValue}",

	y: "{/data/emp/point22YValue}"

});

var point23 = new sap.suite.ui.microchart.LineMicroChartPoint({

	x: "{/data/emp/point23XValue}",

	y: "{/data/emp/point23YValue}"

});

var point24 = new sap.suite.ui.microchart.LineMicroChartPoint({

	x: "{/data/emp/point24XValue}",

	y: "{/data/emp/point24YValue}"

});

var point25 = new sap.suite.ui.microchart.LineMicroChartPoint({

	x: "{/data/emp/point25XValue}",

	y: "{/data/emp/point25YValue}"

});

var point26 = new sap.suite.ui.microchart.LineMicroChartPoint({

	x: "{/data/emp/point26XValue}",

	y: "{/data/emp/point26YValue}"

});

var point27 = new sap.suite.ui.microchart.LineMicroChartPoint({

	x: "{/data/emp/point27XValue}",

	y: "{/data/emp/point27YValue}"

});

var point28 = new sap.suite.ui.microchart.LineMicroChartPoint({

	x: "{/data/emp/point28XValue}",

	y: "{/data/emp/point28YValue}"

});

var point29 = new sap.suite.ui.microchart.LineMicroChartPoint({

	x: "{/data/emp/point29XValue}",

	y: "{/data/emp/point29YValue}"

});

var point30 = new sap.suite.ui.microchart.LineMicroChartPoint({

	x: "{/data/emp/point30XValue}",

	y: "{/data/emp/point30YValue}"

});

var point31 = new sap.suite.ui.microchart.LineMicroChartPoint({

	x: "{/data/emp/point31XValue}",

	y: "{/data/emp/point31YValue}"

});



return new sap.m.GenericTile({

	header: '{/data/display_title_text}',

	subheader: '{/data/display_subtitle_text}',

	frameType: "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.LineMicroChart({

					threshold: "{/data/emp/threshold}",

					size: "Responsive", 

					showPoints: "{/data/emp/showPoints}",

					leftBottomLabel: "{/data/emp/leftBottomLabel}",

					rightBottomLabel: "{/data/emp/rightBottomLabel}",

					minXValue: "{/data/emp/minXValue}",

					maxXValue: "{/data/emp/maxXValue}",

					minYValue: "{/data/emp/minYValue}",

					maxYValue: "{/data/emp/maxYValue}",

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

					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

					]

				})

			]

		})

	],

	press: [oController.onPress, oController]

});

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





Once registered the tile is available in Fiori Launchpad Designer:



ZTILE_NUM_LINE_SRV OData Service created to feeds Numeric Content and Line Microchart Custom Tile with data

Below is ZTILE_NUM_LINE Entity Type of the service



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

ZTILES_NUM_LINE Entity Set is defined based on ZTILE_NUM_LINE Entity Type:



ZTILE_NUM_LINE_SRV OData Service has GetEntity (Read) operation implemented for ZTILES_NUM_LINE Entity Set:



Below is the implementation:

METHOD ztiles_num_line_get_entity.



  er_entity = zcl_tile_num_line=>get_entity( io_tech_request_context ).



ENDMETHOD.

Note: ZCL_TILE_NUM_LINE=>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_LINE=>GET_ENTITY_FLIGHT_OCC method is called



This is how ZCL_TILE_NUM_LINE=>GET_ENTITY_FLIGHT_OCC method is implemented:

METHOD get_entity_flight_occ.

FIELD-SYMBOLS: <field> TYPE any.



  rs_entity = VALUE #(

    icon             = 'sap-icon://waiver'

    number           = '76.0'

    numberDigits     = '5'

    numberFactor     = ''

    numberState      = c_error

    numberUnit       = '%'

    subtitle         = 'Aug 2017 - Jul 2018'

    title            = 'Fastest Jet Flight Occupancy'

    unit1            = '%'

    unit2            = '%'

    leftBottomLabel  = 'Aug 2017'

    rightBottomLabel = 'Jul 2018'

    showPoints       = ''

    colorAbove       = 'Good'

    colorBelow       = 'Error'

    threshold        = '80'

    minXValue        = 1

    maxXValue        = 12

    minYValue        = '65'

    maxYValue        = '81'

    point1YValue     = '81'

    point2YValue     = '80'

    point3YValue     = '79'

    point4YValue     = '75'

    point5YValue     = '65'

    point6YValue     = '70'

    point7YValue     = '81'

    point8YValue     = '80'

    point9YValue     = '79'

    point10YValue    = '75'

    point11YValue    = '65'

    point12YValue    = '70'     ).

*  Set default values for remaining data points

   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>.

     <field> = s1.

   ENDLOOP.



ENDMETHOD.

ZCL_TILE_NUM_LINE class source code can be downloaded from here

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



In fifth part of my blog I will demonstrate how to reveal some more analytical insight with 2×1 Custom Fiori Tile visualizing trend and compare it with variable target ( plan / budget / prior period ) using Area Microchart.