ToolBar¶

A Toolbar is a horizontal container that includes toolbar items and can display buttons, labels, selects, and other input controls.

Property	Type	Required
Items	`object[]`	Optional

Items¶

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`
`Icon`		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

Icon¶

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 Icon if specified.

If you set the width but not the icon 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 Icon.

By default, the caption and icon 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": {
    "Items": [{
      "_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": {
    "Items": [{
      "_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": {
    "Items": [{
      "_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": {
    "Items": [{
      "_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": {
    "Items": [{
      "_Name": "IconRes",
      "_Type": "Control.Type.ToolbarItem",
      "Icon": "res://n_icon.png",
      "Caption": "Icon A",
      "OnPressAction": "/MDKApp/Actions/Message.action"
    }, {
      "_Name": "IconRef",
      "_Type": "Control.Type.ToolbarItem",
      "Icon": "/MDKDevApp/Images/seam.png",
      "Caption": "Icon B",
      "OnPressAction": "/MDKApp/Actions/Message.action"
    }, {
      "_Name": "IconUrl",
      "_Type": "Control.Type.ToolbarItem",
      "Icon": "https://www.gstatic.com/webp/gallery/1.sm.jpg",
      "Caption": "Icon C",
      "OnPressAction": "/MDKApp/Actions/Message.action"
    }, {
      "_Name": "IconFont",
      "_Type": "Control.Type.ToolbarItem",
      "Icon": "font://&#xe05a;",
      "Caption": "Icon D",
      "OnPressAction": "/MDKApp/Actions/Message.action"
    }, {
      "_Name": "IconSAP",
      "_Type": "Control.Type.ToolbarItem",
      "Icon": "sap-icon://add",
      "Caption": "Icon E",
      "OnPressAction": "/MDKApp/Actions/Message.action"
    }]
  }
}

// two buttons with flexible space
{
  "_Type": "Page",
  "Caption": "ToolbarPage",
  "Controls": [],
  "ToolBar": {
    "Items": [{
      "_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": {
    "Items": [{
      "_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": {
    "Items": [{
      "_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": {
    "Items": [{
      "_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": {
    "Items": [
      {
        "_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",
    "Items": [{
      "_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"
    }]
  }
}