ActionBar¶
ActionBar is the navigation bar that appear at the top of a page. Action items can be added to the action bar to execute actions on the context of the page. Back navigation button will be automatically added to the action bar when navigation occurred.
ActionBar Properties¶
Property | Type | Required |
---|---|---|
Items | object[] |
Optional |
Items¶
Each item represents a button displayed in the navigation bar.
- type:
object[]
All items must be of the type: object
with following properties:
Property | Type | Required | Default |
---|---|---|---|
Icon |
Optional | ||
IconText |
string | Optional | |
IsIconCircular |
boolean | Optional | false |
OnPress |
Optional | ||
Position |
string | Required | |
Style |
string | Optional | |
SystemItem |
Optional | ||
Text |
string | Optional | |
Visible |
boolean | Optional | true |
Icon¶
Icon provided must have the correct size. Expected iOS sizes can be found here. The size of an action bar icon on Android is fixed at 24dp (both width and height).
- type: Image
IconText¶
If Icon
is absent or fails to download and if Text
property is missing, IconText
property is used to render a
text-based Avatar image.
- type:
string
IsIconCircular¶
This determines if the Icon
image and/or text-image of IconText
should be circular in shape.
- type:
boolean
- default:
false
OnPress¶
Action/Rule to be triggered when the item is pressed.
- type: ActionOrRule
- Formatter and Binding are not supported
Position¶
Position of the item in the ActionBar. For Android, this is ignored and all items will be placed on the right position except in modal page which allow one item to be on the left.
- type:
enum
The value of this property must be equal to one of the known values below.
Value | Description |
---|---|
Left |
|
Right |
Style¶
The string value is a style class name for Icon
and IconText
. The style is applicable to SAP icon / font icon types
(Supported CSS properties are font-size and color) and text for the IconText
attribute (Supported CSS properties are
font-size, color, and background-color).
- type:
string
SystemItem¶
SystemItem are built-in icons/text that represent common tasks and types of content in a variety of use cases. If present, overwrites Text and Icon.
- type: SystemItem
Text¶
This attribute acts as the placeholder text when Icon
image fails to render due to some reason (missing/failed). In
Android, the Text is required even if the SystemItem or Icon is defined, because in overflow menu, only text will be
displayed.
- type:
string
Visible¶
Set the visibility of this control.
- type:
boolean
- default:
true
Examples¶
{
"_Type": "Page",
"_Name": "ActionBar",
"Caption": "ActionBar",
"ActionBar": {
"Items": [
{
"Position": "Left",
"Text": "Lefty",
"OnPress": "/MDKApp/Actions/Messages/Message.action"
},
{
"Position": "Left",
"SystemItem": "Bookmarks",
"OnPress": "/MDKApp/Actions/Messages/Message.action"
},
{
"Position": "Left",
"Text": "Lefty 2",
"OnPress": "$(PLT,'/MDKDevApp/Actions/Messages/OnPressIOS.action', '/MDKDevApp/Actions/Messages/OnPressAndroid.action','/MDKDevApp/Actions/Messages/OnPressWeb.action')"
},
{
"Position": "Right",
"Text": "Righty",
"OnPress": "/MDKApp/Actions/Messages/Message.action"
},
{
"Position": "Right",
"Icon": "res://map_icon",
"OnPress": "/MDKApp/Actions/Messages/Message.action"
},
{
"Position": "Right",
"Icon": "res://menu_icon",
"OnPress": "/MDKApp/Actions/Messages/Message.action"
},
{
"Position": "Right",
"Icon": "font://",
"Style": "$(PLT,'ios-font-icon-class','android-font-icon-class')",
"OnPress": "/MDKApp/Actions/Messages/Message.action"
},
{
"Position": "Right",
"Icon": "sap-icon://add",
"OnPress": "/MDKApp/Actions/Messages/Message.action"
},
{
"Position": "Right",
"Icon": "/MDKApp/Images/seam.png",
"OnPress": "/MDKApp/Actions/Messages/Message.action"
},
{
"Position": "Right",
"Icon": "https://www.gstatic.com/webp/gallery/1.sm.jpg",
"OnPress": "/MDKApp/Actions/Messages/Message.action"
},
{
"Position": "Right",
"Icon": "res://profile_icon",
"IsIconCircular": true,
"OnPress": "/MDKApp/Actions/Messages/Message.action"
},
{
"Position": "Right",
"Icon": "/MDKApp/Images/profile.png",
"IconText": "PM",
"IsIconCircular": true,
"OnPress": "/MDKApp/Actions/Messages/Message.action"
},
{
"Position": "Right",
"Icon": "/MDKApp/Images/profile.png",
"IconText": "PM",
"OnPress": "/MDKApp/Actions/Messages/Message.action"
},
{
"Position": "Right",
"Icon": "/MDKApp/Images/profile.png",
"IconText": "PM",
"IsIconCircular": true,
"Style": "icon-text-class",
"OnPress": "/MDKApp/Actions/Messages/Message.action"
},
]
},
"Controls": []
}
Style Classes Definition¶
.ios-font-icon-class {
font-size: 17;
color: red;
}
.android-font-icon-class {
font-size: 4;
color: red;
}
.icon-text-class {
font-size: 17;
color: #FF0000;
background-color: #00ff00;
}