Multiple tabs in the application ribbon

Starting with version 4.4.4.5 of i2 Analyze, the i2 Notebook web client supports multiple tabs in the application ribbon, providing greater control over how and where you surface commands. This enhancement allows you to improve the user experience by categorizing related features into separate tabs, making navigation more intuitive.

Adding a custom tab

In the plug-in entry point, you can add a tab by calling IApplicationRibbon.addTab(). The method creates a new tab in the application ribbon, providing a new command area where you can surface commands individually or group them for better organization.

const ribbon = api.commands.applicationRibbon;

const customTab = ribbon.addTab({
  id: 'customTabId',
  label: 'Insert',
});

Adding commands to a tab

After you create the tab, you can add commands to it. The commands that you add can be system commands or custom commands that you define in your plug-in.

You can add the same command to multiple tabs, or move commands from one tab to another. For example:

ribbon.homeTab.remove(api.commands.systemCommands.toggleLists);

customTab.surfaceCommands(
  api.commands.systemCommands.toggleStyling,
  api.commands.systemCommands.toggleLists
);

This code removes the toggleLists command from the Home tab and adds it to the newly created tab. On the other hand, the toggleStyling command is now surfaced in both the Home tab and the custom Insert tab.

Grouping commands together in a tab

Custom tabs support groups of commands in exactly the same way that the Home tab does.

customTab
  .addGroup({
    id: '6878b309-2dfd-4431-9976-1a79d7c7b43a',
    icon: {
      type: 'inlineSvg',
      svg: commandSvg,
    },
    label: 'Revert',
    isCollapsed: true,
  })
  .surfaceCommands(api.commands.systemCommands.undo, api.commands.systemCommands.redo);

This code creates a group in the tab called Revert, and adds the undo and redo system commands to it. The new group is collapsed by default.

Positioning tabs

When you add a tab to the ribbon, you can specify its position relative to other tabs. For example, if you want to place the custom Insert tab before the Home tab, you can do so like this:

const ribbon = api.commands.applicationRibbon;
const homeTab = ribbon.homeTab;

const customTab = ribbon.addTab(
  {
    id: 'customTabId',
    label: 'Insert',
  },
  homeTab
);

In this code, homeTab refers to the existing Home tab. By passing it as the second argument to addTab(), the Insert tab is positioned before the Home tab in the application ribbon.