Skip to content

Context menu

Controls the global context menu. Extends MessageHub.

Basic Usage

If you are using the standard Dirigible view configuration, context menu support is automatically enabled.

If the view is expected to work outside the platform, then you must include platformContextMenu in your view:

const exampleView = angular.module('exampleView', [
    'blimpKit',
    'platformView',
    'platformContextMenu'
]);

If you are making a custom view, you can include the API using the web link above.

To initialize it:

const contextMenuHub = new ContextMenuHub();

<body>
    <context-menu></context-menu>
</body>

Note

Use the context-menu tag only if the view is expected to work outside Dirigible.

You can capture all right-click events, on a perticular element, using the ng-on-contextmenu directive:

<div ng-on-contextmenu="showContextMenu($event)"></div>

$scope.showContextMenu = (event) => {
    event.preventDefault(); // Prevent default context menu
    contextMenuHub.showContextMenu({
        ariaLabel: 'example contextmenu',
        posX: event.clientX,
        posY: event.clientY,
        icons: true,
        items: [
            {
                id: 'item1',
                label: 'Item 1',
                iconClass: 'sap-icon--information',
                separator: true
            },
            {
                id: 'item2',
                label: 'Item 2',
                iconPath: '/path/to/image.svg',
                items: [
                    {
                        id: 'item3',
                        label: 'Item 3',
                        iconClass: 'sap-icon--information',
                        disabled: true
                    },
                    {
                        id: 'item4',
                        label: 'Item 4',
                        iconClass: 'sap-icon--information',
                        disabled: false
                    }
                ]
            },
        ]
    }).then((id) => {
        if (id) console.log(`You selected context menu item with id '${id}'`);
    });
};

Functions

Function Description Returns
showContextMenu(MenuObject) Opens a global menu. Promise
onContextMenu(handlerFunc) Registers a listener. Triggered when a context menu should be shown. Returns a function to unregister the listener. function

Typedefs

MenuItem : Object
MenuSublist : Object
MenuObject : Object

Note

Params in square brackets are optional.

Menu item parameter.

Properties

Name Type Description
id string Id of the item.
label string Label for the item.
[leftIconClass] string CSS icon class. Icon will be shown before the label.
[rightIconClass] string CSS icon class. Icon will be shown after the label.
[leftIconPath] string Icon url path. Icon will be shown before the label.
[rightIconPath] string Icon url path. Icon will be shown after the label.
[shortcut] string Secondary text. Most often used as a shotcut hint.
[separator] boolean Set a menu item separator after this item.
[disabled] boolean Disable the menu item.

Menu sublist parameter.

Properties

Name Type Description
id string Id of the sublist.
label string Label for the sublist.
[separator] boolean Set a menu item separator after this item.
[iconClass] string CSS icon class. Icon will be shown before the label.
[iconPath] string Icon url path. Icon will be shown before the label.
items Array.<(MenuItem|MenuSublist)> List of menu items and/or sublists.
[disabled] boolean Disable the sublist.

Main menu parameter.

Properties

Param Type Default Description
ariaLabel string Accessibility text.
posX number The position of the cursor at the X axis.
posY number The position of the cursor at the Y axis.
[icons] boolean false If the contextmenu items have icons.
items Array.<(MenuItem|MenuSublist)> List of menu items and/or sublists.

Example

For a full example you can look at sample-platform.