Skip to main content

Your first custom menu item

Now that we have our map up and running, let's add some interactivity.

We can do this with a Menu Item! But what is a menu item?

Menu items exist inside the Context Menu, which can be opened by right clicking on a widget.

Clicking on a menu item performs a predetermined action.

Context Menu

To start our quest for interactivity, let's make a "Hello world" menu item from scratch.

Hello world menu item

  • In the src folder, create a new file: pluginMenuItemFilterOnCountries.tsx
  • Copy in the following code:
import { MenuItemPlugin } from "@activeviam/atoti-ui-sdk";

import { MapWidgetState } from "./map.types";


function useFilterOnCountriesMenuItem() {
return { label: "Filter dashboard on countries" };
}

export const pluginMenuItemFilterOnCountries: MenuItemPlugin<MapWidgetState> = {
key: "filter-on-countries",
useMenuItem: useFilterOnCountriesMenuItem,
};

…don't forget to internationalize it!

  import { MenuItemPlugin } from "@activeviam/atoti-ui-sdk";
+ import { useIntl } from "react-intl";

import { MapWidgetState } from "./map.types";

function useFilterOnCountriesMenuItem() {
return {
- label: "Filter dashboard on countries"
+ label: formatMessage({
+ id: "aui.plugins.menu-item.filter-on-countries.caption",
+ }),
+ }
}

export const pluginMenuItemFilterOnCountries: MenuItemPlugin<MapWidgetState> = {
key: "filter-on-countries",
useMenuItem: useFilterOnCountriesMenuItem,
+ translations: {
+ "en-US": {
+ caption: "Filter dashboard on countries",
+ },
+ },
};

As always, we have to wire this new plugin into plugins.tsx.

Since we are making a menu item, we will put it in the menuItemPlugins array:

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


const menuItemPlugins: MenuItemPlugin<any, any>[] = [
+ pluginMenuItemFilterOnCountries,
pluginMenuItemDuplicateWidget,


...


];

However, our new menu item won't show up when we right-click our map yet.

  • Add its key to the map's list of context menu items.

plugins.tsx:

...

+ pluginWidgetMap.contextMenuItems = [ "filter-on-countries" ];


...

It worked!

The menu item now appears when we right-click the map!

But nothing happens when we click it.

Let's fix this!

pluginMenuItemFilterOnCountries.tsx:

const FilterOnCountriesMenuItem: FC<MenuItemProps<MapWidgetState>> = (props) => {

const { formatMessage } = useIntl();

function useFilterOnCountriesMenuItem() {

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

return {
label: formatMessage({
id: "aui.plugins.menu-item.filter-on-countries.caption",
}),
+ onClick: handleClick,
}
}

...

};

Great! And that's all there is to it!

On the next page, we will give our new menu item some functionality! 🕺