Configure the drawers

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

By default, they include:

note

@activeviam/activeui-sdk exports additional drawers which can be plugged into ActiveUI:

Prerequisites#

Before you read this page, you must complete Setup.

Add a drawer (such as the Query Editor)#

To add a drawer, go to your index.ts and make the following change:

import {+ drawerQueryEditor,} from "@activeviam/activeui-sdk";
const extension: ExtensionModule = {  activate: async (configuration) => {
+   configuration.drawers.push(drawerQueryEditor);
  }}

Remove a drawer#

Similarly, you can remove a drawer like this:

const extension: ExtensionModule = {  activate: async (configuration) => {
+   configuration.drawers = configuration.drawers.filter(({key}) => key !== "widgets")
  }}

Create a custom drawer#

You can also create custom drawers.

This can be done by creating a Drawer and adding it to configuration.drawers.

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

import { Drawer, EditorProps } from "@activeviam/activeui-sdk";import { CheckOutlined } from "@ant-design/icons";import React, { FC } from "react";
const MyDrawerComponent: FC<EditorProps> = () => <div>Hello world</div>;
const MyDrawerIcon: FC = () => <CheckOutlined />;
export const myDrawer: Drawer = {  key: "my-drawer",  component: MyDrawerComponent,  type: "single",  icon: MyDrawerIcon,};

info

MyDrawerComponent 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 { myDrawer } from "./myDrawer";  const extension: ExtensionModule = {    activate: async (configuration) => {
+     configuration.drawers.push(myDrawer);
    }  }