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
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://&#xe05a;",
        "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://&#xe05a;",
        "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;
}