PopoverMenu¶

You can create a customized popover menu containing a list of items and corresponding events.

All the properties defined under Action are applicable to this action.

PopoverMenu Properties¶

IconPosition¶

This property works on Android only.

• type: enum
• default: Leading

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

IsBottomSheet¶

If true, Popover displays as bottom sheet. This property works on Android only.

• type: boolean
• default: false

Message¶

Text that appears on the popover menu.

• type: string

PopoverItems¶

Array of items that appears on the popover menu

• type: object[]

All items must be of the type: object with following properties:

Enabled¶

If false, item is disabled.

• type: boolean
• default: true

Icon¶

Text or icon that appears on the popover menu

• type: Image

OnPress¶

Action that is triggered when item is selected

• type: ActionOrRule
• Formatter and Binding are not supported

Styles_¶

Set styles for title and icon.

• type: object with following properties:

Icon¶

The string value is a style class name of Icon.

• Image style class

Title¶

The string value is a style class name of Title.

• Text style class

TextAlignment¶

Text alignment of the PopoverItems Title.

• type: enum
• default: "Center"

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

Title¶

Title of the popover menu

• type: string

Visible¶

If false, item is hidden.

• type: boolean
• default: true

Styles¶

Set styles for Popover Menu. Font color for title and message is not supported on iOS

• type: object with following properties.

Title¶

The string value is a style class name of Title.

• Text style class

Message¶

The string value is a style class name of Message.

• Text style class

PopoverMenu¶

The string value is a style class name of PopoverMenu.

• Text style class

TextAlignment¶

Text alignment of the Title and the Message

• type: enum
• default: "Center"

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

TextAlignment Known Values¶

Title¶

Title of the popover menu.

• type: string

_Type¶

• type: const

The value of this property must be:

"Action.Type.PopoverMenu"

Action Result¶

Refer to the MDK Guide to understand what an action result is.

The success ActionResult of this action is the OnPress action result of the pop-over item. The failure ActionResult is an error message.

Examples¶

// Popover.action
{
  "Title": "Leave request actions",
  "Message": "Select one action from the list",
  "TextAlignment": "Right",
  "IconPosition": "Trailing",
  "IsBottomSheet": false,
  "PopoverItems": [
    {
      "Title": "Approve",
      "Icon": "approve.png",
      "TextAlignment": "Left",
      "OnPress": "/MDKApp/Actions/UpdateService.action",
    },
    {
      "Title": "Reject",
      "Icon": "reject.png",
      "TextAlignment": "Right",
      "OnPress": "/MDKApp/Actions/FailureMessage.action",
    },
  ],
  "_Type": "Action.Type.Popover"
}

// Popover menu with styling
{
  "Title": "Leave request actions",
  "Message": "Select one action from the list",
  "Styles": {
    "Title": "popover-title-style",
    "Message": "popover-message-style",
    "PopoverMenu": "background-critical"
  },
  "PopoverItems": [
    {
      "Title": "Approve",
      "Icon": "sap-icon://product",
      "Styles": {
        "Title": "popover-action-title-style1",
        "Icon": "popover-action-icon-style1"
      },
      "OnPress": "/MDKApp/Actions/UpdateService.action",
    },
    {
      "Title": "Reject",
      "Icon": "font://",
      "Styles": {
        "Title": "popover-action-title-style2",
        "Icon": "popover-action-icon-style2"
      },
      "OnPress": "/MDKApp/Actions/FailureMessage.action",
    },
  ],
  "_Type": "Action.Type.PopoverMenu"
}

Style Classes Definition¶

.popover-title-style {
  font-size: 22;
  font-color: red;
}

.popover-message-style {
  font-size: 14;
  font-color: blue;
  font-name: italicSystem;
  font-style: italic;
  font-typeface: italic;
}

.popover-action-title-style1 {
  font-color: red;
}

.popover-action-title-style2 {
  font-color: blue;
}

.popover-action-icon-style1 {
  font-size: 20;
  color: red;
  background-color: rgb(255, 0, 200);
}

.popover-action-icon-style2 {
  font-size: 20;
  color: blue;
  background-color: yellow;
}