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"
IsBottomSheet	`boolean`	No	false
Message	`string`	No
PopoverItems	`object[]`	Yes
Styles	`object`	No
TextAlignment	`enum`	No	"Center"
Title	`string`	No
_Type	`const`	Yes

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.

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

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:

Property	Type	Required
Icon	Image	No
Title	`string`	Yes
Enabled	`boolean`	No
Visible	`boolean`	No
OnPress	ActionOrRule	No
TextAlignment	`enum`	No
Styles	`object`	No

Icon¶

Text or icon that appears on the popover menu

type: Image

Title¶

Title of the popover menu

type: string

Enabled¶

If false, item is disabled.

type: boolean

Visible¶

If false, item is hidden.

type: boolean

OnPress¶

Action that is triggered when item is selected

type: ActionOrRule
Formatter and Binding are not supported

TextAlignment¶

Text alignment of the PopoverItems Title.

type: enum

Styles¶

Set styles for title and icon.

type: object

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
Title	string	No
Message	string	No
PopoverMenu	string	No

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.

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",
  "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://&#xe078;",
      "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;
}