Skip to content

PopoverMenu

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

The properties defined in Action are also applicable to this action.

PopoverMenu Properties

Property Type Required
Message string Optional
PopoverItems object[] Required
Title string Optional
_Type const Required

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 Optional true
Icon Optional
OnPress Optional
Style string Optional
Title string Required
Visible boolean Optional 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

Style

The string value is a style class name for Icon. The style is applicable to SAP icon / font icon types (Supported CSS properties are font-size and color).

  • type: string

Title

Title of the popover menu

  • type: string

Visible

If false, item is hidden.

  • type: boolean
  • default: true

Title

Title of the popover menu.

  • type: string

_Type

  • type: const

The value of this property must be equal to:

"Action.Type.PopoverMenu"

Action Result

The ActionResult of this action is the OnPress action result of the pop-over item.


Examples

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

// Popover.action with font icon and styling
{
  "Title": "Leave request actions",
  "Message": "Select one action from the list",
  "PopoverItems": [
    {
      "Title": "Approve",
      "Icon": "sap-icon://product",
      "Style": "font-icon-class",
      "OnPress": "/MDKApp/Actions/UpdateService.action",
    },
    {
      "Title": "Reject",
      "Icon": "font://",
      "Style": "font-icon-class",
      "OnPress": "/MDKApp/Actions/FailureMessage.action",
    },
  ],
  "_Type": "Action.Type.PopoverMenu"
}

Style Classes Definition

.font-icon-class {
  font-size: 4;
  color: red;
}