Key Capabilities
A feature-by-feature breakdown of everything App Studio can do — from visual building and responsive layouts to permissions, data binding, and workflow integration.
Visual Builder
The App Studio builder is a three-panel interface designed for productive app assembly:
- Left panel — App Tree: hierarchical view of the entire app — Apps, AppPages, Panes, Widgets. Drag to reorder. Right-click to add/delete.
- Center panel — Live Canvas: WYSIWYG preview of the current AppPage. Changes reflect immediately. Device size switcher (Desktop / Tablet / Mobile).
- Right panel — Properties Editor: context-sensitive — shows widget properties when a widget is selected, page properties when a page is selected, app properties when nothing is selected.
Widget Library
App Studio ships with a comprehensive set of built-in widgets:
| Widget | Purpose | Key Config Properties |
|---|---|---|
| DataGrid | Tabular data display with sort, filter, pagination | dataSource, columns, pageSize, rowActions |
| Chart | Bar, Line, Pie charts | chartType, dataSource, xAxis, yAxis, colors |
| Form | Embeds an Atlas Form by ID | formId, submitAction, prefillData |
| Button | Action trigger | label, variant, onClick action, disabled |
| Text | Rich text / markdown display | content (supports tokens), fontSize, fontWeight |
| Image | Static or dynamic image display | src (supports tokens), alt, onClick |
| Metric | KPI / number card | value, label, trend, icon, colorThreshold |
| Container | Invisible layout grouping wrapper | layout, gap, padding, background |
| Tabs | Tabbed navigation within a Pane | tabs[ {label, paneId} ], defaultTab |
| Accordion | Collapsible sections | sections[ {title, paneId} ], allowMultiple |
| Map | Geographic map display | markers, center, zoom, dataSource |
| Calendar | Event calendar view | dataSource, dateField, titleField, onEventClick |
| Timeline | Chronological event display | dataSource, dateField, events, orientation |
Responsive Layouts
Every Pane has a layout configuration that can differ per breakpoint:
- Desktop (≥1200px): primary layout — typically multi-column grids
- Tablet (768–1199px): inherits from Desktop unless overridden
- Mobile (<768px): typically single-column stacked layout
Widgets can be hidden per breakpoint. A sidebar on desktop can become a bottom navigation bar on mobile — all configured in the builder without CSS.
Data Binding
The {{ }} token syntax connects widget properties to live runtime values:
{{ route.id }}— URL route parameter{{ variables.searchTerm }}— app variable set by widget interactions{{ context.userId }}— current authenticated user's ID{{ context.roles }}— current user's role list{{ context.tenantId }}— current tenant{{ service.GetLeadById(route.id) }}— live service call result
Action System
Widget events are connected to actions in the Properties Editor. No code needed:
| Action Type | What It Does |
|---|---|
navigate | Navigate to another AppPage or external URL, with URL params |
submit-form | Submit an Atlas Form widget, then navigate on success/error |
trigger-workflow | Start a Flow Studio process with current variable values as input |
open-modal | Show a modal Pane as an overlay layer |
set-variable | Set an app variable to a value (constant or token) |
chain | Execute multiple actions in sequence |
conditional | Execute action only when a token expression evaluates to true |
Permissions
Three-tier permission model — all configured without code:
- App access — role list required to open the app (enforced server-side)
- Page visibility —
requiredRoleson an AppPage hides it from ineligible users - Widget visibility —
visibleToon a Widget, supports token expressions
Export/Import and Version Control
Apps export as portable JSON bundles. The bundle includes the complete app definition — pages, panes, widgets, actions, permissions, and navigation. Bundles can be imported into any tenant with compatible widget types. This powers dev → staging → production promotion workflows.
Custom JavaScript
For advanced use cases that the no-code builder cannot express, App Studio provides a sandboxed Custom JS editor per widget. The sandbox allows data transformation, computed properties, and programmatic variable changes — but blocks all network calls, DOM access, and global state manipulation.