Skip to content

KeyValue

This is a container that can display one or more key value pair items on a section page. In this container, you can include a Key Value Item, a simple key value cell that displays a label and a text pair.

KeyValue Properties

Property Type Required Default
DataSubscriptions DataSubscriptions No
EmptySection EmptySection No
Footer Footer No
Header Header No
KeyAndValues KeyValueItem Yes
Layout Layout No
MaxItemCount integer No
Separators Separator No
Target LinkQueryFunctionTarget No
Visible boolean No true
_Name string No
_Type const Yes

DataSubscriptions

Array of data change events to subscribe to.

EmptySection

A section that will be displayed when the list is empty, this only applies if you are using Target binding. Allows you to show custom label when the list is empty.

Footer

Footer bar to be displayed below this control's content section.

Header bar to be displayed above this control's content section.

KeyAndValues

  • type: KeyValueItem[]
  • at least 1 items in the array

All array items must be of the type: KeyValueItem

Layout

MaxItemCount

Set to 1 will always display one row with a collection of Key-Value pairs inside

  • type: integer

Separators

To provide more flexibility with rendering of controls and sections, set the visibility of the separator lines.

Target

Only the first record of any entity set returned by the target will be used. Its data will be set as the binding context of this control. It allows each Key-Value pairs defined in KeyAndValues array to display different OData properties.

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

Examples

Static

{
  "Caption": "Key-Value",
  "Controls": [
    {
      "_Type": "Control.Type.SectionedTable",
      "_Name": "SectionedTable",
      "Sections": [
        {
          "Header": {
            "Caption": "Two-column key-value collection (default)"
          },
          "_Type": "Section.Type.KeyValue",
          "_Name": "KeyValueTable",
          "KeyAndValues": [
            {
              "_Type": "KeyValue.Type.Item",
              "_Name": "KeyValueItem1",
              "KeyName": "Title",
              "Value": "The Dark Side of the Moon",
              "Visible": true
            },
            {
              "KeyName": "Track",
              "Value": "Hidden track",
              "Visible": false
            },
            {
              "KeyName": "Artist",
              "Value": "Pink Floyd"
            },
            {
              "KeyName": "Year",
              "Value": "1973"
            }
          ]
        },
        {
          "Header": {
            "Caption": "One-column key-value collection"
          },
          "_Type": "Section.Type.KeyValue",
          "KeyAndValues": [
            {
              "KeyName": "Grrrrrrrreat for long strings",
              "Value": "The quick brown fox jumps over the lazy dog"
            },
            {
              "KeyName": "How long can it really be?",
              "Value": "3.14159 26535 89793 23846 26433 83279 50288 41971 69399 37510 58209 74944 59230 78164 06286 20899 86280 34825 34211 70679 82148"
            }
          ],
          "Layout": {
            "NumberOfColumns": 1
          }
        },
        {
          "Header": {
            "Caption": "Three-column key-value collection"
          },
          "_Type": "Section.Type.KeyValue",
          "KeyAndValues": [
            {
              "KeyName": "Red",
              "Value": "Rojo"
            },
            {
              "KeyName": "White",
              "Value": "Blanco"
            },
            {
              "KeyName": "Blue",
              "Value": "Azul"
            }
          ],
          "Layout": {
            "NumberOfColumns": 3
          }
        }
      ]
    }
  ]
}

Data Binding

{
  "_Type": "Page",
  "_Name": "BindingKeyValuePage",
  "Caption": "KeyValue Data Binding Page",
  "Controls": [
    {
      "_Type": "Control.Type.SectionedTable",
      "Sections": [
        {
          "KeyAndValues": [
            {
              "KeyName": "Order ID",
              "Value": "{OrderId}"
            },
            {
              "KeyName": "Description",
              "Value": "{OrderDescription}"
            }
          ],
          "_Type": "Section.Type.KeyValue",
          "_Name": "KeyValueTable"
        }
      ],
      "Target": {
        "EntitySet": "MyWorkOrderHeaders",
        "Service": "/MDKApp/Services/Amw.service",
        "QueryOptions": "$expand=Operations&$orderby=OrderId&$top=1"
      }
    }
  ]
}

Clickable KeyValue Section

{
  "_Type": "Page",
  "_Name": "BindingKeyValuePage",
  "Caption": "KeyValue Data Binding Page",
  "Controls": [
    {
      "_Type": "Control.Type.SectionedTable",
      "Sections": [
        {
          "KeyAndValues": [
            {
              "_Type": "KeyValue.Type.Item",
              "_Name": "KeyValueItem1",
              "KeyName": "Title",
              "Value": "The Dark Side of the Moon",
              "OnPress": "/MDKDevApp/Actions/Messages/AlertMessage.action"
            },
            {
              "KeyName": "Artist",
              "Value": "Pink Floyd",
              "OnPress": "/MDKDevApp/Actions/Messages/AlertMessage.action",
              "LinkColor": "#FF0000"
            }
          ],
          "_Type": "Section.Type.KeyValue",
          "_Name": "KeyValueTable"
        }
      ]
    }
  ]
}