Core Concepts
The vocabulary used throughout App Studio documentation — AppPage, Pane, Widget, Section, Action, and how they relate to each other.
Concept Glossary
| Term | Definition | Analogy |
|---|---|---|
| App | The top-level container. Holds global config, navigation, and permissions. Published per-tenant. | A web application |
| AppPage | A named content area with a URL route. What the sidebar navigation items point to. | A "page" in a traditional web app — but rendered client-side |
| Pane | A layout container within an AppPage. Defines the grid/flex structure that holds Widgets. | A "section" or "region" of a page |
| Widget | A placed UI component inside a Pane. Has a type, config, data binding, and actions. | A React component with a visual designer |
| Widget Definition | The reusable template for a widget type — its id, type, config schema, and default values. Not app-specific. | A class definition |
| Widget Placement | A widget instance placed in a specific Pane, with app-specific config overrides applied. | An object instance of the class |
| Action | A configured response to a widget event (click, submit, row select). Navigate, submit, trigger workflow, set variable. | An event handler — but configured, not coded |
| Token | A {{ expression }} in a config property. Resolved at runtime to a real value (variable, user context, route param). | A template variable / interpolation |
| App Variable | A named, mutable value declared in the app config. Can be set by actions, bound in widget properties. | A React state variable |
| Breakpoint | A device size threshold: Desktop (≥1200px), Tablet (768–1199px), Mobile (<768px). Layouts adapt per breakpoint. | CSS media query breakpoint |
AppPage
An AppPage is the primary content unit in App Studio. Every entry in the sidebar navigation points to an AppPage. AppPages have:
- pageId — unique identifier within the app
- title — displayed in breadcrumbs and the browser tab
- route — URL pattern (e.g.,
/leads,/leads/:id,/leads/:id/edit) - requiredRoles — roles that can see this page (empty = all app users)
- panes — the list of Pane configurations for this page
Pane
A Pane is a layout container inside an AppPage. Panes can be arranged vertically or horizontally within the page. Each Pane has a configurable grid or flex layout that determines how Widgets inside it are arranged.
Panes also have a special type: modal. A modal Pane is not rendered inline — it appears as an overlay when an open-modal action targets it.
// Pane configuration JSON
{
"paneId": "header-pane",
"layout": {
"type": "flex",
"direction": "row",
"gap": 16,
"alignItems": "center"
},
"breakpoints": {
"mobile": { "direction": "column" }
},
"widgets": [ ... ]
}
Widget
A Widget is a placed UI component. Every widget has:
- widgetId — unique within the app
- type — the widget type (DataGrid, Chart, Form, Button, Text, Image, etc.)
- config — type-specific configuration properties (can contain
{{ token }}expressions) - layout — position and size within the parent Pane's grid
- visibleTo — optional role list; absent means visible to all
- actions — event-to-action mappings (e.g.,
onClick: navigate-action)
Action
An Action is a configured response to a user interaction. Actions are attached to widget events:
| Event | Triggered By |
|---|---|
onClick | Button widgets, clickable cells, image clicks |
onSubmit | Form widget submission |
onRowSelect | DataGrid row click |
onChange | Input, dropdown, or toggle value change |
onMount | Widget loads for the first time on the current AppPage |
Token
The {{ }} token syntax is how App Studio binds config values to runtime data. Tokens are evaluated by the Token Resolver at render time:
// Token examples in widget config
{
"title": "Lead: {{ route.id }}",
"dataSource": "GetLeadById",
"params": { "id": "{{ route.id }}" },
"visibleTo": "{{ context.roles.includes('admin') }}",
"label": "Welcome, {{ context.name }}"
}
In App Studio, the "code" is the configuration. The builder is a visual editor for this configuration. Everything you can do in the builder you can also express in the app's JSON definition — useful for programmatic generation or migration.