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]);
}
});
})
});
}

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

Last modified 5mo ago