Tutorial: Window.showPopupMenu

Window.showPopupMenu

Shows a popup menu. Items can be 'normal', 'separator', 'checkbox', 'submenu'. Returns a promise which resolves once the user either makes a selection or closes the menu.

Showing a menu programmatically

This could be used to show a drop down menu over views in a platform window, for example.

const template = [
    {
        label: 'Menu Item 1',
        data: 'hello from item 1'
    },
    { type: 'separator' },
    {
        label: 'Menu Item 2',
        type: 'checkbox',
        checked: true,
        data: 'The user clicked the checkbox'
    },
    {
        label: 'see more',
        enabled: false,
        submenu: [
            { label: 'submenu 1', data: 'hello from submenu' }
        ]
    }
]
fin.me.showPopupMenu({ template }).then(r => {
    if (r.result === 'closed') {
        console.log('nothing happened');
    } else {
        console.log(r.data)
    }
})

Overriding the built in context menu

Note that this can be done per element or document wide.

document.addEventListener('contextmenu', e => {
    e.preventDefault();
    const template = [
        {
            label: 'Menu Item 1',
            data: 'hello from item 1'
        },
        { type: 'separator' },
        {
            label: 'Menu Item 2',
            type: 'checkbox',
            checked: true,
            data: 'The user clicked the checkbox'
        },
        {
            label: 'see more',
            enabled: false,
            submenu: [
                { label: 'submenu 1', data: 'hello from submenu' }
            ]
        }
    ]
    fin.me.showPopupMenu({ template, x: e.x, y: e.y }).then(r => {
        if (r.result === 'closed') {
            console.log('nothing happened');
        } else {
            console.log(r.data)
        }
    })
})