MenuActions based on data recieved from backend

#1

I am trying to populate a sub menu in main menu bar at the top. The number of menu actions in the submenu will be dependent on the data that is received from the backend. Is it possible to dynamically load menu actions based on json data received from backend? If not, is there any other way?

I modified the example in this post to fit my use-case but it does not work: Menu contributions depending on the backend

Registering command on-the-fly
#2

Yes, it is possible. What did you try? Something like this should help:


    @inject(MenuModelRegistry)
    menuModel: MenuModelRegistry;

    @inject(CommandRegistry)
    commandRegistry: CommandRegistry;

    readonly toDisposeBeforeMenuUpdate = new DisposableCollection();

    onYouHaveReceivedSomethingFromTheBackend(data: object): void {
        this.toDisposeBeforeMenuUpdate.dispose();
        this.toDisposeBeforeMenuUpdate.push(this.commandRegistry.registerCommand({ id: 'some-id-from-the-data' }, { execute: () => { /* NOOP */ }}));
        this.menuModel.registerMenuAction(['some', 'path'], { commandId: 'some-id-from-the-data' });
        this.toDisposeBeforeMenuUpdate.push(Disposable.create(() => this.menuModel.unregisterMenuNode('some-id-from-the-data')));
    }
#3

Thank you for the example. I am trying to implement this example in the front-end, inside MenuContribution, like this:

@injectable()
export class SerialMenuContribution implements MenuContribution {
@inject(CommandRegistry)
commands: CommandRegistry;

// Constructor creating instance of backend 
constructor(@inject(SerialService) protected readonly serialService: SerialService) { }

readonly disposeMenuUpdate = new DisposableCollection();

async registerMenus(menus: MenuModelRegistry): Promise<void> {
    const subMenuPath = [...MAIN_MENU_BAR, 'sample-menu'];

    menus.registerSubmenu(subMenuPath, 'Sample Menu', {
        order: '2' // that should put the menu right next to the File menu
    });

    // Data being fetched from the backend. Returns array of objects.
    const devices = await this.serialService.getUsbDevices()

    this.disposeMenuUpdate.dispose();
    devices.forEach((item: any) => {
        this.disposeMenuUpdate.push(this.commands.registerCommand(
            { id: item.path }, { execute: () => console.log("Hello" + item.path) }
        ));
        menus.registerMenuAction(subMenuPath, { commandId: item.path })
        this.disposeMenuUpdate.push(
            Disposable.create(() => menus.unregisterMenuNode(item.path))
        );
    })