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 Default
Items ToolBarItem No
Visible boolean No true

Items

Toolbar items

  • type: ToolBarItem[]

All array items must be of the type: ToolBarItem

Visible

Set the visibility of the ToolBar.

  • type: boolean
  • default: true

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

// ToolBar not visible
{
  "_Type": "Page",
  "Caption": "ToolBarPage",
  "Visible": false,
  "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://",
      "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"
    }]
  }
}

// toolbar items with font icon and style example
{
  "_Type": "Page",
  "Caption": "ToolbarPage",
  "Controls": [],
  "ToolBar": {
    "Items": [
      {
        "_Name": "FontIconWithStyling",
        "_Type": "Control.Type.ToolbarItem",
        "Caption": "Font Icon (Styled)",
        "Icon": "sap-icon://home",
        "OnPress": "/MDKDevApp/Actions/Messages/Message.action",
        "Style": "font-icon-class"
      },
      {
        "_Name": "FontIconWithoutStyling",
        "_Type": "Control.Type.ToolbarItem",
        "Caption": "Font Icon (Normal)",
        "Icon": "sap-icon://home",
        "OnPress": "/MDKDevApp/Actions/Messages/Message.action"
      }
    ]
  },
}

Style Classes Definition

.font-icon-class {
  font-size: 4;
  color: red;
}