System Widgets
System widgets are built into App Studio and available in every tenant. They cover the most common UI patterns for internal tools and dashboards.
DataGrid
The DataGrid widget displays tabular data with built-in sort, filter, and pagination. All data is fetched via AIExtension.Service.
| Config Property | Type | Description |
|---|---|---|
dataSource | string | AIExtension.Service method name |
params | object | Parameters passed to the data source (supports tokens) |
columns | Column[] | Column definitions: field, header, sortable, width, cellRenderer |
pageSize | number | Rows per page (default 20) |
selectable | boolean | Enable row selection (fires onRowSelect event) |
filterable | boolean | Show column filter inputs in header |
exportable | boolean | Show CSV export button |
Chart
Renders Bar, Line, or Pie charts. Data is fetched via GetChartDataAsync in AIExtension.Service.
| Config Property | Type | Description |
|---|---|---|
chartType | "bar" | "line" | "pie" | Chart visualization type |
dataSource | string | AIExtension.Service method name |
xAxis | string | Field name for x-axis (or pie labels) |
yAxis | string | string[] | Field name(s) for y-axis values (multiple for grouped bar) |
colors | string[] | Color overrides for each series |
legend | boolean | Show legend (default true) |
Metric (KPI Card)
A number-focused KPI display card, ideal for dashboards showing a single headline figure with a trend.
| Config Property | Type | Description |
|---|---|---|
value | string / token | The headline number (e.g., {{ service.GetTotalLeads() }}) |
label | string | Display label below the value |
trend | number | % change — positive = green arrow up, negative = red arrow down |
icon | string | Font Awesome icon name |
colorThreshold | object | { warn: 50, danger: 20 } — value below danger → red, below warn → yellow |
prefix | string | Text before value (e.g., "$") |
suffix | string | Text after value (e.g., "%") |
Text Widget
Renders rich text or Markdown content. Supports {{ token }} expressions inline in the content string.
// Text widget config example
{
"content": "### Welcome, {{ context.name }}\nYou have **{{ variables.pendingCount }}** tasks pending.",
"renderAs": "markdown", // "markdown" | "html" | "plain"
"fontSize": "1rem"
}
Container Widget
An invisible layout wrapper that can contain other widgets. Useful for grouping widgets with shared padding, background, or layout direction without creating a new Pane.
// Container widget config
{
"layout": "flex",
"direction": "row",
"gap": 12,
"padding": 16,
"background": "surface", // "transparent" | "surface" | "surface2" | hex color
"borderRadius": 8
}
Tabs Widget
Provides a tabbed interface where each tab shows a different child Pane. The active tab is controlled by an activeTab variable or a default index.
// Tabs widget config
{
"tabs": [
{ "label": "Overview", "paneId": "overview-pane" },
{ "label": "Activities", "paneId": "activities-pane" },
{ "label": "Documents", "paneId": "docs-pane" }
],
"defaultTab": 0, // index of default active tab
"activeTabVariable": "currentTab" // syncs tab to this app variable
}