Skip to content

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
Caption string Optional
Icon Optional
IconText string Optional
IsIconCircular boolean Optional false
OnPress Optional
Position string Required
Style string Optional
SystemItem Optional
Visible boolean Optional true

Caption

This attribute acts as the placeholder text when Icon image fails to render due to some reason (missing/failed). In Android, the Caption is required even if the SystemItem or Icon is defined, because in overflow menu, only Caption will be displayed.

  • type: string

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).

IconText

If Icon is absent or fails to download and if Caption 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.

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 Caption and Icon.

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