KeyValueItem¶

A simple key value cell that displays a label and a text pair.

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

KeyValueItemProxy

KeyValueItem Properties¶

Property	Type	Required	Default
KeyName	`string`	No
LinkColor	`string`	No
OnPress	ActionOrRule	No
Styles	`object`	No
Value	`string`	No
Visible	`boolean`	No	`true`
_Name	`string`	No
_Type	`const`	No

KeyName¶

The key name of the cell.

type: string

LinkColor¶

Deprecated. Please use Value in Styles property.

Use this property to override the Fiori Default color of Value text. Only valid for clickable KeyValue and only accepts Hex code strings

type: string

OnPress¶

Use this property to mark a KeyValue cell as clickable and to define the action on click of the cell.

type: ActionOrRule
Formatter and Binding are not supported

Styles¶

Style to be applied on the key value item.

type: object with following properties.

Property	Type	Required
KeyValueItem	string	No
KeyName	string	No
Value	string	No

KeyValueItem¶

The string value is a style class name of KeyValueItem.

Background style class

KeyName¶

The string value is a style class name of KeyName.

TextPaint style class

Value¶

The string value is a style class name of Value.

Value style class

Value¶

The value of the property.

For iOS devices, there is an unlimited number of lines for the KeyValue section.

For Android devices, the KeyValue section has a maximum of three lines for a value. Also, if the screen width is less than 600 dpi, only one column is rendered for the KeyValue control. On rotation of the screen, the display switches back to multiple columns if the width is more than 600 dpi.

type: string

Visible¶

Set the visibility of this section.

type: boolean
default: true

_Name¶

type: string

_Type¶

type: const

The value of this property must be:

"KeyValue.Type.Item"

Examples¶

Static¶

{
  "_Type": "Page",
  "_Name": "ProductDetailsPage",
  "Caption": "Product Details",
  "Controls": [
    {
      "_Type": "Control.Type.SectionedTable",
      "_Name": "SectionedTable",
      "Sections": [
        {
          "_Type": "Section.Type.KeyValue",
          "_Name": "ProductInfoSection",
          "Header": {
            "Caption": "Product Information"
          },
          "KeyAndValues": [
            {
              "_Type": "KeyValue.Type.Item",
              "_Name": "ProductNameItem",
              "KeyName": "Product Name",
              "Value": "MacBook Pro 16",
              "OnPress": "/MDKDevApp/Actions/Messages/Message.action",
              "Visible": true
            },
            {
              "_Type": "KeyValue.Type.Item",
              "_Name": "PriceItem",
              "KeyName": "Price",
              "Value": "$2,499.00",
              "Visible": true
            },
            {
              "_Type": "KeyValue.Type.Item",
              "_Name": "StockItem",
              "KeyName": "In Stock",
              "Value": "Yes",
              "Visible": true
            },
            {
              "_Type": "KeyValue.Type.Item",
              "_Name": "DetailsLinkItem",
              "KeyName": "More Details",
              "Value": "View Specifications",
              "Visible": true,
              "OnPress": "/MDKDevApp/Actions/Messages/Message.action"
            }
          ]
        }
      ]
    }
  ]
}

Dynamic¶

{
  "_Type": "Page",
  "_Name": "OrderDetailsPage",
  "Caption": "Order Details",
  "Controls": [
    {
      "_Type": "Control.Type.SectionedTable",
      "_Name": "SectionedTable",
      "DataSubscriptions": ["OrderDetails"],
      "Sections": [
        {
          "_Type": "Section.Type.KeyValue",
          "_Name": "SectionKeyValue",
          "KeyAndValues": [
            {
              "_Type": "KeyValue.Type.Item",
              "_Name": "OrderIdItem",
              "KeyName": "Order ID",
              "Value": "{OrderId}"
            },
            {
              "_Type": "KeyValue.Type.Item",
              "_Name": "TrackingNumberItem",
              "KeyName": "Tracking Number",
              "Value": "{TrackingNumber}",
              "Visible": "{HasTrackingNumber}"
            },
            {
              "_Type": "KeyValue.Type.Item",
              "_Name": "CustomerNameItem",
              "KeyName": "Customer",
              "Value": "{CustomerName}"
            }
          ]
        }
      ]
    }
  ]
}

Styled KeyValueItem with static data¶

{
  "_Type": "Page",
  "_Name": "ProductDetailsPage",
  "Caption": "Product Details",
  "Controls": [
    {
      "_Type": "Control.Type.SectionedTable",
      "_Name": "SectionedTable",
      "Sections": [
        {
          "_Type": "Section.Type.KeyValue",
          "_Name": "ProductInfoSection",
          "Header": {
            "Caption": "Product Information"
          },
          "KeyAndValues": [
            {
              "_Type": "KeyValue.Type.Item",
              "_Name": "ProductNameItem",
              "KeyName": "Product Name",
              "Value": "MacBook Pro 16",
              "OnPress": "/MDKDevApp/Actions/Messages/Message.action",
              "Visible": true,
              "LinkColor": "#0000FF"
            },
            {
              "_Type": "KeyValue.Type.Item",
              "_Name": "StockItem",
              "KeyName": "In Stock",
              "Value": "Yes",
              "Visible": true,
              "Styles": {
                "KeyValueItem": "customKeyValueBackground",
                "KeyName": "customKeyNameStyle",
                "Value": "customValueStyle"
              }
            },
            {
              "_Type": "KeyValue.Type.Item",
              "_Name": "DetailsLinkItem",
              "KeyName": "More Details",
              "Value": "View Specifications",
              "Visible": true,
              "OnPress": "/MDKDevApp/Actions/Messages/Message.action",
              "Styles": {
                "Value": "linkText"
              }
            }
          ]
        }
      ]
    }
  ]
}

Style Classes Definition¶

Define custom style classes for KeyValueItem components.

.customKeyValueBackground {
  background-color: #fde7e7ff;
  padding: 12;
}

.customKeyNameStyle {
  font-color: #333333;
  font-size: 14;
}

.customValueStyle {
  font-color: #0066CC;
  font-size: 16;
}

.linkText {
  font-color: #0066CC;
  text-decoration: underline;
}