Skip to content

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 No
KPIItems KPIItem No
Styles object No
Visible boolean No true
_Name string No
_Type const Yes

DataSubscriptions

Array of data change events to subscribe to.


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

BackgroundColor

The string value is a style class name for BackgroundColor.

Icon

The string value is a style class name of Icon in KPIItems.


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.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;
}