A scrollable stack of repeated row cards (each built from one shared grid template), with optional row selection and a pagination footer.

• Browse many records as custom row cards — each row is a grid layout you design, not fixed columns.
• Build a selectable list that drives a detail panel, form, or chart from elements.<listId>.selected.
• Show compact work queues, catalogs, or pickers where a freeform row layout beats a dense table.

Requires a Data Source view/query name. Set Identifier Name whenever selection or per-row actions must address a specific record. Build the visual layout inside the single row → default_grid template.

A launcher button that opens an overlay with a title and close control.

• Open a secondary flow (edit dialog, confirmation, wizard step) without leaving the current page.
• Show a form, chart, or summary in an overlay launched from a button.

• A layout container for nested forms, charts, or confirmation content.

• A button that opens a medium dialog to edit related sub-form fields.
• An icon-only button that opens a full-screen analytics overlay.

• Nesting modals inside modals, which confuses focus and navigation.

Configure these in the Application Designer property panel. Group headings mirror the editor where possible. Data Source is where the element gets its rows or field binding (a view/query, a connector operation, or a parent form field). References appear only for view-backed sources and map foreign-key ID columns to readable labels from another view.

A compact, read-only numerical data text block that displays formatted integers or decimals alongside units, percentages, custom currency markings, and contextual error accent highlights.

• Displaying a read-only numeric value, score, index, metric, or currency value within user interfaces.
• Rendering financial tracking fields or statistical values that require explicit prefix/suffix symbols (e.g. £, €) or dynamic highlight gating for losses.

• A dashboard tile rendering a database revenue cell formatted with a currency prefix and bold red styling triggered on negative margins.
• Displaying a precise fractional calculation summary clamped cleanly via decimal precision configurations.

• Using to capture user numerical entries, use a form-bound number input control element instead.
• Allocating massive grid canvas dimensions, keep this small indicator element sized to 1 row tall and 1 or 2 columns broad.

Configure these in the Application Designer property panel. Group headings mirror the editor where possible. Data Source is where the element gets its rows or field binding (a view/query, a connector operation, or a parent form field). References appear only for view-backed sources and map foreign-key ID columns to readable labels from another view.

A button that calls a database function or procedure directly, for work that belongs in the database rather than in the page.

• Triggering server-side logic that would be wrong to express as a sequence of page actions — a batch recalculation or a state transition with its own rules.

The function must exist in the database and be callable by the signed-in user’s role; arguments are supplied from the page.

A dropdown whose options are typed into the configuration rather than loaded from the database.

• A short, stable list that is not worth a database view — a status, a priority, a yes/no/unknown.

• Priority: Low, Medium, High.

• Hard-coding a list that already exists as a table, which then has to be maintained in two places.
• Using it for long lists; without search the user has to scroll.

Use instead

A section of a parent form that edits a nested part of the same record, such as a JSON column or a related row, using its own child inputs.

• Editing a nested object inside one record, where the inputs should read and write below a shared field path rather than at the top level.

Binds to a field path on a parent Form. The inputs placed inside it address paths relative to that field, so they do not each need the full path.

A data table with search, sorting, filters, optional row selection, foreign-key label resolution, and row/create actions.

• Presenting large relational datasets, data logs, or multi-attribute list rows in a structured grid layout.
• Providing interactive tabular views complete with sorting priorities, row selection states, foreign key display mappings, and dynamic filtering tree builders.
• Offering full CRUD operational tables with built-in row actions (Edit, Details, Delete) and a dedicated record creation button.
• Use Table when the page must browse many records from a query/view and users need scanning, sorting, filtering, pagination, or row-level actions.
• Use Table for list pages, work queues, back-office administration, approval inboxes, catalogs, and search results where each row represents one business record.
• Use Table when the page consumer may need to define runtime filters from the UI, not only fixed filters defined by the page builder.
• Use Table when a create flow, details flow, edit flow, or delete flow should stay close to the data list.

A useful table requires a valid dataSource.viewName, and it becomes much more reliable when the source also exposes a stable identifier field. References are optional but strongly recommended whenever the source contains foreign IDs that should be rendered as readable names. Column behavior is split across the table itself and its header/body child elements: the table owns source/filter/selection/paging/action scaffolding, while each column is defined by paired child elements in the header and body slots.

A tabbed container viewport with a top navigation bar holding static tab labels. Clicking a tab switches the active visible panel to display its specific child elements.

• Organizing large dashboards or complex forms into separate, focused tabbed views within a single screen container.
• Grouping related controls, tables, or sub-views into distinct tabs to reduce cognitive overload and save vertical scroll space.

• Acts as a structural layout container holding independent child widgets, forms, tables, and display fields across distinct tab panels.

• A customer 360 view with separate tabs for ‘Overview’, ‘Orders’, ‘Support Tickets’, and ‘Settings’.
• An analytical dashboard switching between ‘Sales Metrics’ (Tab 0) and ‘Inventory Status’ (Tab 1), referencing elements.default_tabs_7c4e5b9a256e.indexSelected.toString() in dependent queries.

• Squeezing the container into tiny height/width footprints when its nested children require ample room, prefer full-width (12 units) and generous height (at least 12 units).
• Using tabs for sequential multi-step wizard processes where data must be validated step-by-step, use a dedicated stepper or multi-page layout instead.

Configure these in the Application Designer property panel. Group headings mirror the editor where possible. Data Source is where the element gets its rows or field binding (a view/query, a connector operation, or a parent form field). References appear only for view-backed sources and map foreign-key ID columns to readable labels from another view.

A styleable text block supporting dynamic expressions, full color palettes (text and background), filled/outlined color variants, typography variants (h1-h6, subtitle, body, caption), and layout controls like rounded corners and line wrapping.

• Displaying dynamic text content that requires rich typography styling, background color variants, rounded corners, or line wrapping settings.
• Rendering headlines, subtitles, badges, callouts, or stat labels with explicit horizontal and vertical alignment controls.

• Dynamic text strings, localized text values, or calculated expression outputs requiring custom presentation styling.

• An outlined status banner displaying a dynamic string expression with rounded corners and centered alignment.
• A prominent section header styled as an ‘h1’ typography font variant with custom primary background highlights.

• Using for long-form prose with rich markdown formatting like bullet lists or code blocks, use the markdown_field component instead.
• Using for simple card metric containers, use the data_display component instead.

Use instead

A dynamic 2D bar chart visualizing categorical data along X and Y axes, with support for multiple Y-value series (grouped/stacked), custom legend mappings, theme palettes, interactive toolbox features (zoom, image export, data view, magic type switch to line chart), and dynamic filter expressions.

• Visualizing categorical data, discrete value distributions, or multi-metric side-by-side performance comparisons.
• Comparing dynamic query metrics across categories (X-axis) against numerical ranges (Y-axis), with support for grouped or stacked bars.

Requires an active Source Query. Select a valid column property for Label (X coordinate) and one or more numerical columns for Value (Y coordinate). Multiple value mappings generate multi-bar comparisons or stacked views.