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,
};

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);
  },
};

Configure the tool panel

Activate the state tab

⌘I

Introduction

Releases and Upgrades

User guide

Developer guide

Create a custom tool