ToolBar¶
A Toolbar is a horizontal container that includes toolbar items and can display buttons, labels, selects, and other input controls.
ToolBar Properties¶
Property | Type | Required |
---|---|---|
Controls | object[] |
Optional |
Controls¶
Toolbar items
- type:
object[]
All items must be of the type: object
with following properties:
Property | Type | Required | Default |
---|---|---|---|
Caption |
string | Optional | |
Clickable |
boolean | Optional | true |
Enabled |
boolean | Optional | true |
Image |
Optional | ||
ItemType |
string | Optional | |
OnPress |
Optional | ||
SystemItem |
Optional | ||
Visible |
boolean | Optional | true |
Width |
integer | Optional | |
_Name |
string | Required | |
_Type |
Required |
Caption¶
Displayed label of the toolbar item. The default value is the same as the value of _Name
.
- type:
string
Clickable¶
Indicates if the toolbar item is clickable. If the value is false, the item cannot be enabled and behaves like a label.
- type:
boolean
- default:
true
Enabled¶
Enables or disables the toolbar item.
- type:
boolean
- default:
true
Image¶
Adds an image to your toolbar. Overwrites Caption
, if specified.
- type: Image
ItemType¶
Indicates the item type of the toolbar item. It provides two options: Normal
(text button) and Button
(contained
button). This parameter is applicable only to Android.
- type:
enum
The value of this property must be equal to one of the known values below.
Value | Description |
---|---|
Button |
|
Normal |
OnPress¶
Action/Rule to be triggered when the toolbar item is pressed.
- type: ActionOrRule
- Formatter and Binding are not supported
SystemItem¶
Adds predefined system-supplied icon or text. Overwrites Caption
and Image
if specified.
If you set the width but not the image or caption, then an empty space with the specified width will be rendered.
On Android devices, the SystemItem
renders with black colored icon due to the white background.
- type: SystemItem
Visible¶
Set the visibility of this control.
- type:
boolean
- default:
true
Width¶
The width of the control in Device Independent Pixel. The DIP value will be converted to pixels of the platform (based on scale and on density for iOS and Android respectively).
Mandatory if SystemItem
is set to FixedSpace
, optional for Caption
and Image
.
By default, the caption and image widths are calculated automatically.
- type:
integer
_Name¶
- type:
string
_Type¶
- type:
const
The value of this property must be equal to:
"Control.Type.ToolbarItem"
Examples¶
// left aligned Save button
{
"_Type": "Page",
"Caption": "ToolBarPage",
"ToolBar": {
"Controls": [{
"_Name": "Save",
"_Type": "Control.Type.ToolbarItem",
"SystemItem": "Save",
"Caption": "Save",
"OnPressAction": "/MDKApp/Actions/Save.action"
}]
},
"Controls": []
}
// left aligned Camera and Save buttons
{
"_Type": "Page",
"Caption": "ToolBarPage",
"ToolBar": {
"Controls": [{
"_Name": "Camera",
"_Type": "Control.Type.ToolbarItem",
"SystemItem": "Camera",
"Caption": "Camera",
"OnPressAction": "/MDKApp/Actions/Camera.action"
}, {
"_Name": "Done",
"_Type": "Control.Type.ToolbarItem",
"SystemItem": "Done",
"Caption": "Done",
"OnPressAction": "/MDKApp/Actions/Done.action"
}]
},
"Controls": []
}
// three buttons - left aligned - centered - right aligned
{
"_Type": "Page",
"Caption": "ToolbarPage",
"Controls": [],
"ToolBar": {
"Controls": [{
"_Name": "Save",
"_Type": "Control.Type.ToolbarItem",
"SystemItem": "Save",
"Caption": "Save",
"OnPressAction": "/MDKApp/Actions/Save.action"
}, {
"_Name": "FlexibleSpace1",
"_Type": "Control.Type.ToolbarItem",
"SystemItem": "FlexibleSpace"
}, {
"_Name": "CenteredText",
"_Type": "Control.Type.ToolbarItem",
"Caption": "SalesOrderPage"
}, {
"_Name": "FlexibleSpace2",
"_Type": "Control.Type.ToolbarItem",
"SystemItem": "FlexibleSpace"
}, {
"_Name": "Cancel",
"_Type": "Control.Type.ToolbarItem",
"SystemItem": "Cancel",
"Caption": "Cancel",
"OnPressAction": "/MDKApp/Actions/Cancel.action"
}]
}
}
// two buttons with fixed space
{
"_Type": "Page",
"Caption": "ToolbarPage",
"Controls": [],
"ToolBar": {
"Controls": [{
"_Name": "Save",
"_Type": "Control.Type.ToolbarItem",
"SystemItem": "Save",
"Caption": "Save",
"OnPressAction": "/MDKApp/Actions/Save.action"
}, {
"_Name": "FixedSpace",
"_Type": "Control.Type.ToolbarItem",
"Width": 5,
"SystemItem": "FixedSpace"
}, {
"_Name": "Cancel",
"_Type": "Control.Type.ToolbarItem",
"SystemItem": "Cancel",
"Caption": "Cancel",
"OnPressAction": "/MDKApp/Actions/Cancel.action"
}]
}
}
// image button example
{
"_Type": "Page",
"Caption": "ToolbarPage",
"Controls": [],
"ToolBar": {
"Controls": [{
"_Name": "IconRes",
"_Type": "Control.Type.ToolbarItem",
"Image": "res://n_icon.png",
"Caption": "Icon A",
"OnPressAction": "/MDKApp/Actions/Message.action"
}, {
"_Name": "IconRef",
"_Type": "Control.Type.ToolbarItem",
"Image": "/MDKDevApp/Images/seam.png",
"Caption": "Icon B",
"OnPressAction": "/MDKApp/Actions/Message.action"
}, {
"_Name": "IconUrl",
"_Type": "Control.Type.ToolbarItem",
"Image": "https://www.gstatic.com/webp/gallery/1.sm.jpg",
"Caption": "Icon C",
"OnPressAction": "/MDKApp/Actions/Message.action"
}, {
"_Name": "IconFont",
"_Type": "Control.Type.ToolbarItem",
"Image": "font://",
"Caption": "Icon D",
"OnPressAction": "/MDKApp/Actions/Message.action"
}, {
"_Name": "IconSAP",
"_Type": "Control.Type.ToolbarItem",
"Image": "sap-icon://add",
"Caption": "Icon E",
"OnPressAction": "/MDKApp/Actions/Message.action"
}]
}
}
// two buttons with flexible space
{
"_Type": "Page",
"Caption": "ToolbarPage",
"Controls": [],
"ToolBar": {
"Controls": [{
"_Name": "Save",
"_Type": "Control.Type.ToolbarItem",
"SystemItem": "Save",
"Caption": "Save",
"OnPressAction": "/MDKApp/Actions/Save.action"
}, {
"_Name": "FlexibleSpace",
"_Type": "Control.Type.ToolbarItem",
"SystemItem": "FlexibleSpace"
}, {
"_Name": "Cancel",
"_Type": "Control.Type.ToolbarItem",
"SystemItem": "Cancel",
"Caption": "Cancel",
"OnPressAction": "/MDKApp/Actions/Cancel.action"
}]
}
}
// three buttons - disabled button
{
"_Type": "Page",
"Caption": "ToolbarPage",
"Controls": [],
"ToolBar": {
"Controls": [{
"_Name": "Done",
"_Type": "Control.Type.ToolbarItem",
"SystemItem": "Done",
"Enabled": false,
"OnPressAction": "/MDKApp/Actions/Message.action"
}, {
"_Name": "Menu",
"_Type": "Control.Type.ToolbarItem",
"Caption": "Menu",
"OnPressAction": "/MDKApp/Actions/Popover.action"
}, {
"_Name": "Camera",
"_Type": "Control.Type.ToolbarItem",
"SystemItem": "Camera",
"OnPressAction": "/MDKApp/Actions/Camera.action"
}]
}
}
// two buttons - visible
{
"_Type": "Page",
"Caption": "ToolbarPage",
"Controls": [],
"ToolBar": {
"Controls": [{
"_Name": "VisibleItem",
"_Type": "Control.Type.ToolbarItem",
"Caption": "Visible",
"OnPressAction": "/MDKApp/Actions/Message.action"
}, {
"_Name": "NotVisibleItem",
"_Type": "Control.Type.ToolbarItem",
"Caption": "NotVisible",
"Visible": false,
"OnPressAction": "/MDKApp/Actions/Popover.action"
}]
}
}
// right aligned done button
{
"_Type": "Page",
"Caption": "ToolbarPage",
"Controls": [],
"ToolBar": {
"Controls": [{
"_Name": "FlexibleSpace",
"_Type": "Control.Type.ToolbarItem",
"SystemItem": "FlexibleSpace"
}, {
"_Name": "Done",
"_Type": "Control.Type.ToolbarItem",
"SystemItem": "Done",
"Caption": "Done",
"OnPressAction": "/MDKApp/Actions/Message.action"
}]
}
}
// toolbar item with normal and contained button
// (1st not indicated - default as "Normal", 2nd indicated as "Normal", 3rd indicated as "Button")
{
"_Type": "Page",
"Caption": "ToolbarPage",
"Controls": [],
"ToolBar": {
"Controls": [
{
"_Name": "NormalTextToolbarItem",
"_Type": "Control.Type.ToolbarItem",
"Caption": "Normal Button",
"OnPress": "/MDKDevApp/Actions/Messages/Message.action"
}, {
"_Name": "NormalTextToolbarItem2",
"_Type": "Control.Type.ToolbarItem",
"Caption": "Normal Button 2",
"ItemType": "Normal",
"OnPress": "/MDKDevApp/Actions/Messages/Message.action"
}, {
"_Name": "PrimaryToolbarItem",
"_Type": "Control.Type.ToolbarItem",
"Caption": "Contained Button",
"ItemType": "Button",
"OnPress": "/MDKDevApp/Actions/Messages/Message.action"
}
]
}
}
// toolbar on top of the page (similar to an action bar)
// this is the suggested workaround to show an actionbar like toolbar on a partial modal page
{
"_Type": "Page",
"Caption": "ToolbarPage",
"Controls": [],
"ToolBar": {
"Position": "top",
"Controls": [{
"_Name": "Cancel",
"_Type": "Control.Type.ToolbarItem",
"SystemItem": "Cancel",
"OnPress": "/MDKApp/Actions/Navigation/CancelChangeSet.action"
}, {
"_Name": "FlexibleSpace",
"_Type": "Control.Type.ToolbarItem",
"SystemItem": "FlexibleSpace"
}, {
"_Name": "Title",
"_Type": "Control.Type.ToolbarItem",
"Caption": "Filter",
"Enabled": false
}, {
"_Name": "FlexibleSpace2",
"_Type": "Control.Type.ToolbarItem",
"SystemItem": "FlexibleSpace"
}, {
"_Name": "Done",
"_Type": "Control.Type.ToolbarItem",
"SystemItem": "Done",
"OnPress": "/MDKApp/Actions/Navigation/ClosePage.action"
}]
}
}