Skip to content

ObjectHeader

This is a container to display information about the header of an object. You can include an Object header extension cell item to display a custom extension in the Object Header container. You can add only one Object header as the first section in a table.

ObjectHeader Properties

Property Type Required Default
DataSubscriptions DataSubscriptions Optional
ObjectHeader object Optional
Visible boolean Optional true
_Name string Optional
_Type const Required

DataSubscriptions

Array of data change events to subscribe to.


ObjectHeader

  • type: object with following properties.
Property Type Required Default
BodyText string Optional
Description string Optional
DetailContentContainer DetailContentContainer Optional
DetailImage Image Optional
DetailImageIsCircular boolean Optional
Footnote string Optional
HeadlineText string Optional
StatusImage Image Optional
StatusText string Optional
Subhead string Optional
SubstatusImage Image Optional
SubstatusText string Optional
Tags complex Optional
AnalyticView object Optional
Target Target Optional
Styles object Optional

BodyText

A body label in the additional info view.

Description

A description label displayed in the description view.

DetailContentContainer

Can only contains one extension. Can't co-exist with AnalyticView.

DetailImage

An image with size of 45px x 45px in compact mode or 70px x 70px in regular mode for detail image view

DetailImageIsCircular

If the value is True, the image is displayed in a circular shape.

Footnote

A footnote label in the additional info view.

HeadlineText

A headline label in the object name and title view.

StatusImage

A status image displayed in the status view. It’s expected to either set StatusText or StatusImage to display either one as the same position. When both are set, StatusImage would be displayed in priority.

StatusText

A status label displayed in the status view. It’s expected to either set StatusText or StatusImage to display either one as the same position. When both are set, StatusImage would be displayed in priority.

Subhead

A sub-headline label in the object name and title view.

SubstatusImage

A substatus image displayed below status view. It’s expected to either set SubStatusText or SubStatusImage to display either one as the same position. When both are set, SubStatusImage would be displayed in priority.

SubstatusText

A substatus label displayed below status view. It’s expected to either set SubStatusText or SubStatusImage to display either one as the same position. When both are set, SubStatusImage would be displayed in priority.

Tags

A list of tag labels to be shown below the Subhead. No more than three tags will be displayed. Can be a single string or an array of strings.

AnalyticView

An analytic content view containing either a Chart or a KPI. Can't co-exist with DetailContentContainer.

  • type: object with following properties.
Property Type Required Default
_Type string Optional
Chart ObjectHeaderChart Optional
KPI ObjectHeaderKPI Optional
Target Target Optional
OnPress ActionOrRule Optional

_Type

The value of this property must be equal to one of the known values below.

Value
Chart
KPI

Chart

Use only when _Type is Chart.

KPI

Use only when _Type is KPI.

Target

Only the first record of any entity set returned by the target will be used.

OnPress

Required to navigate to a full screen chart when the Analytic View is pressed.

Target

Only the first record of any entity set returned by the target will be used.

Styles

An object of style class names to be applied on the object header properties.

  • type: object with following properties.
Property Type Required Default
ObjectHeader string Optional
BodyText string Optional
Description string Optional
Footnote string Optional
HeadlineText string Optional
StatusText string Optional
Subhead string Optional
SubstatusText string Optional
DetailImage string Optional
StatusImage string Optional
SubstatusImage string Optional
KPITintColor string Optional
KPICaption string Optional
ChartTitle string Optional
ChartSubTitle string Optional
ChartTrendTitle string Optional
ChartTrendImage string Optional
ChartKPIUnit string Optional
ChartKPIValue string Optional
ChartKPIIcon string Optional

ObjectHeader

The string value is a style class name for ObjectHeader.

BodyText

The string value is a style class name for BodyText.

Description

The string value is a style class name for Description.

Footnote

The string value is a style class name for Footnote.

HeadlineText

The string value is a style class name for HeadlineText.

StatusText

The string value is a style class name for StatusText.

Subhead

The string value is a style class name for Subhead.

SubstatusText

The string value is a style class name for SubstatusText.

DetailImage

The string value is a style class name for DetailImage. It is applicable only to SAP icon or font icon types (Supported CSS properties are font-size and color).

StatusImage

The string value is a style class name for StatusImage. It is applicable only to SAP icon or font icon types (Supported CSS properties are font-size and color).

SubstatusImage

The string value is a style class name for SubstatusImage. It is applicable only to SAP icon or font icon types (Supported CSS properties are font-size and color).

KPITintColor

The string value is a style class name for configuring the tint color of the KPI in Object Header.

KPICaption

The string value is a style class name for configuring the font-size, color and font-style of the KPI Caption Label.

ChartTitle

The string value is a style class name for Chart Title. This is supported only for iOS, not for Android.

ChartSubTitle

The string value is a style class name for Chart SubTitle. This is supported only for iOS, not for Android.

ChartTrendTitle

The string value is a style class name for Chart Trend Title. This is supported only for iOS, not for Android.

ChartTrendImage

The string value is a style class name for Chart Trend Image. This is supported only for iOS, not for Android.

ChartKPIUnit

The string value is a style class name for KPI Unit items inside Chart. This is supported only for iOS, not for Android.

ChartKPIValue

The string value is a style class name for KPI Value items inside Chart. This is supported only for iOS, not for Android.

ChartKPIIcon

The string value is a style class name for KPI icon inside Chart. This is supported only for iOS, not for Android.


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

Examples

{
  "_Type": "Page",
  "_Name": "SectionedTablePage",
  "Caption": "Object Table Section Page",
  "Controls": [
    {
      "Sections": [
        {
          "_Type": "Section.Type.ObjectHeader",
          "ObjectHeader": {
            "BodyText": "1000-Hamburg, MECHANIK. This is a body label, which its text can not be wrapped",
            "Description": "Temperature sensor predicts overheating failure in 4 days Urgent and needs attentions.  Temperature sensor predicts overheating failure in 4 days Urgent and needs attentions.",
            "DetailImage": "res://TestPNG.png",
            "DetailImageIsCircular": false,
            "Footnote": "Due on 12/31/16. This is a footnote label, which its text can not be wrapped",
            "HeadlineText": "Inspect Electric Pump Motor Long Job Title Example Will Wrap Max# of Lines in the HeadlineLabel",
            "StatusImage": "/MDKDevApp/Images/icon_severity_medium.png",
            "Subhead": "Job 819701. This is a subheadline label, which its text can not be wrapped",
            "SubstatusText": "Medium",
            "Tags": [
              "Started",
              "PM01",
              "103-Repair",
              "The Fourth one"
            ],
            "Styles": {
              "ObjectHeader": "objectHeaderBackground",
              "BodyText": "objectHeaderBody",
              "Description": "objectHeaderDescription",
              "Footnote": "objectHeaderFootnote",
              "HeadlineText": "objectHeaderHeadeline",
              "StatusText": "objectHeaderStatus",
              "Subhead": "objectHeaderSubhead",
              "SubstatusText": "objectHeaderSubstatus"
            }
          }
        }
      ]
    }
  ]
}

Static Object Header with KPI

{
  "Caption": "Static Object Header with KPI",
  "Controls": [
    {
      "Sections": [
        {
          "ObjectHeader": {
            "BodyText": "BodyText",
            "Description": "Description",
            "DetailImage": "/MDKDevApp/Images/objectheader.png",
            "DetailImageIsCircular": true,
            "Footnote": "Footnote",
            "HeadlineText": "HeadlineText",
            "StatusText": "High",
            "StatusImage": "res://n_icon.png",
            "Subhead": "Subhead",
            "SubstatusImage": "res://test_png.png",
            "SubstatusText": "Error",
            "Tags": "Tags",
            "AnalyticView": {
              "_Type": "KPI",
              "KPI": {
                "CaptionLabel": "20 minutes ago",
                "MetricItems": [
                    {
                        "LeadingUnit": "Temp",
                        "Value": "104",
                        "TrailingUnit": "°F"
                    }
                ]
              },
              "OnPress": "/MDKDevApp/Actions/Messages/Message.action"
            }
          },
          "_Type": "Section.Type.ObjectHeader"
        }
      ],
      "_Name": "ObjectHeaderSection",
      "_Type": "Control.Type.SectionedTable"
    }
  ],
  "_Type": "Page",
  "_Name": "StaticObjectHeaderWithKPI"
}

Dynamic Object Header with KPI

{
    "Caption": "Object Header with Dynamic KPI",
    "Controls": [
      {
        "Sections": [
          {
            "ObjectHeader": {
                "BodyText": "{OrderId}",
                "Description": "{OrderDescription}",
                "DetailImage": "{DetailImage}",
                "DetailImageIsCircular": true,
                "Footnote": "{OrderId}",
                "HeadlineText": "{OrderDescription}",
                "StatusText": "High",
                "StatusImage": "res://n_icon.png",
                "Subhead": "{OrderId}",
                "SubstatusImage": "res://test_png.png",
                "SubstatusText": "Error",
                "Tags": [
                  "Tag1",
                  "Tag2",
                  "Tag3",
                  "Tag4"
                ],
                "Target": {
                  "EntitySet": "MyWorkOrderHeaders",
                  "Service": "/MDKDevApp/Services/Amw.service",
                  "QueryOptions": "$top=1"
                },
                "AnalyticView": {
                    "_Type": "KPI",
                    "KPI": {
                        "CaptionLabel": "20 minutes ago",
                        "MetricItems": [
                            {
                                "LeadingUnit": "",
                                "Value": "{CategorySales}",
                                "TrailingUnit": " sales"
                            }
                        ]
                    },
                    "OnPress": "/MDKDevApp/Actions/Messages/Message.action",
                    "Target": "/MDKDevApp/Rules/ReadServiceForKPIHeader.js"
                }
            },
            "_Type": "Section.Type.ObjectHeader"
          }
        ],
        "_Name": "ObjectHeaderSection",
        "_Type": "Control.Type.SectionedTable"
      }
    ],
    "_Type": "Page",
    "_Name": "DynamicObjectHeaderWithKPI"
  }

Static Object Header with Chart

{
  "Caption": "Static Object Header with Chart",
  "Controls": [
    {
      "Sections": [
        {
          "ObjectHeader": {
            "BodyText": "BodyText",
            "Description": "Description",
            "DetailImage": "/MDKDevApp/Images/objectheader.png",
            "DetailImageIsCircular": true,
            "Footnote": "Footnote",
            "HeadlineText": "HeadlineText",
            "StatusText": "High",
            "StatusImage": "res://n_icon.png",
            "Subhead": "Subhead",
            "SubstatusImage": "res://test_png.png",
            "SubstatusText": "Error",
            "Tags": "Tags",
            "AnalyticView": {
                "_Type": "Chart",
                "Chart": {
                    "Title": "Annual Sales",
                    "Subtitle": "For 2017-18",
                    "TrendTitle": "+ 20%",
                    "TrendColor": "#FF0000",
                    "TrendImage": "/MDKDevApp/Images/objectheader.png",
                    "KPI": {
                        "MetricItems": [
                                {
                                    "LeadingUnit": "Temp",
                                    "Value": "104",
                                    "TrailingUnit": "°F"
                                }
                            ],
                        "Icon": "/MDKDevApp/Images/document.png"
                    },
                    "ChartView": {
                        "ChartType": "Line",
                        "SeriesColor": ["#FF0000","#0000FF"],
                        "Data": [
                          [
                              100,
                              200,
                              300
                          ],
                          [
                              100,
                              150,
                              500
                          ]
                        ],
                        "CategoryTitles": [
                            "Jan",
                            "Feb",
                            "March"
                        ]
                    }
                },
              "OnPress": "/MDKDevApp/Actions/Messages/Message.action"
            }
          },
          "_Type": "Section.Type.ObjectHeader"
        }
      ],
      "_Name": "ObjectHeaderSection",
      "_Type": "Control.Type.SectionedTable"
    }
  ],
  "_Type": "Page",
  "_Name": "StaticObjectHeaderWithChart"
}

Dynamic Object Header with Chart

{
    "Caption": "Dynamic Object Header with Chart",
    "Controls": [
      {
        "Sections": [
          {
            "ObjectHeader": {
                "BodyText": "{OrderId}",
                "Description": "{OrderDescription}",
                "DetailImage": "{DetailImage}",
                "DetailImageIsCircular": true,
                "Footnote": "{OrderId}",
                "HeadlineText": "{OrderDescription}",
                "StatusText": "High",
                "StatusImage": "res://n_icon.png",
                "Subhead": "{OrderId}",
                "SubstatusImage": "res://test_png.png",
                "SubstatusText": "Error",
                "Tags": [
                  "Tag1",
                  "Tag2",
                  "Tag3",
                  "Tag4"
                ],
                "Target": {
                  "EntitySet": "MyWorkOrderHeaders",
                  "Service": "/MDKDevApp/Services/Amw.service",
                  "QueryOptions": "$top=1"
                },
                "AnalyticView": {
                    "_Type": "Chart",
                    "Chart": {
                        "Title": "Annual Sales",
                        "Subtitle": "For 2017-18",
                        "TrendTitle": "+ 20%",
                        "TrendColor": "#FF0000",
                        "TrendImage": "/MDKDevApp/Images/objectheader.png",
                        "KPI": {
                            "MetricItems": [
                                    {
                                        "LeadingUnit": "Temp",
                                        "Value": "104",
                                        "TrailingUnit": "°F"
                                    }
                                ],
                            "Icon": "/MDKDevApp/Images/document.png"
                        },
                        "ChartView": {
                            "ChartType": "Line",
                            "SeriesColor": ["#FF0000","#0000FF"],
                            "Data": "{CategorySales}",
                            "CategoryTitles": "{CategoryName}"
                        }
                    },
                    "OnPress": "/MDKDevApp/Actions/Messages/Message.action",
                    "Target": "/MDKDevApp/Rules/ReadServiceForChartCard.js"
                }
            },
            "_Type": "Section.Type.ObjectHeader"
          }
        ],
        "_Name": "ObjectHeaderSection",
        "_Type": "Control.Type.SectionedTable"
      }
    ],
    "_Type": "Page",
    "_Name": "DynamicObjectHeaderWithChart"
  }

Object Header with Styled KPI

{
    "Caption": "Object Header With Styled KPI",
    "Controls": [
      {
        "Sections": [
          {
            "ObjectHeader": {
              "BodyText": "BodyText",
              "Description": "Description",
              "DetailImage": "/MDKDevApp/Images/objectheader.png",
              "DetailImageIsCircular": true,
              "Footnote": "Footnote",
              "HeadlineText": "HeadlineText",
              "StatusText": "High",
              "StatusImage": "res://n_icon.png",
              "Subhead": "Subhead",
              "SubstatusImage": "res://test_png.png",
              "SubstatusText": "Error",
              "Tags": "Tags",
              "AnalyticView": {
                "_Type": "KPI",
                "KPI":  {
                  "MetricItems": [
                      {
                          "Value": "6",
                          "TrailingUnit": "h"
                      },
                      {
                          "Value": "59",   
                          "TrailingUnit": "m"   
                      },
                      {
                          "Value": "35",
                          "TrailingUnit": "s"
                      }
                  ],
                  "CaptionLabel": "Working Hours"
                },
                "OnPress": "/MDKDevApp/Actions/Messages/Message.action"
              },
              "Styles": {
                "ObjectHeader": "ObjectHeaderBackground",
                "BodyText": "ObjectHeaderBody",
                "Description": "ObjectHeaderDescription",
                "Footnote": "ObjectHeaderFootnote",
                "HeadlineText": "ObjectHeaderHeadeline",
                "StatusText": "ObjectHeaderStatus",
                "Subhead": "ObjectHeaderSubhead",
                "SubstatusText": "ObjectHeaderSubstatus",
                "KPITintColor": "ObjectHeaderKPITintColor",
                "KPICaptionStyle": "ObjectHeaderKPICaption"
              }
            },
            "_Type": "Section.Type.ObjectHeader"
          }
        ],
        "_Name": "ObjectHeaderSection",
        "_Type": "Control.Type.SectionedTable"
      }
    ],
    "_Type": "Page",
    "_Name": "ObjectHeaderWithStyledKPI"
  }

Object Header with Styled Chart

{
  "Caption": "Object Header with Styled Chart",
  "Controls": [
    {
      "Sections": [
        {
          "ObjectHeader": {
            "BodyText": "BodyText",
            "Description": "Description",
            "DetailImage": "/MDKDevApp/Images/objectheader.png",
            "DetailImageIsCircular": true,
            "Footnote": "Footnote",
            "HeadlineText": "HeadlineText",
            "StatusText": "High",
            "StatusImage": "res://n_icon.png",
            "Subhead": "Subhead",
            "SubstatusImage": "res://test_png.png",
            "SubstatusText": "Error",
            "Tags": "Tags",
            "AnalyticView": {
                "_Type": "Chart",
                "Chart": {
                    "Title": "Annual Sales",
                    "Subtitle": "For 2017-18",
                    "TrendTitle": "+ 20%",
                    "TrendColor": "#FF0000",
                    "TrendImage": "/MDKDevApp/Images/objectheader.png",
                    "KPI": {
                        "MetricItems": [
                                {
                                    "LeadingUnit": "Temp",
                                    "Value": "104",
                                    "TrailingUnit": "°F"
                                }
                            ],
                        "Icon": "/MDKDevApp/Images/document.png"
                    },
                    "ChartView": {
                        "ChartType": "Line",
                        "SeriesColor": ["#FF0000","#0000FF"],
                        "Data": [
                          [
                              100,
                              200,
                              300
                          ],
                          [
                              100,
                              150,
                              500
                          ]
                        ],
                        "CategoryTitles": [
                            "Jan",
                            "Feb",
                            "March"
                        ]
                    }
                },
              "OnPress": "/MDKDevApp/Actions/Messages/Message.action"
            },
            "Styles": {
              "ObjectHeader": "ObjectHeaderBackground",
              "BodyText": "ObjectHeaderBody",
              "Description": "ObjectHeaderDescription",
              "Footnote": "ObjectHeaderFootnote",
              "HeadlineText": "ObjectHeaderHeadeline",
              "StatusText": "ObjectHeaderStatus",
              "Subhead": "ObjectHeaderSubhead",
              "SubstatusText": "ObjectHeaderSubstatus",
              "ChartTitle": "ObjectHeaderChartTitle",
              "ChartSubTitle": "ObjectHeaderChartSubTitle",
              "ChartTrendTitle": "ObjectHeaderChartTrendTitle",
              "ChartTrendImage": "ObjectHeaderChartTrendImage",
              "ChartKPIUnit": "ObjectHeaderChartKPIUnit",
              "ChartKPIValue": "ObjectHeaderChartKPIValue",
              "ChartKPIIcon": "ObjectHeaderChartKPIIcon"
            }
          },
          "_Type": "Section.Type.ObjectHeader"
        }
      ],
      "_Name": "ObjectHeaderSection",
      "_Type": "Control.Type.SectionedTable"
    }
  ],
  "_Type": "Page",
  "_Name": "ObjectHeaderWithStyledChart"
}

Static Object Header with Chart and a PlaceholderText when no Chart Data is available

{
  "Caption": "Static Object Header with Chart",
  "Controls": [
    {
      "Sections": [
        {
          "ObjectHeader": {
            "BodyText": "BodyText",
            "Description": "Description",
            "DetailImage": "/MDKDevApp/Images/objectheader.png",
            "DetailImageIsCircular": true,
            "Footnote": "Footnote",
            "HeadlineText": "HeadlineText",
            "StatusText": "High",
            "StatusImage": "res://n_icon.png",
            "Subhead": "Subhead",
            "SubstatusImage": "res://test_png.png",
            "SubstatusText": "Error",
            "Tags": "Tags",
            "AnalyticView": {
                "_Type": "Chart",
                "Chart": {
                    "Title": "Annual Sales",
                    "Subtitle": "For 2017-18",
                    "TrendTitle": "8h ago",
                    "TrendColor": "#FF0000",
                    "TrendImage": "/MDKDevApp/Images/objectheader.png",
                    "KPI": {
                        "MetricItems": [
                                {
                                    "LeadingUnit": "Temp",
                                    "Value": "104",
                                    "TrailingUnit": "°F"
                                }
                            ],
                        "Icon": "/MDKDevApp/Images/document.png"
                    },
                    "ChartView": {
                        "ChartType": "Line",
                        "SeriesColor": ["#FF0000","#0000FF"],
                        "NoDataText":"No chart data available",
                        "CategoryTitles": [
                            "Jan",
                            "Feb",
                            "March"
                        ]
                    }
                },
              "OnPress": "/MDKDevApp/Actions/Messages/Message.action"
            }
          },
          "_Type": "Section.Type.ObjectHeader"
        }
      ],
      "_Name": "ObjectHeaderSection",
      "_Type": "Control.Type.SectionedTable"
    }
  ],
  "_Type": "Page",
  "_Name": "StaticObjectHeaderWithChart"
}

ObjectHeader with font icon and style example

{
  "_Type": "Page",
  "_Name": "SectionedTablePage",
  "Caption": "Object Table Section Page",
  "Controls": [
    {
      "Sections": [
        {
          "_Type": "Section.Type.ObjectHeader",
          "ObjectHeader": {
            "BodyText": "1000-Hamburg, MECHANIK. This is a body label, which its text can not be wrapped",
            "Description": "Temperature sensor predicts overheating failure in 4 days Urgent and needs attentions.  Temperature sensor predicts overheating failure in 4 days Urgent and needs attentions.",
            "DetailImage": "font://",
            "DetailImageIsCircular": false,
            "Footnote": "Due on 12/31/16. This is a footnote label, which its text can not be wrapped",
            "HeadlineText": "Inspect Electric Pump Motor Long Job Title Example Will Wrap Max# of Lines in the HeadlineLabel",
            "StatusImage": "font://",
            "Subhead": "Job 819701. This is a subheadline label, which its text can not be wrapped",
            "SubstatusText": "Medium",
            "SubstatusImage": "sap-icon://home",
            "Tags": [
              "Started",
              "PM01",
              "103-Repair",
              "The Fourth one"
            ],
            "Styles": {
              "ObjectHeader": "objectHeaderBackground",
              "BodyText": "objectHeaderBody",
              "Description": "objectHeaderDescription",
              "Footnote": "objectHeaderFootnote",
              "HeadlineText": "objectHeaderHeadeline",
              "StatusText": "objectHeaderStatus",
              "Subhead": "objectHeaderSubhead",
              "SubstatusText": "objectHeaderSubstatus",
              "DetailImage": "font-icon-class",
              "StatusImage": "font-icon-class",
              "SubstatusImage": "font-icon-class"
            }
          }
        }
      ]
    }
  ]
}

Style Classes Definition

/* Object Header - Background */
.objectHeaderBackground {
  background-color: yellow;
}

/* Object Header - BodyText */
/* iOS Only */
.objectHeaderBody {
  color: black;
  font-style: UIFontTextStyleBody;
}

/* Object Header - Description */
/* iOS Only */
.objectHeaderDescription {
  color: black;
  font-style: UIFontTextStyleBody;
}

/* Object Header - Footnote */
/* iOS Only */
.objectHeaderFootnote {
  color: black;
  font-style: UIFontTextStyleBody;
}

/* Object Header - Headline */
/* iOS Only */
.objectHeaderHeadeline {
  color: black;
  font-style: UIFontTextStyleBody;
}

/* Object Header - StatusText */
/* iOS Only */
.objectHeaderStatus {
  color: black;
  font-style: UIFontTextStyleBody;
}

/* Object Header - Subhead */
/* iOS Only */
.objectHeaderSubhead {
  color: black;
  font-style: UIFontTextStyleBody;
}

/* Object Header - SubstatusText */
/* iOS Only */
.objectHeaderSubstatus {
  color: black;
  font-style: UIFontTextStyleBody;
}

/* Object Header - ChartTitle */
/* iOS Only */
.ObjectHeaderChartTitle {
  font-size: 20;
  color: @mdkRed4;
}

/* Object Header - ChartSubTitle */
/* iOS Only */
.ObjectHeaderChartSubTitle {
  font-size: 14;
  color: @mdkGreen1;
}

/* Object Header - ChartTrendTitle */
/* iOS Only */
.ObjectHeaderChartTrendTitle {
  font-size: 10;
  color: @mdkBlue1;
}

/* Object Header - ChartTrendImage*/
/* iOS Only */
.ObjectHeaderChartTrendImage {
  tint-color: white;
  background-color: blue;
}

/* Object Header - ChartKPIUnit */
/* iOS Only */
.ObjectHeaderChartKPIUnit {
  font-size: 14;
  color: black;
}

/* Object Header - ChartKPIValue */
/* iOS Only */
.ObjectHeaderChartKPIValue {
  font-size: 16;
  color: brown;
}

/* Object Header - ChartKPIIcon*/
/* iOS Only */
.ObjectHeaderChartKPIIcon {
  tint-color: white;
  background-color: red;
}

/* Object Header - KPI TintColor */
.ObjectHeaderKPITintColor {
  tint-color: @mdkBlue1;  /*for KPIView */
  color: @mdkBlue1;  /*for KPIProgressView */
}

/* For Styling of Object Header KPI Caption Label */
.ObjectHeaderKPICaption {
  font-size: 30;
  color: green; 
  font-style: UIFontTextStyleBody;
}

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