KPIHeader¶
KPIHeader is a container that manages and displays the different Key Performance Indicators (KPI)
A page can have one or more KPIHeader section. On IOS we currently have a limitation where we support only one KPI Header.
KPIHeader Properties¶
Property | Type | Required | Default |
---|---|---|---|
DataSubscriptions | DataSubscriptions | Optional | |
KPIHeader | object |
Optional | |
Visible | boolean |
Optional | true |
_Name | string |
Optional | |
_Type | const |
Required |
DataSubscriptions¶
Array of data change events to subscribe to.
- type: DataSubscriptions
KPIHeader¶
- type:
object
with following properties.
Property | Type | Required | Default |
---|---|---|---|
KPIItems |
array | Optional | |
Styles |
object | Optional |
KPIItems¶
In case of iOS, a maximum of four KPI items can be displayed in the header. In case of Android,there is no such limitation.
When both KPIView and KPIProgressView items are provided, the items are sorted such that the KPIProgressViews are displayed first, followed by the KPIViews.
All array items must be of the type:
Styles¶
- type:
object
with following properties.
Property | Type | Required | Default |
---|---|---|---|
TintColor | string |
Optional | |
BackgroundColor | string |
Optional | |
Icon | string |
Optional |
TintColor¶
Change color of the KPI items. For Android: in Stylesheet use color
property to color both KPIView and KPIProgressView. For iOS: for KPIView if the it is enabled i.e do not have onpress event use tint-color
else use tint-color-disabled
, 'colorfor both of KPI metric items and captionlabel in KPIProgressView,
progress-tint-color` for progress indicator in KPIProgressView.
- TintColor style class
BackgroundColor¶
The string value is a style class name for BackgroundColor.
- Background style class
Icon¶
The string value is a style class name for Icon
in KPIItems. It is applicable only for SAP icon and font icon types (Supported CSS properties are font-size and color).
- Image style class
Visible¶
Set the visibility of this control.
- type:
boolean
- default:
true
_Name¶
- type:
string
_Type¶
- type:
const
The value of this property must be equal to:
"Section.Type.KPIHeader"
Example¶
Static¶
{
"_Type": "Page",
"_Name": "KPIHeaderPage",
"Caption": "KPI header Page",
"Controls": [
{
"_Type": "Control.Type.SectionedTable",
"_Name": "SectionedTable",
"Sections": [
{
"_Type": "Section.Type.KPIHeader",
"Visible": true,
"KPIHeader": {
"KPIItems": [
{
"CaptionLabel": "20 minutes ago",
"MetricItems": [
{
"LeadingUnit": "",
"Value": "104",
"TrailingUnit": "°F"
}
]
},
{
"MetricItems": [
{
"Value": "6",
"TrailingUnit": "h"
},
{
"Value": "59",
"TrailingUnit": "m"
}
],
"CaptionLabel": "Working Hours"
},
{
"MetricItems": [
{
"LeadingUnit": "",
"Value": "54",
"TrailingUnit": "%"
}
],
"CaptionLabel": "Completed",
"ShowProgress": true,
"Progress": 0.7
},
{
"Icon": "/MDKDevApp/Images/document.png",
"MetricItems": [
{
"Value": "2"
}
],
"CaptionLabel": "Documents"
}
],
"Styles":{
"TintColor":"KPIHeaderTintColor",
"BackgroundColor":"KPIHeaderBackgroundColor"
}
}
}
]
}
]
}
Dynamic¶
{
"_Type": "Page",
"_Name": "KPIHeaderPage",
"Caption": "KPI header Page",
"Controls": [
{
"_Type": "Control.Type.SectionedTable",
"_Name": "SectionedTable",
"Sections": [
{
"_Type": "Section.Type.KPIHeader",
"Visible": true,
"KPIHeader": {
"KPIItems": [
{
"CaptionLabel": "{KPILabel}",
"MetricItems": [
{
"LeadingUnit": "{LeadingUnit}",
"Value": "{Value}",
"TrailingUnit": "{TrailingUnit}"
}
],
"Target": {
"EntitySet": "MyKPIHeader",
"Service": "/MDKDevApp/Services/KPI.service",
}
}
]
}
}
]
}
]
}
{
"_Type": "Page",
"_Name": "KPIHeaderPage",
"Caption": "KPI header Page",
"Controls": [
{
"_Type": "Control.Type.SectionedTable",
"_Name": "SectionedTable",
"Sections": [
{
"_Type": "Section.Type.KPIHeader",
"Visible": true,
"KPIItems": [
{
"CaptionLabel": "{KPILabel}",
"MetricItems": [
{
"LeadingUnit": "{LeadingUnit}",
"Value": "{HourValue}",
"TrailingUnit": "{TrailingUnit}"
}
],
"Target": "/MdkApp/Rules/AFunctionThatWillReturnAnArrayOfData.js"
}
]
}
]
}
]
}
KPIHeader with font icon and styles¶
{
"_Type": "Page",
"_Name": "KPIHeaderPage",
"Caption": "KPI header Page",
"Controls": [
{
"_Type": "Control.Type.SectionedTable",
"_Name": "SectionedTable",
"Sections": [
{
"_Type": "Section.Type.KPIHeader",
"Visible": true,
"KPIHeader": {
"KPIItems": [
{
"Icon": "sap-icon://arrow-top",
"MetricItems": [
{
"Value": "2"
}
],
"CaptionLabel": "Documents"
}
],
"Styles":{
"TintColor":"KPIHeaderTintColor",
"BackgroundColor":"KPIHeaderBackgroundColor",
"Icon": "font-icon-class"
}
}
}
]
}
]
}
Style Classes Definition¶
/* KPIHeader - TintColor */
/* tint-color for KPIView, color for KPIProgressView */
.KPIHeaderTintColor {
tint-color: @mdkBlue1;
color: @mdkBlue1;
}
/* KPIHeader - BackgroundColor */
.KPIHeaderBackgroundColor {
background-color: #6002ee;
}
.font-icon-class {
font-size: 8;
color: red;
}