Pages let you build list views, detail pages, forms, and dashboards — but sometimes you need something that appears on top of the current page. A confirmation before deleting a record. A detail preview without navigating away. A quick-edit form triggered from a table row.
That's what the declarative modal system adds.
How It Works
Modals are a block type in the page definition, just like data tables or metric cards. You add a modal block in the page editor, configure its content, and trigger it from an action on any other block.
Adding a Modal
In the page editor, add a block with type Modal. Configure:
- Title — the header text shown at the top of the dialog
- Size — small, medium, large, or fullscreen
- Content type — static HTML, Markdown, or data-bound HTML with live collection data
- Actions — buttons in the modal footer (close, navigate, invoke trigger, etc.)
Modal blocks are invisible by default. They only appear when triggered.
Triggering a Modal
Any block action can open a modal using the `open-modal` action type. Point it at the modal block's ID and the dialog appears.
Common patterns:
- Table row click → opens a detail modal with the record's data
- Delete button → opens a confirmation modal with a "Confirm Delete" action that invokes a trigger
- "Add New" button → opens a form modal for quick data entry
Closing a modal uses the `close-modal` action type, or the user can press Escape or click the close button.
Data-Bound Content
Modals support the same data-bound HTML as regular blocks. Write HTML with `{{fieldName}}` placeholders, connect a data source, and the modal renders live data from your collection. This is perfect for detail previews — show a styled record card without building a separate detail page.
Example: Delete Confirmation
Here's a typical pattern: a data table with a delete button that opens a confirmation modal.
- Add a data-table block with a row action: type `open-modal`, target → your modal block ID
- Add a modal block:
- Title: "Confirm Delete"
- Size: small
- Content: Markdown with "Are you sure you want to delete this record? This action cannot be undone."
- Actions: "Cancel" (`close-modal`) and "Delete" (`invoke-trigger` → your delete HTTP trigger)
The user clicks delete on a row, sees the confirmation, and either cancels or confirms. No navigation, no page reload, no frontend code.
Example: Record Preview
Another common pattern: clicking a table row opens a modal with a styled detail view.
- Add a data-table block with a row click action: `open-modal`
- Add a modal block:
- Size: large
- Content type: data-bound HTML
- Content: custom HTML template with `{{name}}`, `{{email}}`, `{{status}}` placeholders
- Data source: same collection as the table
The modal renders a formatted view of the clicked record without leaving the page.
Available on All Page Types
Modals work on list pages, detail pages, form pages, and dashboards. Each renderer manages its own modal state — you can have multiple modals defined and open them independently.
The declarative modal system is available now in the page editor for all workspaces.