Skip to content

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

Property Type Required Default
IconPosition enum No "Leading"
Message string No
PopoverItems object[] Yes
Styles object No
TextAlignment enum No "Center"
Title string No
_Type const Yes

IconPosition

This property just support on Android.

  • type: enum
  • default: Leading

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

Value Description
Leading Icon display in front of the title.
Trailing Icon display after Title.

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:

Property Type Required Default
Enabled boolean No true
Icon No
OnPress No
Styles object No
TextAlignment string No "Center"
Title string Yes
Visible boolean No true

Enabled

If false, item is disabled.

  • type: boolean
  • default: true

Icon

Text or icon that appears on the popover menu

OnPress

Action that is triggered when item is selected

Styles_

Set styles for title and icon.

  • type: object with following properties:
Property Type Required
Icon string No
Title string No

Icon

The string value is a style class name of Icon.

Title

The string value is a style class name of Title.

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.

Value Description
Left
Right
Center

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.
Property Type Required Default
Title string No
Message string No
PopoverMenu string No

Title

The string value is a style class name of Title.

Message

The string value is a style class name of Message.

PopoverMenu

The string value is a style class name of PopoverMenu.


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

Value Description
Left
Right
Center

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