Widget Plugin Tutorial

Build custom visualizations for Compose SDK dashboards. Each lesson builds on the previous one, progressively adding data fetching, editor configuration, and cross-filtering to a plugin scaffold.

Before You Begin

Scaffold a plugin project with the CLI before starting the tutorial:

npx @sisense/sdk-cli@latest create-plugin --name my-custom-chart --template empty
cd my-custom-chart
npm install
npm run dev

See the Plugin DevX Quick Start for prerequisites and detailed setup instructions.

Lessons

1. Getting Started Plugin anatomy, key files, registration, and how the pieces fit together. Introduces WidgetPlugin and CustomVisualization.

2. Building a VisualizationCustomVisualizationProps API and type parameterization.

3. Fetching Data Query real data with the useExecuteQuery hook and apply formatting with formatDataSet.

4. Data Panel Configuration Define dimension/measure inputs for the widget editor.

5. Design Panel Build a style configuration UI using DesignPanelProps.

6. Event Handling and Cross-Filtering Data point events, context menu, and cross-filtering integration.

AI-Driven Development

Every plugin project includes a /design-custom-widget skill that automates the tasks covered in these lessons. Instead of following each lesson manually, you can describe what you want to build and let the AI implement it.

• AI-Driven Development — how to use /design-custom-widget, the typical workflow from empty project to deployed plugin, and tips for effective AI collaboration.

The tutorial is the right choice when you want to understand why things work the way they do. The AI guide is faster when you already know what you want to build.

Start here: Getting Started