context-menu
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: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>
None
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]);
}
});
})
});
}
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]);
}
});
});
}
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: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