Insert a component via a menu

Note: This page is for Caplin Trader version 4.0 and above. Using an older version? Go to this page instead.

Here you will add an item to the insert menu you created in the Work with menus (Trader 3.6.3 onwards) page.

As you did with the populateLayoutMenu function, create a populateInsertMenu function, in which you have one item that will insert an FX Majors grid component:

function populateInsertMenu() {
	var model ={
		options: {
			label: ct.i18n(''),
			classifier: 'menu-insert',
			type: 'onclick-submenu'
		items: [
				options: {
					label: ct.i18n('griddefinitions.major_fx'),
					eventName: 'menu-insert-fx-majors',
					classifier: 'menu-insert-fx-majors'
	return model;

then add a matching handler triggered by menu-insert-fx-majors, which creates a grid component and inserts it into the layout:

model.on('menu-insert-fx-majors', function() {
	var caption = ct.i18n('griddefinitions.major_fx');
	var xml = '<caplin.grid-component baseGrid="caplinx.fxtrader.slgrid.fxMajor"/>';
	var component = caplin.component.ComponentFactory.createComponent(xml);
	var layoutService = caplin.core.ServiceRegistry.getService('caplin.layout-service');
	var layout = layoutService.getSelected();
	layout.insertComponent(component, caption);

Now re-load the app and you should have a single item in the Insert menu that inserts a grid. You can drag this into place in the layout.

Screenshot of item in insert menu