Is it possible to edit a panel's fly-out menu with new "label" values?

I would like to update the fly-out menu on one of my panel plugins when the user selects a different language. Is it possible to edit the “label” on a fly-out menu item when this happens?

Here’s some sample code:

entrypoints.setup ({
    plugin: {
        create(plugin) {},
        destroy(plugin) {},
    },
    panels: {
        myPanel: {
            create() { },  
            show(event) {},
            hide(event) {},   //not working
            destroy() {},  //not working
            invokeMenu(id) {handleFlyout(id); },
            menuItems: [                
                {id: "spacer1", label: "-"},  //SPACER                
                {id: "tutorial", label: "Instructions"},                
                {id: "spacer2", label: "-"},  //SPACER     
            ]
        }
    },
    commands: []               
})  //end fly-out menu set up

In this case, I want to change

label: "Instructions"

to

label: "Instrucciones"

when the user chooses “Español” as their preferred language. Users can choose their language after the panel is loaded, so updating the fly-out menu would need to occur AFTER the user selects their language from the panel.

I tried saving the updated value to permanent storage once the user selects their language, and then reloading the panel and reading it back in as a variable, and then calling this variable as the “label:” value, but that doesn’t seem to work. I get the error

Uncaught TypeError: Cannot read properties of null (reading 'menuItems')

I’m out of ideas and wonder if anyone else has any?

Solved it. If I change the language inside the fly-out menu, I can set the fly-out menu event handler to make the change:

switch (id) {
        case "English":
            menuItems.getItem(id).checked = true;
            menuItems.getItem("Spanish").checked = false;
            menuItems.getItem("tutorial").label = "Instructions"  
            break;
        case "Spanish":
            menuItems.getItem("English").checked = false;
            menuItems.getItem(id).checked = true;
            menuItems.getItem("tutorial").label = "Instrucciones"   
}
1 Like