context-menu

Overview

Version compatibility

context-menu was introduced in version 4.57.0 of the JourneyApps Runtime.

The context-menu is accessible via the ‘more’ icon on the right-hand-side of the app title bar.

context-menu should be used to display contextual items or actions relevant to the current view. Items that are relevant to the app globally (e.g. About, Messages, selecting a different language) should rather be displayed in the navigation drawer.

Referencing the image above, a context-menu consists of:

1. Custom item elements
2. divider elements
3. Non-customizable app items, which are provided by the JourneyApps Runtime

Basic Example

main.view.xml

<context-menu>
    <item label="Video Tutorials" on-press="$:navigate.link('video_tutorials')" />
    <item label="FAQ" on-press="$:navigate.link('faq')" />
    <!-- A `divider` element will automatically be added to separate the above items -->
    <!-- from non-customizable app items, e.g. 'Diagnostics' -->
</context-menu>

Standard Attributes

None

Advanced Attributes

from-js

Optional

Default: unset

Construct a context-menu from JavaScript/TypeScript using a $:function that returns a contextMenu object.

main.view.xml

<context-menu from-js="$:buildContextMenu()" />

main.js

function buildContextMenu() {
    var icons = ["fa-play", "fa-question-circle"];
    var paths = ["video_tuts", "faq"]

    return component.contextMenu({
        items: ["Video Tutorials", "FAQ"].map(function(name, index) {
            return component.contextMenuItem({
                label: name,
                icon: icons[index],
                onPress: function() {
                    navigate.link(paths[index]);
                }
            });
        })
    });
}

id

id

items

Optional

Default: unset

Construct context-menu items from Javascript/TypeScript using a $:function that returns an object array of type contextMenuItem.

item elements can also be added individually to the context-menu, see their reference documentation.

main.view.xml

<context-menu items="$:buildContextItems()" />

main.js

function buildContextItems() {
    var icons = ["fa-play", "fa-question-circle"];
    var paths = ["video_tuts", "faq"]

    return ["Video Tutorials", "FAQ"].map(function(name, index) {
        return component.contextMenuItem({
            label: name,
            icon: icons[index],
            onPress: function() {
                navigate.link(paths[index]);
            }
        });
    });
}

show-if and hide-if

show-if

hide-if

Component Methods

The following component methods are available when an id is assigned to the component and component.contextmenu({id:'my-id'}) is called from JS/TS:

select

Programmatically select an item from the context-menu by its label.

main.view.xml

<context-menu id="my-id">
    <item label="Video Tutorials" on-press="$:navigate.link('tutorials')" />
    <item label="FAQ" icon="fa-help" on-press="$:navigate.link('faq')" />
</context-menu>

main.js

function init() {
    // Register a keyboard shortcut to trigger the component method
    ShortcutManager.registerShortcut("CTRL+T", function() { 
        return selectFAQ();
    });
}

function selectTutorials() {
    component.contextmenu({id: 'my-id'}).select('Video Tutorials');
}