ActionBar¶
ActionBar is the navigation bar that appears 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. When there are too many items on the ActionBar
, an overflow button would appear automatically on
top right corner which would display the overflown items as popover menu items. The max number of allowed visible items
is based on the device type (tablet or phone) and item type (text or icon). On tablet, the max visible items (including
overflow button) is 4 for icon only items and 3 if text item is present. On phone the max visible items (including
overflow button) is 3 for icon only items and 2 if text item is present.
The ActionBar
can support styling at two different levels:
Application-level styling: This is done by defining a type selector CSS with the predefined type names ActionBar
(using the color property to style the color of the caption, subhead, text items, and icon tint, and the
background-color property to style the background color of the ActionBar
; for Android, the same background color is
applied to the status bar as well) and ActionBarTitle
(to style the caption, large caption, and subhead).
Page-level styling: This is done by defining a CSS class name (class selector) for a subview or property in
ActionBar.Styles
or ActionBar.Items.Style
.
ActionBar Properties¶
Property | Type | Required | Default |
---|---|---|---|
Caption | string |
No | |
CaptionAlignment | enum |
No | "Left" |
DataSubscriptions | DataSubscriptions | No | |
Items | ActionBarItem | No | |
Logo | Image | No | |
OnBackButtonPressed | ActionOrRule | No | |
OverflowIcon | Image | No | |
PrefersLargeCaption | boolean |
No | false |
Styles | object |
No | |
Subhead | string |
No | |
_Name | string |
No | |
_Type | const |
No |
Caption¶
Main caption / title of the page.
- type:
string
CaptionAlignment¶
Android only. Choose one of the options based on how you want to align the Caption
and Subhead
.
- type:
enum
- default:
"Left"
The value of this property must be one of the known values listed below.
CaptionAlignment Known Values¶
Value | Description |
---|---|
Left |
|
Center |
DataSubscriptions¶
Array of data change events to subscribe to.
- type: DataSubscriptions
Items¶
Each item represents a button displayed in the navigation bar. For mobile, by default, all items are positioned to the
right side of ActionBar
. When visible items exceed the max items allowed, an overflow button would automatically be
displayed, excess items can be accessed through popover displayed when the overflow button is pressed. The max items
allowed vary based on several factors. On tablet, icon only items has a maximum of 4 items, while text only items or
mixed items have a maximum of 3 items. On phone, icon only items has a maximum of 3 items, while text only items or
mixed items have a maximum of 2 items.
- type:
ActionBarItem[]
All array items must be of the type: ActionBarItem
Logo¶
The icon can only be displayed on page without back navigation. The icon to be provided as app logo is displayed at the
left most item on ActionBar. On iOS, The logo is displayed after SideDrawer
menu button if app is using SideDrawer
,
the size is fixed at 44dp height x 88dp width. On Android, Logo can only be displayed if there is no SideDrawer and no
back navigation button, the size is fixed at 44dp height x 88dp width.
- type: Image
OnBackButtonPressed¶
This event is triggered when a user presses the back button in the action bar. This event will not be triggered when ClosePage action is triggered or System Back button (Android) is pressed. If a false is returned from the handler then the back navigation is cancelled, if true or void or undefined or null is returned then the back navigation continued.
- type: ActionOrRule
- Formatter and Binding are not supported
OverflowIcon¶
iOS only. The icon is to replace the overflow button icon (default ellipsis).
- type: Image
PrefersLargeCaption¶
iOS and Android only. Set as true to display in large caption mode. This property is ignored if Subhead
is defined.
Specifically for iOS, this property is not supported on page with BottomNavigation, Tabs, SideDrawer, FormCellContainer, or FlexibleColumn as the control.
- type:
boolean
- default:
false
Styles¶
iOS and Android only. Set styles for actionbar.
- type:
object
with following properties.
Property | Type | Required | Default |
---|---|---|---|
ActionBar | string | No | |
Caption | string | No | |
Subhead | string | No | |
Logo | string | No | |
OverflowIcon | string | No |
ActionBar¶
The string value is a style class name of ActionBar
. It is used to set the background color of the actionbar.
- ActionBar style class
Caption¶
The string value is a style class name of Caption
. It is used to style the Caption
text on the actionbar.
- Text style class
Subhead¶
The string value is a style class name of Subhead
. It is used to style the Subhead
text on the actionbar.
- Text style class
Logo¶
The string value is a style class name of Logo
.
- Image style class
OverflowIcon¶
iOS only. The string value is a style class name of OverflowIcon
.
- Image style class
Subhead¶
Sub caption / sub title of the page. When Subhead
is set, the PrefersLargeCaption
property is ignored.
- type:
string
_Name¶
- type:
string
_Type¶
- type:
const
The value of this property must be:
"Control.Type.ActionBar"
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",
"Caption": "Lefty 2",
"OnPress": "$(PLT,'/MDKDevApp/Actions/Messages/OnPressIOS.action', '/MDKDevApp/Actions/Messages/OnPressAndroid.action','/MDKDevApp/Actions/Messages/OnPressWeb.action')"
},
{
"Position": "Right",
"Caption": "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": []
}
Examples (Enhanced)¶
{
"_Type": "Page",
"_Name": "ActionBar",
"ActionBar": {
"Caption": "ActionBar",
"Logo":"res://logo",
"Subhead": "This is subhead",
"PrefersLargeCaption": true,
"Logo": "res://logo",
"OnBackButtonPressed": "/MDKDevApp/Rules/ActionBar/ActionBarMessage.js",
"OverflowIcon": "sap-icon://detail-more",
"DataSubscriptions": ["MyWorkOrderHeaders"],
"Styles": {
"ActionBar": "custom-actionbar-style",
"Caption": "custom-actionbar-caption-style",
"Subhead": "custom-actionbar-subhead-style",
"Logo": "font-icon-class",
"OverflowIcon": "font-icon-class"
},
"Items": [
{
"Position": "Left",
"Text": "Lefty",
"Enabled": false,
"OnPress": "/MDKApp/Actions/Messages/Message.action"
},
{
"Position": "Left",
"SystemItem": "Bookmarks",
"OnPress": "/MDKApp/Actions/Messages/Message.action"
},
{
"Position": "Left",
"Caption": "Lefty 2",
"OnPress": "$(PLT,'/MDKDevApp/Actions/Messages/OnPressIOS.action', '/MDKDevApp/Actions/Messages/OnPressAndroid.action','/MDKDevApp/Actions/Messages/OnPressWeb.action')"
},
{
"Position": "Right",
"Caption": "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;
}
.font-icon-class {
font-size: 8;
color: red;
background-color: #DCE3E8;
}
.custom-actionbar-caption-style {
color: green;
font-size: 16;
/* The following attributes are not supported on iOS */
font-weight: 600;
font-style: normal;
text-decoration: line-through;
}
.custom-actionbar-subhead-style {
color: blue;
font-size: 13;
}
.custom-actionbar-style {
background-color: yellow;
}