Skip to main content

Configure the tools

The tools are located on the left of the application, when the user is viewing a dashboard.

By default, they include:

note

@activeviam/atoti-ui-sdk exports additional tools which can be plugged into Atoti UI:

To learn how to make these tools available in your application, see activate the state tab.

Prerequisites​

Before you read this page, you must complete Setup.

Add a tool​

To add a tab (for example the Query tab), go to your index.ts and make the following change:

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

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

Remove a tool​

Similarly, you can remove a tab like this:

const extension: ExtensionModule = {
  activate: async (configuration) => {
    configuration.tools = configuration.tools.filter(
      ({ key }) => key !== "widgets",
    );
  },
};

Create a custom tool​

You can also create custom tabs.

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