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 No "None"
Caption string No
DataTable object No
Grid object No
Items complex No
OnPress ActionOrRule No
Styles object No
UseTopPadding boolean No true
_Name string No
_Type const No

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 one of the known values listed 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 Yes
Layout DataTableLayout No

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 Yes
Layout GridRowLayout No

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 No
Caption string No

Header

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

Caption

The string value is a style class name of 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

_Type

  • type: const

The value of this property must be:

"SectionCommon.Type.Header"

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