ActionBar¶

The ActionBar is the navigation bar located at the top of a page. Action items can be added to the action bar to execute actions relevant to the page context. A back navigation button is automatically added to the ActionBar during navigation. If too many items populate the ActionBar, an overflow button automatically appears in the top right corner, displaying excess items as a popover menu. The maximum number of visible items depends on the device type (tablet or phone) and the item type (text or icon). On a tablet, the maximum number of visible items, including the overflow button, is 4 for icons only and 3 if a text item is present. On a mobile phone, the maximum number of visible items, including the overflow button, is 3 for icons only and 2 if a 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; on Android, the same background color is applied to the status bar as well. Not applicable for iOS 26 and above with Liquid Glass enabled.) 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.

When assigning a rule to a property of ActionBar, the rule will be passed an instance of the following proxy class as an argument:

ActionBarProxy

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
PreferredCaptionSize	`enum`	No	"Small"
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.

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 maximum size allowed is 24dp height x 48dp width. On Android, Logo can only be displayed if there is no SideDrawer and no back navigation button, maximum size allowed is 24dp height x 48dp 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

PreferredCaptionSize¶

iOS and Android only. Choose one of options based on your preferred size of the action bar.

type: enum
default: "Small"

The value of this property must be one of the known values listed below.

Value	Description
`Large`	Display in large caption mode. When set, the `Subhead` property will be ignored.
`Medium`	Android only. Display in medium caption mode.
`Small`	Display in small caption mode.

PrefersLargeCaption¶

[Deprecated. Use PreferredCaptionSize instead.] 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. Not applicable for iOS 26 and above with Liquid Glass enabled.

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"
      },
      {
        "Position": "Right",
        "Icon": "/MDKApp/Images/profile.png",
        "Width": 24.5,
        "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;
}