Create a custom tool

You can create custom tools.

This can be done by creating a Tool and adding it to configuration.tools.

Create a file named myTool.tsx with the following content:

import React, { FC } from "react";

import { EditorProps, Tool } from "@activeviam/atoti-ui-sdk";
import { CheckOutlined } from "@activeviam/icons/antd";

const MyToolComponent: FC<EditorProps> = () => <div>Hello world</div>;
const MyToolIcon: FC = () => <CheckOutlined />;

export const myTool: Tool = {
  key: "my-tool",
  component: MyToolComponent,
  type: "single",
  icon: MyToolIcon,
};

info

MyToolComponent has access to the state of the dashboard and to those of the selected widget. It can also update these pieces of state. See EditorProps for more information.

Finally, go to your index.ts and make the following change:

import { myTool } from "./myTool";

const extension: ExtensionModule = {
  activate: async (configuration) => {
    configuration.tools.push(myTool);
  },
};