Skip to content

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.

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.

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.

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"
    }]
  }
}