Insert a component via a menu

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 = caplin.menu.model.MenuFactory.create({
        options: {
            label: ct.i18n('caplinx.header.menu.insert'),
            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.