How to Put a Custom Widget into a Custom Menu

[sboudreaux96]

Hello - I have a custom menu item I created next to File, Edit, etc. (it is just like sample-menu from the api-samples) and I wanted to know how I would go about adding my custom widget to that custom menu?

[vince-fugnitto]

@sboudreaux96 use the API to register menus (https://eclipse-theia.github.io/theia/docs/next/classes/core.menumodelregistry-1.html) like in the example:

theia/examples/api-samples/src/browser/menu/sample-menu-contribution.ts

Lines 48 to 73 in 6afae9e

	registerMenus(menus: MenuModelRegistry): 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
	});
	menus.registerMenuAction(subMenuPath, {
	commandId: SampleCommand.id,
	order: '0'
	});
	menus.registerMenuAction(subMenuPath, {
	commandId: SampleCommand2.id,
	order: '2'
	});
	const subSubMenuPath = [...subMenuPath, 'sample-sub-menu'];
	menus.registerSubmenu(subSubMenuPath, 'Sample sub menu', { order: '2' });
	menus.registerMenuAction(subSubMenuPath, {
	commandId: SampleCommand.id,
	order: '1'
	});
	menus.registerMenuAction(subSubMenuPath, {
	commandId: SampleCommand2.id,
	order: '3'
	});
	const placeholder = new PlaceholderMenuNode([...subSubMenuPath, 'placeholder'].join('-'), 'Placeholder', { order: '0' });
	menus.registerMenuNode(subSubMenuPath, placeholder);
	}

You can create a command that simply opens your view when executed, and add it to your custom menu.

[vince-fugnitto]

You can take a look how the getting-started widget is added to the help menu for an example as well:

theia/packages/getting-started/src/browser/getting-started-contribution.ts

Lines 59 to 72 in 31f78ef

	registerCommands(registry: CommandRegistry): void {
	registry.registerCommand(GettingStartedCommand, {
	execute: () => this.openView({ reveal: true }),
	});
	}
	registerMenus(menus: MenuModelRegistry): void {
	menus.registerMenuAction(CommonMenus.HELP, {
	commandId: GettingStartedCommand.id,
	label: GettingStartedCommand.label,
	order: 'a10'
	});
	}
	}

[sboudreaux96]

with these methods I can just give the id of my widget within the custom menu (as shown in the first example you gave) and it would work? I am just making sure because when I create a widget it uses super.registerMenus(menus) within the registerMenus() function

[vince-fugnitto]

You have everything to try :) If there are issues you can debug through it but it should be straightforward as in the example.