KPISection

KPISection is a container that manages and displays the different Key Performance Indicators (KPI)

A page can have one or more KPISection sections.

KPISection Properties

Property	Type	Required	Default
DataSubscriptions	DataSubscriptions	Optional
KPIItems	KPIItem	Optional
Styles	object	Optional
Visible	boolean	Optional	true
_Name	string	Optional
_Type	const	Required

---

DataSubscriptions

Array of data change events to subscribe to.

• type: DataSubscriptions

---

KPIItems

In case of iOS, a maximum of four KPI items can be displayed. 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.

• type: KPIItem[]

All array items must be of the type: KPIItem

---

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

----

Example

Static

{
  "_Type": "Page",
  "_Name": "KPISectionPage",
  "Caption": "KPI section Page",
  "Controls": [
    {
      "_Type": "Control.Type.SectionedTable",
      "_Name": "SectionedTable",
      "Sections": [
        {
          "_Type": "Section.Type.KPISection",
          "Visible": true,
          "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":"KPISectionTintColor",
              "BackgroundColor":"KPISectionBackgroundColor"
          }
        }
      ] 
    }
  ]
}

Dynamic

{
  "_Type": "Page",
  "_Name": "KPISectionPage",
  "Caption": "KPI section Page",
  "Controls": [
    {
      "_Type": "Control.Type.SectionedTable",
      "_Name": "SectionedTable",
      "Sections": [
      {
          "_Type": "Section.Type.KPISection",
          "Visible": true,
          "KPIItems": [
            {
              "CaptionLabel": "{KPILabel}",
              "MetricItems": [
                {
                  "LeadingUnit": "{LeadingUnit}",
                  "Value": "{Value}",
                  "TrailingUnit": "{TrailingUnit}"
                }
              ],
              "Target": {
                "EntitySet": "MyKPISection",
                "Service": "/MDKDevApp/Services/KPI.service"
              }
            }
          ]
        }
      ]
    }
  ]
}

KPISection with font icon and styles

{
  "_Type": "Page",
  "_Name": "KPISectionPage",
  "Caption": "KPI section Page",
  "Controls": [
    {
        "_Type": "Control.Type.SectionedTable",
        "_Name": "SectionedTable",
        "Sections": [
            {
                "_Type": "Section.Type.KPISection",
                "Visible": true,
                "KPIItems": [
                      {
                          "Icon": "sap-icon://arrow-top",
                          "MetricItems": [
                              {
                                  "Value": "2"
                              }
                          ],
                          "CaptionLabel": "Documents"
                      }
                  ],
                  "Styles":{
                      "TintColor":"KPISectionTintColor",
                      "BackgroundColor":"KPISectionBackgroundColor",
                      "Icon": "font-icon-class"
                  }
            }
        ]   
    }
  ]
}

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

/* KPISection - BackgroundColor */
.KPISectionBackgroundColor {
  background-color: #6002ee;
}

.font-icon-class {
  font-size: 8;
  color: red;
}