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.
- type: ActionOrRule
- Formatter and Binding are not supported
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.
- HeaderFooter style class
Caption¶
The string value is a style class name of Caption
. It is used to style the Caption text on the Section Header.
- Text style class
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;
}