Skip to content

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.


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

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.

BackgroundColor

The string value is a style class name for BackgroundColor.


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

Style Classes Definition

/* KPIHeader - TintColor */
/* tint-color for KPIView, color for KPIProgressView */
.KPIHeaderTintColor {
  tint-color: @mdkBlue1; 
  color: @mdkBlue1;
}

/* KPIHeader - BackgroundColor */
.KPIHeaderBackgroundColor {
  background-color: #6002ee;
}

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

            }
        ]   
    }
  ]
}