Multiple Items in Context Menu

[gjeremenko]

How am I able to have multiple items in the context menu?

I have tried both examples of the multiple item context menu at:

context-menu

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

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

AND 

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

However, none of them work and no additional items are added to the context menu.

I currently use the following code works, though limits me to one context menu item.

return component.contextMenuItem({
        label: 'Main Menu',
        icon: 'fa-home',
        onPress: function() {
            goBack('clear');
        },
    });

[anon31687946]

The first buildContextItems() function is missing a return and should rather be:

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

[gjeremenko]

Great! Thank you.

You may want to have someone update the docs page here:

JourneyApps Documentation

G

[machiel]

@gjeremenko I have been able to create a custom context menu using the second example you’ve posted. I’ve embellished the code example a bit to add some “static” items too. Tested on v4.76 and higher.

XML:

<?xml version="1.0" encoding="UTF-8"?>
<view title="context_menu">
    <context-menu from-js="$:buildContextMenu()" >
        <item label="Test" on-press="$:init()" />
        <divider />
    </context-menu>
</view>

JS:

function init() {
}

function resume(from) {
}

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

Gave me the following: