Skip to content

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.


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


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.


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.


OverflowIcon

iOS only. The icon is to replace the overflow button icon (default ellipsis).


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.

Caption

The string value is a style class name of Caption. It is used to style the Caption text on the actionbar.

Subhead

The string value is a style class name of Subhead. It is used to style the Subhead text on the actionbar.

Logo

The string value is a style class name of Logo.

OverflowIcon

iOS only. The string value is a style class name of OverflowIcon.


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;
}