Skip to content

Header

This is a section bar control to add a header bar to a compound or container control.

Header Properties

Property Type Required Default
AccessoryType enum Optional "None"
Caption string Optional
DataTable object Optional
Grid object Optional
Items complex Optional
OnPress ActionOrRule Optional
Styles object Optional
UseTopPadding boolean Optional true
_Name string Optional

AccessoryType

Optional accessory icon to be displayed in the cell. Applicable only for iOS and web.

  • type: enum
  • default: None

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

Value Description
DisclosureIndicator A chevron-shaped control for presenting new content on iOS and web.
None No accessory view.

Caption

Text label for the caption content.

Can't co-exist with Grid & DataTable.

  • type: string

DataTable

Can't co-exist with Caption.

  • type: object with following properties.
Property Type Required Default
Items array Required
Layout DataTableLayout Optional

Items

Array of header Columns that represent columns in a data Table header.

All array items must be of the type:

Layout

The layout of columns in a Data Table row.


Grid

Can't co-exist with Caption.

  • type: object with following properties.
Property Type Required Default
Items array Required
Layout GridRowLayout Optional

Items

Array of GridRowItem that represent columns in the grid header.

RowItems with Image not supported in the header at this time.

All array items must be of the type:

Layout

The layout of columns in a Grid Table row.

By default use the same layout as for the section rows.


Items

Limited to 1 item on the left and 1 item on the right.

Items has priority over Caption if both are defined. Can't co-exist with Grid & DataTable.

  • type: complex

Items Value

Any following options needs to be fulfilled.

Option 1

Array of section header items.

Array type:

All items must be of the type:

Option 2

Expects return of SectionHeaderItem in array format.


OnPress

Action/Rule to be executed when the header view is clicked. The ClientAPI object to be received in rule function is SectionProxy.


Styles

Set styles for header.

  • type: object with following properties.
Property Type Required Default
Header string Optional
Caption string Optional

Header

The string value is a style class name for Header. It is used to set the background color of the Section Header.

Caption

The string value is a style class name for Caption. It is used to style the Caption text on the Section Header.


UseTopPadding

For iOS devices, this property shows or hides the top padding of the section header (gray separator).

For Android devices, this property is not applicable, as there is no gray separator at the top of the header.

  • type: boolean
  • default: true

_Name

  • type: string

Examples

Simple Caption Header - No Top Padding

{
  "Header": {
    "Caption": "A Section Caption - No Top Padding",
    "UseTopPadding": false,
    "Styles": {
      "Header": "header-css-class",
      "Caption": "caption-css-class",
    }
  }
}

Header Items

Notes:

  • Items array accepts same or combination of item types on both sides.
  • Only 1 item on the left and 1 item on the right would be displayed.
  • In the following example, only label and button2 items will be displayed, as button1 item has Visible set to false and icon item exceeds the items display limit for the left position.
{
  "Header": {
    "Caption": "Test caption",
    "Items": [
      {
        "_Type": "SectionHeaderItem.Type.Button",
        "_Name": "button1",
        "Title": "Button 1",
        "Position": "Right",
        "Visible": false,
        "OnPress": "/MDKDevApp/Actions/Messages/MessageButton1.action"
      },
      {
        "_Type": "SectionHeaderItem.Type.Label",
        "_Name": "label",
        "Title": "Label",
        "Position": "Left"
      }, {
        "_Type": "SectionHeaderItem.Type.Button",
        "_Name": "button2",
        "Title": "Button 2",
        "Position": "Right",
        "OnPress": "/MDKDevApp/Actions/Messages/MessageButton2.action"
      }, {
        "_Type": "SectionHeaderItem.Type.Icon",
        "_Name": "icon",
        "OnPress": "/MDKDevApp/Actions/Messages/MessageIcon.action",
        "Icon": "/MDKDevApp/Images/extension.png",
        "Position": "Left"
      }
    ],
    "AccessoryType": "None",
    "OnPress": "/MDKDevApp/Actions/Messages/MessageHeader.action"
  }
}

Header Items - Styling

{
  "Header": {
    "Items": [
      {
        "_Type": "SectionHeaderItem.Type.Label",
        "_Name": "label1",
        "Title": "Label 1",
        "Position": "Left",
        "Styles": {
          "Label": "headerItemLabel"
        }
      },
      {
        "_Type": "SectionHeaderItem.Type.Icon",
        "_Name": "icon2",
        "OnPress": "/MDKDevApp/Actions/Messages/MessageIcon.action",
        "Icon": "sap-icon://customer-and-supplier",
        "Position": "Right",
        "Styles": {
          "Icon": "font-icon-class"
        }
      },
      {
        "_Type": "SectionHeaderItem.Type.Button",
        "_Name": "button4b",
        "Title": "Button 4b",
        "Position": "Right",
        "ButtonType": "Primary",
        "Image": "sap-icon://customer-and-supplier",
        "ImagePosition": "Trailing",
        "OnPress": "/MDKDevApp/Actions/Messages/MessageButton.action",
        "Styles": {
          "Image": "font-icon-class",
          "Button": "Styles2Button"
        }
      }
    ],
    "AccessoryType": "None",
    "OnPress": "/MDKDevApp/Actions/Messages/MessageHeader.action"
  }
}

Grid Header

{
  "Header": {
    "Grid": {
      "Items": [
        {
          "Text": ""
        },
        {
          "Text": "ID"
        },
        {
          "Text": "Description"
        },
        {
          "Text": "Price",
          "TextAlignment": "right"
        }
      ],
      "Layout": {
        "ColumnWidthPercentage": [
          0.2,
          0.2,
          -1,
          0.25
        ]
      }
    }
  }
}

Style Classes Definition

.headerItemLabel {
  font-name: thinSystem;
  font-size: 13;
  font-color: #ff00ff;
  font-typeface: bold;
}

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

.Styles2Button {
  background-color: #bfd4e8;
  background-color-highlighted: #74a5d2;
  background-color-disabled: #363e46;

  font-name: thinSystem;
  font-size: 14;
  font-color: #ffee00;
  font-typeface: italic;

  border-color: #6600ff;
  border-width: 4;

  padding: 12 16;
}