Adding Widgets
Widgets are the UI building blocks placed inside Panes. The Widget Palette shows all available widget types — drag them to the canvas or click to add to the selected Pane.
Opening the Widget Palette
The Widget Palette is an overlay panel showing all registered widget types. To open it:
- Click the + Widget button in the toolbar
- Right-click a Pane in the App Tree → Add Widget
- Right-click an empty area inside a Pane on the canvas → Add Widget
- Press W when a Pane is selected (keyboard shortcut)
Finding a Widget
The palette organizes widgets into categories. Use the search box to filter by name:
| Category | Widgets |
|---|---|
| Data Display | DataGrid, Chart, Metric, Timeline, Calendar |
| Input | Form, Button, TextInput, Dropdown, Toggle |
| Content | Text, Image, Divider, Spacer |
| Layout | Container, Tabs, Accordion, Card |
| Map | Map |
| Custom | Registered custom widgets (federation-based) |
Placing a Widget
There are two ways to place a widget from the palette:
Drag to Canvas
Drag the widget from the palette onto a Pane in the canvas. A highlighted drop zone appears showing where the widget will be placed. Release to drop it.
Click to Add to Selected Pane
If a Pane is already selected in the tree or canvas, clicking a widget in the palette adds it to that Pane at the next available grid position.
After Placing — Initial Configuration
When a widget is placed, the Properties Editor immediately opens its Config tab with the widget's required fields highlighted. At minimum, most widgets need a data source or content value before the canvas will render them correctly.
// DataGrid minimum required config
{
"widgetId": "leads-grid",
"type": "DataGrid",
"config": {
"dataSource": "GetLeads", // required — AIExtension.Service method name
"columns": [ // required — at least one column
{ "field": "name", "header": "Lead Name" },
{ "field": "status", "header": "Status" }
]
}
}
Widget Grid Position
In a grid-layout Pane, each widget occupies grid cells defined by:
colStart— starting column (1–12)colSpan— number of columns to span (1–12)rowStart— starting row (auto by default)rowSpan— number of rows to span (default 1)
You can set these numerically in the Layout tab, or drag the widget's resize handles on the canvas to adjust visually.
Every widget gets an auto-generated ID (e.g., widget-1, datagrid-3). Rename it to something meaningful in the App Tree (double-click). Widget IDs are used in data binding tokens: {{ widget.search-input.value }} — meaningful names make tokens readable.