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.

When assigning a rule to a property of KPIHeader, the rule will be passed an instance of the following proxy class as an argument:

SectionProxy

KPIHeader Properties¶

Property	Type	Required	Default
DataSubscriptions	DataSubscriptions	No
KPIHeader	`object`	No
Visible	`boolean`	No	`true`
_Name	`string`	No
_Type	`const`	Yes

DataSubscriptions¶

Array of data change events to subscribe to.

type: DataSubscriptions

KPIHeader¶

type: object with following properties.

Property	Type	Required	Default
`KPIItems`	array	No
`Styles`	object	No

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:

KPIItem

Styles¶

type: object with following properties.

Property	Type	Required
TintColor	string	No
BackgroundColor	string	No
Icon	string	No

TintColor¶

Change the color of the KPI items.

For Android: Use color in the stylesheet to color KPIView and KPIProgressView.

For iOS: If the KPIView is disabled (i.e. those without an OnPress property), use tint-color-disabled; If the KPIView is enabled, use tint-color. If the KPIProgressView is disabled, use tint-color-disabled; If the KPIProgressView is enabled, use color to style MetricItems and CaptionLabel. Use progress-tint-color to style the progress indicator when KPIProgressView is enabled; This will also override the styling specified in tint-color-disabled for the progress indicator when KPIProgressView is disabled.

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 of Icon in KPIItems.

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:

"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"
                    }
                }
            }
        ]   
    }
  ]
}

/* 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;
}