• RSS Feed

  

STB Online Trial Guide

This article has not been written.

Table of Contents
  1. 1.Trial Account
  2. 2.Trial Validity
  3. 3.Accessing Stelo Tile Builder
  4. 3.Stelo Tile Builder Overview
  5. Dynamic tile properties
  6. Dynamic tile examples
    1. 1 KPI Indicator
    2. 2 Bullet Microchart
    3. 3 Column Microchart
    4. 4 Comparison Microchart
    5. 5 Radial Microchart
    6. 6 Harvey Ball Microchart
  7. Download Solution Brief

1.Trial Account

The trial account provides trial access to Fiori launchpad designer to get hands on experience in creating a dynamic tile using Stelo Tile Builder(STB) framework. Mock data is made available via Stelo framework to the trial users using prebuilt ABAP functions. For further information on Stelo tile builder refer to STB wiki.

2.Trial Validity

Trial account are valid for 30 days from the date of request. On expiry, trial accounts will be terminated and rolled back. If you would like to request extension, please email support@arch-global.com before account expiry.

3.Accessing Stelo Tile Builder

  1. Login to Fiori Launchpad Designer
    • Demo URL: ref03.arch.co.uk:8003/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html?sap-client=800&sap-language=EN
    • Login using user credentials that was shared via email
  2. Select App Sandbox <number> [If you are user CB_0003, Select App Sandbox 3, and if you are user CB_0018, Select App Sandbox 8]
  3. Click on 'Add tile'
  4. Select 'Tile Builder 2.0' - A new tile will be added to the launchpad designer and Configure 'Tile Builder 2.0' should be launched

     

 

3.Stelo Tile Builder Overview

Stelo tile builder helps users to design, configure and also visualize a dynamic tile as its being built using the tile preview panel. The key advantage of using STB framework is quick backend data integration that can be easily achieved without any Gateway service development overhead. The logic to retrieve backend data is defined using ABAP functions and the framework facilitates the communication between the tile and the function module via prebuilt Gateway interface.

The designer is grouped into the following sections

  1. Tile Configuration
    1. Tile properties - Tile properties section helps to configure basic properties such as title, subtitle, etc., can either be static text or dynamic based on the data from the ABAP backend
    2. Tile specific configuration - Tile type such microchart, image, and other binding related configuration is done in this section along with the backend service selection. 
  2. Tile Fragment
    1. Code view - The code required to render the tile along with the binding is dynamically generated by the STB framework
    2. Data preview - The preview panel provides an insight to the data fetched from the backend. This is in JSON format, and greatly helps to bind the relevant properties to the tile based on its type.
  3. Navigation properties
    1. Usage of semantic object, action and other parameters can be defined in this section

 

Dynamic tile properties

 

Property Description

Property

Description

icon

Enter an sap-icon:// URL, for example sap-icon://cart. You can look up the

names of the available icons in tile configuration.

For more information, see Static App Launcher Tiles.

 

info

Text to be displayed at the bottom of the tile.

infoState

 

The color of the tile is adapted according to the value of this property. The

precise color depends on the theme that you have selected in UI theme

designer.

Allowed values: Negative, Neutral, Positive, Critical

number

Number to be displayed in the top right corner of the tile.

numberDigits

Number of digits to be displayed following the decimal separator (decimal

point or decimal comma, depending on the language settings).

numberFactor

A factor for scaling numbers, for example, for displaying large numbers like

1.000.000 (-> number = 1 and numberFactor=“M”) or for percentages

(number = 22.2 and numberFactor = “%”).

numberState

 

The color of the number is adapted according to the value of this property.

The precise color depends on the theme that you have selected in UI theme

designer. Allowed values: Negative, Neutral, Positive, Critical

numberUnit

Unit to be displayed below the number, for example, USD.

stateArrow

 

Displays an arrow indicating a trend.Allowed values: None, Up, Down

subtitle

Subtitle to be displayed below the tile title.

title

Title to be displayed in the tile.

 

 

Dynamic tile examples

1 KPI Indicator

Function Module Code:

During design time, the tile properties are bound to the ex_tileinfo structure as shown in the code block below. 

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:

ex_tileinfo-icon = 'sap-icon://travel-expense'.
ex_tileinfo-info = 'Stelo Tile Builder'.
ex_tileinfo-infostate = 'Critical'.
ex_tileinfo-number = '84.33'.
ex_tileinfo-numberdigits = '1'.
ex_tileinfo-numberfactor = 'k'.
ex_tileinfo-numberstate = 'Positive'.
ex_tileinfo-numberunit = 'GBP'.
ex_tileinfo-statearrow = 'Down'.
ex_tileinfo-subtitle = 'This quarter'.
ex_tileinfo-title = 'Cost Overview'.

  1. Select Tile type as KPI Indicator
  2. Binding type: Dynamic
  3. Backend Service: Z_TILE_CHART_SAMPLE
  4. Click on the "Refresh" button to fetch the sample data from the backend function. The Data preview panel should display the JSON payload fetched from the backend via STB Gateway service. This should aid in performing data binding to other tile properties such as Scale, value etc.,
  5. And do the binding as shown in the screenshot below
  6. You should be able to preview the tile as it takes shape by using the live preview on the top right corner


2 Bullet Microchart

Function Module Code:

During design time, the tile properties are bound to the ex_response as shown in the screenshot below. Based on the code snippet, an internal table is built in the based on ls_bullet structure. The table is then converted to JSON in the backend before being made available through the ex_response variable.

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:

ls_bullet-targetvalue = '150'.
ls_bullet-forecastvalue = '120'.
ls_bullet-actualvalue = '80'.
ls_bullet-color = 'Good'.

ls_col_data-value = '0'.
ls_col_data-color = 'Neutral'.
APPEND ls_col_data TO ls_bullet-thresholds.
...
ls_col_data-value = '200'.
ls_col_data-color = 'Neutral'.
APPEND ls_col_data TO ls_bullet-thresholds.

lv_json = /ui2/cl_json=>serialize( data = ls_bullet compress = abap_true ).
ex_response = lv_json.

  1. Select Tile type as Microchart - Bullet
  2. Binding type: Dynamic
  3. Backend Service: Z_TILE_CHART_SAMPLE
  4. Request Input: bullet
  5. Click on the "Refresh" button to fetch the sample data from the backend function. The Data preview panel should display the JSON payload fetched from the backend via STB Gateway service. This should aid in performing data binding to other tile properties such as Scale, value etc.,
  6. And do the binding as shown in the screenshot below based on the binding properties defined in ls_bullet structure
  7. You should be able to preview the tile as it takes shape by using the live preview on the top right corner


3 Column Microchart

Function Module Code:

During design time, the tile properties are bound to the ex_response as shown in the screenshot below. Based on the code snippet, an internal table is built in the based on ls_column structure. The table is then converted to JSON in the backend before being made available through the ex_response variable.

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:

ls_column-topleft = '20'.
ls_column-topright = '120'.
ls_column-bottomleft = 'Jan'.
ls_column-bottomright = 'June'.
ls_col_data-value = '20'.
ls_col_data-color = 'Error'.
APPEND ls_col_data TO ls_column-data.
ls_col_data-value = '50'.
ls_col_data-color = 'Neutral'.
APPEND ls_col_data TO ls_column-data.
...
lv_json = /ui2/cl_json=>serialize( data = ls_column compress = abap_true ).
ex_response = lv_json.

  1. Select Tile type as Microchart - Column
  2. Binding type: Dynamic
  3. Backend Service: Z_TILE_CHART_SAMPLE
  4. Request Input: column
  5. Click on the "Refresh" button to fetch the sample data from the backend function. The Data preview panel should display the JSON payload fetched from the backend via STB Gateway service. This should aid in performing data binding to other tile properties such as Scale, value etc.,
  6. And do the binding as shown in the screenshot below based on the binding properties defined in ls_column structure
  7. You should be able to preview the tile as it takes shape by using the live preview on the top right corner


4 Comparison Microchart

Function Module Code:

During design time, the tile properties are bound to the ex_response as shown in the screenshot below. Based on the code snippet, an internal table is built in the based on ls_comparison structure. The table is then converted to JSON in the backend before being made available through the ex_response variable.

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:

ls_comparison-title = 'Region 1'.
ls_comparison-value = '137'.
ls_comparison-color = 'Good'.
APPEND ls_comparison TO lt_comparison.

ls_comparison-title = 'Region 2'.
ls_comparison-value = '72'.
ls_comparison-color = 'Error'.
APPEND ls_comparison TO lt_comparison.

ls_comparison-title = 'Region 3'.
ls_comparison-value = '156'.
ls_comparison-color = 'Critical'.
APPEND ls_comparison TO lt_comparison.

lv_json = /ui2/cl_json=>serialize( data = lt_comparison compress = abap_true ).
ex_response = lv_json.

  1. Select Tile type as Microchart - Comparison
  2. Binding type: Dynamic
  3. Backend Service: Z_TILE_CHART_SAMPLE
  4. Request Input: comparison
  5. Click on the "Refresh" button to fetch the sample data from the backend function. The Data preview panel should display the JSON payload fetched from the backend via STB Gateway service. This should aid in performing data binding to other tile properties such as Scale, value etc.,
  6. And do the binding as shown in the screenshot below based on the binding properties defined in ls_comparison structure
  7. You should be able to preview the tile as it takes shape by using the live preview on the top right corner


5 Radial Microchart

Function Module Code:

During design time, the tile properties are bound to the ex_response as shown in the screenshot below. Based on the code snippet, an internal table is built in the based on ls_radial structure. The table is then converted to JSON in the backend before being made available through the ex_response variable.

1:
2:
3:
4:
5:
6:

ex_tileinfo-icon = 'sap-icon://travel-expense'.
ls_radial-percentage = '36'.
ls_radial-valuecolor = 'Good'.

lv_json = /ui2/cl_json=>serialize( data = ls_radial compress = abap_true ).
ex_response = lv_json.

  1. Select Tile type as Microchart - Radial
  2. Binding type: Dynamic
  3. Backend Service: Z_TILE_CHART_SAMPLE
  4. Request Input: radial
  5. Click on the "Refresh" button to fetch the sample data from the backend function. The Data preview panel should display the JSON payload fetched from the backend via STB Gateway service. This should aid in performing data binding to other tile properties such as Scale, value etc.,
  6. And do the binding as shown in the screenshot below based on the binding properties defined in ls_radial structure
  7. You should be able to preview the tile as it takes shape by using the live preview on the top right corner


6 Harvey Ball Microchart

Function Module Code:

During design time, the tile properties are bound to the ex_response as shown in the screenshot below. Based on the code snippet, an internal table is built in the based on ls_ball structure. The table is then converted to JSON in the backend before being made available through the ex_response variable.

1:
2:
3:
4:
5:
6:
7:
8:

ls_ball-total = '100'.
ls_ball-totalscale = ''.
ls_ball-fraction = '24'.
ls_ball-unit = '%'.
ls_ball-color = 'Error'.

lv_json = /ui2/cl_json=>serialize( data = ls_ball compress = abap_true ).
ex_response = lv_json.

  1. Select Tile type as Microchart - Harvey Ball
  2. Binding type: Dynamic
  3. Backend Service: Z_TILE_CHART_SAMPLE
  4. Request Input: ball
  5. Click on the "Refresh" button to fetch the sample data from the backend function. The Data preview panel should display the JSON payload fetched from the backend via STB Gateway service. This should aid in performing data binding to other tile properties such as Scale, value etc.,
  6. And do the binding as shown in the screenshot below based on the binding properties defined in ls_ball structure
  7. You should be able to preview the tile as it takes shape by using the live preview on the top right corner

Download Solution Brief

Stelo-Tile-Builder.pdf

 

Last modified on 6/22/2020 3:05 PM - Copyright Arch 2022.