Create a custom menu item

Menu items are interactive options available within the Context Menu, which appears when you right-click on a widget. Each menu item triggers a specific, predefined action that helps users interact with or modify the widget's behavior.

To create and add a new menu item to Atoti UI, follow these steps:

• Create a react hook that returns the menu item
• Create pluginMenuItem to make the new menu item available to the UI
• Register the new menu item and add it to relevant widgets

Menu item hook

Menu items in Atoti UI are plugins. The underlying library that Atoti UI uses is Ant design. You must retrieve the menu items through a hook. This hook needs:

• an onClick prop which has the action after being selected.
• an icon which is displayed next to the menu item in the context menu
• a label which has the text in the menu.

To create a simple menu item that sends out a "Hello world" alert you can make the following hook:

function useCustomItemMenuItem() {
  const handleClick = () => {
    alert("hello world!");
  };

  return {
    onClick: handleClick,
    icon: <FooIcon />,
    label: <div>Foo</div>,
  };
}

Menu item plugin

The menu item plugin is an object containing all the information needed to register the menu item in Atoti. It needs:

• a key to register the menu item
• useMenuItem to implement the action it should do.

import { MenuItemPlugin } from "@activeviam/atoti-ui-sdk";

export const pluginMenuItemCustomItem: MenuItemPlugin<MapWidgetState> = {
  key: "custom-item",
  useMenuItem: useCustomItemMenuItem,
};

The new plugin needs to be wired into plugins.ts.

It is put in the menuItemPlugins array:

+ import { pluginMenuItemCustomItem } from "./pluginMenuItemCustomItem";


  const menuItemPlugins: MenuItemPlugin<any, any>[] = [
+   pluginMenuItemCustomItem,
    pluginMenuItemDuplicateWidget,
 ...
  ];

• You can then wire its key to the chosen widget's list of context menu items.

plugins.tsx:

...

+  pluginWidgetPivotTable.contextMenuItems = [ "custom-item" ];


...