App Studio
Widget System Overview
Widgets are the fundamental building blocks of App Studio applications. Understanding the Widget Definition / Widget Placement distinction is the key to mastering the widget system.
The Core Distinction: Definition vs. Placement
App Studio separates what a widget is from how it is used:
| Concept | Description | Analogy |
|---|---|---|
| Widget Definition | The reusable template: type identifier, config schema, default config values, and the render function (React component). Registered globally — not tied to any specific app. | A class definition |
| Widget Placement | An instance of a Widget Definition placed inside a Pane in a specific app. Has app-specific config overrides, layout position, actions, and visibility rules. | An instance of the class |
Why This Matters
When you drag a "DataGrid" from the widget palette, you are creating a Widget Placement — an instance of the DataGrid Widget Definition. Multiple placements of the same definition can exist in the same app or across different apps, each with different config values.
Widget Catalog
| Widget | Type ID | Category | Key Capability |
|---|---|---|---|
| Data Grid | DataGrid | Data Display | Sortable, filterable, paginated tabular data |
| Chart | Chart | Data Display | Bar, Line, Pie — from AIExtension.Service data |
| Metric | Metric | Data Display | KPI number card with trend indicator |
| Timeline | Timeline | Data Display | Chronological event stream |
| Calendar | Calendar | Data Display | Monthly/weekly event calendar |
| Map | Map | Data Display | Interactive map with data-driven markers |
| Form | Form | Input | Embeds an Atlas Form by formId |
| Button | Button | Input | Action trigger — primary, secondary, danger variants |
| Text Input | TextInput | Input | Single-line text entry, sets app variable |
| Dropdown | Dropdown | Input | Select from list, sets app variable |
| Toggle | Toggle | Input | Boolean toggle, sets app variable |
| Text | Text | Content | Rich text / markdown with token support |
| Image | Image | Content | Static or dynamic image, optional onClick |
| Container | Container | Layout | Invisible grouping wrapper with layout |
| Tabs | Tabs | Layout | Tabbed panel switching between child panes |
| Accordion | Accordion | Layout | Collapsible sections |
Configuration Cascade (Preview)
Widget configuration follows a three-level cascade — deeper levels override shallower ones:
Widget Definition default config
↓ overridden by
App-level widget override (via Widget Registry admin)
↓ overridden by
Pane-level placement config (what you set in the Properties Editor)
See the Configuration Cascade page for full details.