Links

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. 1.
    Custom item elements
  2. 2.
    divider elements
  3. 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

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

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');
}
Last modified 9mo ago