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.
- type: Image
Styles¶
Set styles for toolbar.
- type:
objectwith 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.
- FioriToolbar style class
HelperText¶
The string value is a style class name of HelperText. It is used to style the HelperText text on the toolbar.
- Text style class
OverflowIcon¶
The string value is a style class name of OverflowIcon.
- Image style class
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;
}