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

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

type: Image

IconText¶

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

type: ActionOrRule
Formatter and Binding are not supported

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

type: SystemItem

Text¶

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

type: string

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",
        "Text": "Lefty 2",
        "OnPress": "$(PLT,'/MDKDevApp/Actions/Messages/OnPressIOS.action', '/MDKDevApp/Actions/Messages/OnPressAndroid.action','/MDKDevApp/Actions/Messages/OnPressWeb.action')"
      },
      {
        "Position": "Right",
        "Text": "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;
}