Skip to content

FioriToolbar

A Fiori Toolbar is a horizontal bar displaying at the bottom of the page which can include buttons or icons as toolbar items.

FioriToolbar Properties

Property Type Required Default
HelperText string No
Items complex No
OverflowIcon Image No
Styles object No
Visible boolean No true
_Name string Yes
_Type const Yes

HelperText

Sets the helper text of the Toolbar. For Android, the HelperText is only supported if there are 2 items defined, and the HelperText would be displayed at the center between the 2 items.

  • type: string

Items

Limited to a maximum of 2 items on phone and 3 items on tablet. Excess items are accessible through overflow button. The items are automatically aligned in right to left order, so the first item in the array would always appear on the right most position. For iOS, in phone view, the buttons are equally distributed across the container of the toolbar, while for tablet view, the buttons are aligned to the right side of the container to provide convenient access to the buttons.

  • type: complex

Items Value

Any following options needs to be fulfilled.

Option 1

Array of fiori toolbar items.

Array type:

All items must be of the type:

Option 2

Expects return of FioriToolbarItem in array format.


OverflowIcon

Not supported on Android. The icon to be displayed on overflow button. Default is ellipsis icon.


Styles

Set styles for toolbar.

  • type: object with following properties.
Property Type Required Default
FioriToolbar string No
HelperText string No
OverflowIcon string No

FioriToolbar

The string value is a style class name of FioriToolbar. It is used to set the background color of the toolbar.

HelperText

The string value is a style class name of HelperText. It is used to style the HelperText text on the toolbar.

OverflowIcon

The string value is a style class name of OverflowIcon.


Visible

Set the visibility of the Toolbar.

  • type: boolean
  • default: true

_Name

  • type: string

_Type

  • type: const

The value of this property must be:

"Control.Type.FioriToolbar"

Examples

// FioriToolbar with Buttons
{
  "_Type": "Page",
  "Caption": "ToolBarPage",
  "FioriToolbar": {
    "_Name": "NewFioriToolbar",
    "_Type": "Control.Type.FioriToolbar",
    "HelperText": "helper text",
    "OverflowIcon": "sap-icon://share",
    "Items": [
      {
        "_Type": "FioriToolbarItem.Type.Button",
        "_Name": "submitButton",
        "Title": "Submit",
        "ButtonType": "Primary",
        "ImagePosition": "Leading",
        "OnPress": "/MDKDevApp/Actions/Messages/MessageButton.action"
      },
      {
        "_Type": "FioriToolbarItem.Type.Button",
        "_Name": "shareButton",
        "Title": "Share",
        "OnPress": "/MDKDevApp/Actions/Messages/MessageButton.action"
      },
      {
        "_Type": "FioriToolbarItem.Type.Button",
        "_Name": "discardButton",
        "Title": "Discard",
        "OnPress": "/MDKDevApp/Actions/Messages/MessageButton.action"
      },
      {
        "_Type": "FioriToolbarItem.Type.Button",
        "_Name": "button4",
        "Title": "Save Draft",
        "ButtonType": "Secondary",
        "Image": "sap-icon://customer-and-supplier",
        "ImagePosition": "Trailing",
        "OnPress": "/MDKDevApp/Actions/Messages/MessageButton.action"
      }
    ]
  },
  "Controls": []
}

// FioriToolbar with Icons
{
  "_Type": "Page",
  "Caption": "ToolBarPage",
  "FioriToolbar": {
    "_Name": "NewFioriToolbar",
    "_Type": "Control.Type.FioriToolbar",
    "HelperText": "helper text",
    "OverflowIcon": "sap-icon://share",
    "Items": [
      {
        "_Type": "FioriToolbarItem.Type.Icon",
        "_Name": "icona",
        "OnPress": "/MDKDevApp/Actions/Messages/MessageIcon.action",
        "Icon": "/MDKDevApp/Images/extension.png"
      }, {
        "_Type": "FioriToolbarItem.Type.Icon",
        "_Name": "iconb",
        "OnPress": "/MDKDevApp/Actions/Messages/MessageIcon.action",
        "Icon": "/MDKDevApp/Images/extension.png"
      }
    ]
  },
  "Controls": []
}

## Styling Examples

// FioriToolbar Styles
{
  "_Type": "Page",
  "Caption": "ToolBarPage",
  "FioriToolbar": {
    "_Name": "NewFioriToolbar",
    "_Type": "Control.Type.FioriToolbar",
    "HelperText": "helper text",
    "OverflowIcon": "sap-icon://share",
    "Styles": {
      "FioriToolbar": "fiori-toolbar-1",
      "HelperText": "fiori-toolbar-helpertext-1",
      "OverflowIcon": "font-icon-class"
    },
    "Items": [
      {
        "_Type": "FioriToolbarItem.Type.Button",
        "_Name": "submitButton",
        "Title": "Submit",
        "ButtonType": "Primary",
        "ImagePosition": "Leading",
        "OnPress": "/MDKDevApp/Actions/Messages/MessageButton.action"
      },
      {
        "_Type": "FioriToolbarItem.Type.Button",
        "_Name": "shareButton",
        "Title": "Share",
        "OnPress": "/MDKDevApp/Actions/Messages/MessageButton.action"
      },
      {
        "_Type": "FioriToolbarItem.Type.Button",
        "_Name": "discardButton",
        "Title": "Discard",
        "OnPress": "/MDKDevApp/Actions/Messages/MessageButton.action"
      },
      {
        "_Type": "FioriToolbarItem.Type.Button",
        "_Name": "button4",
        "Title": "Save Draft",
        "ButtonType": "Secondary",
        "Image": "sap-icon://customer-and-supplier",
        "ImagePosition": "Trailing",
        "OnPress": "/MDKDevApp/Actions/Messages/MessageButton.action"
      }
    ]
  },
  "Controls": []
}

// FioriToolbar with Buttons and Styles
{
  "_Type": "Page",
  "Caption": "ToolBarPage",
  "FioriToolbar": {
    "_Name": "NewFioriToolbar",
    "_Type": "Control.Type.FioriToolbar",
    "HelperText": "helper text",
    "OverflowIcon": "sap-icon://share",
    "Items": [
      {{
        "_Type": "FioriToolbarItem.Type.Button",
        "_Name": "submitButton",
        "Title": "Submit",
        "ButtonType": "Primary",
        "ImagePosition": "Leading",
        "Styles": {
          "Image": "font-icon-class",
          "Button": "headerItemTextButton"
        },
        "OnPress": "/MDKDevApp/Actions/Messages/MessageButton.action"
      },
      {
        "_Type": "FioriToolbarItem.Type.Button",
        "_Name": "shareButton",
        "Title": "Share",
        "OnPress": "/MDKDevApp/Actions/Messages/MessageButton.action",
        "Styles": {
          "Button": "headerItemTextButton"
        }
      },
      {
        "_Type": "FioriToolbarItem.Type.Button",
        "_Name": "discardButton",
        "Title": "Discard",
        "Styles": {
          "Button": "Styles2Button"
        },
        "OnPress": "/MDKDevApp/Actions/Messages/MessageButton.action"
      },
      {
        "_Type": "FioriToolbarItem.Type.Button",
        "_Name": "button4",
        "Title": "Save Draft",
        "ButtonType": "Secondary",
        "Image": "sap-icon://customer-and-supplier",
        "ImagePosition": "Trailing",
        "OnPress": "/MDKDevApp/Actions/Messages/MessageButton.action"
      }
    ]
  },
  "Controls": []
}

// FioriToolbar with Icons and Styles
{
  "_Type": "Page",
  "Caption": "ToolBarPage",
  "FioriToolbar": {
    "_Name": "NewFioriToolbar",
    "_Type": "Control.Type.FioriToolbar",
    "HelperText": "helper text",
    "OverflowIcon": "sap-icon://share",
    "Items": [
      {
        "_Type": "FioriToolbarItem.Type.Icon",
        "_Name": "icona",
        "OnPress": "/MDKDevApp/Actions/Messages/MessageIcon.action",
        "Icon": "sap-icon://edit",
        "Styles": {
          "Icon": "font-icon-class"
        }
      }, {
        "_Type": "FioriToolbarItem.Type.Icon",
        "_Name": "iconb",
        "OnPress": "/MDKDevApp/Actions/Messages/MessageIcon.action",
        "Icon": "sap-icon://home",
        "Styles": {
          "Icon": "font-icon-class"
        }
      }
    ]
  },
  "Controls": []
}

Style Classes Definition

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

.fiori-toolbar-1 {
  background-color: yellow;
}

.fiori-toolbar-helpertext-1 {
  font-color: @mdkRed1;
  font-style: italic;
}