Cascading Menu Example

General Q&A
1

Does anyone have a good example of cascading menu code specifically for a Realwear headset?

2

@jdavidpugh Do you mean like a set of linked lists where your selection in the first drives the options of the second? Like Country → State → County?

3

@tielman I was trying to manage visibility of columns based on which menu I wanted visible.

I came up with this:

function menuCall(value) {
    view.menu = value;
}

/**
 * @param {number} value;
 */
function menuView(value) {
    var menu0, menu1, menu2, menu3, menu4, menu5, menu6, menu7, menu8, menu9, menu10

    if (value == 0) {
        menu0 = true;
    }
    else {
        menu0 = false;
    }
    if (value == 1) {
        menu1 = true;
    }
    else {
        menu1 = false;
    }
    if (value == 2) {
        menu2 = true;
    }
    else {
        menu2 = false;
    }
    if (value == 3) {
        menu3 = true;
    }
    else {
        menu3 = false;
    }
    if (value == 4) {
        menu4 = true;
    }
    else {
        menu4 = false;
    }
    if (value == 5) {
        menu5 = true;
    }
    else {
        menu5 = false;
    }
    if (value == 6) {
        menu6 = true;
    }
    else {
        menu6 = false;

    } if (value == 7) {
        menu7 = true;
    }
    else {
        menu7 = false;
    }
    if (value == 8) {
        menu8 = true;
    }
    else {
        menu8 = false;
    }
    if (value == 9) {
        menu9 = true;
    }
    else {
        menu9 = false;
    }
    if (value == 10) {
        menu10 = true;
    }
    else {
        menu10 = false;
    }

    return { menu0: menu0, menu1: menu1, menu2: menu2, menu3: menu3, menu4: menu4, menu5: menu5, menu6: menu6, menu7: menu7, menu8: menu8, menu9: menu9, menu10: menu10 }
}

This works great…but I just have to believe its a pretty neanderthal method.
In my industrial logic background I would have set bits in a binary “word” that would have triggered the visibility of the column.

Here I just use the helper function returns:

<column show-if="$:menuView(view.menu).menu1">
            <list>
                <list-item>
                    <header>Open Status Filter</header>
                    <content>{openflt}</content>
                    <accent color="primary" />
                    <action on-press="$:menuCall(3)" />
                    <asset icon="fa-filter" />
                </list-item>
                <list-item>
                    <header>Brand Filter</header>
                    <accent color="secondary" />
                    <action on-press="$:menuCall(4)" />
                    <asset icon="fa-filter" />
                </list-item>
                <list-item>
                    <header>Company Filters</header>
                    <accent color="secondary" />
                    <action on-press="$:menuCall(5)" />
                    <asset icon="fa-filter" />
                </list-item>
                <list-item>
                    <header>Page Back</header>
                    <action on-press="$:menuCall(0)" />
                    <accent color="#FF0000" />
                    <asset icon="fa-hand-point-left" />
                </list-item>
            </list>
        </column>

David

4

@tielman If you get a chance check out the punchlist management menus in my app…You will see what I was after…

5

@jdavidpugh As discussed it may be simpler to store the state of each menu (ie either open or closed) in a JS variable that you can then use directly in your show-if logic instead of having to use a function to calculate whether or not the menu is open or closed.

6

@tielman Yes that worked out nicely

var MENU = {
    menu0: true,
    menu1: false,
    menu2: false,
    menu3: false,
    menu4: false,
    menu5: false,
    menu6: false,
    menu7: false,
    menu8: false,
    menu9: false,
    menu10: false
};

/**
 * @param {string} menuNumber;
 */
function menuCall(menuNumber) {
    MENU.menu0 = MENU.menu1 = MENU.menu2 = MENU.menu3 = MENU.menu4 = MENU.menu5 = MENU.menu6 = MENU.menu7 = MENU.menu8 = MENU.menu9 = MENU.menu10 = false;
    MENU[menuNumber] = true;
    // view.menu = value;
}