Modals¶

Overview¶

Modals are overlay dialogs that appear on top of the current page. Use them for confirmation prompts, detail previews, quick-edit forms, or any content that should appear in context without navigating away.

Modals are configured entirely from the page editor — no frontend code required. They work on all four page types (list, detail, form, and dashboard).

Adding a Modal¶

In the page editor, add a block with type Modal from the Content block category. Modal blocks are invisible by default — they only appear when triggered by an action.

Configuration¶

Content Types¶

Static HTML — raw HTML rendered as-is. All content is sanitized (scripts, iframes, and event handlers are stripped). <style> tags are allowed for custom styling.

Markdown — parsed as GitHub Flavored Markdown (tables, task lists, strikethrough supported), then sanitized. Write standard Markdown syntax in the content editor.

Data-Bound HTML — HTML with {{fieldName}} placeholders that are replaced with live data from a connected collection. Requires a data source to be configured on the modal block. Supports dot notation ({{data.status}}). Records are flattened, so nested fields like data.name are also accessible as {{name}}. Unresolved placeholders render as empty strings. Output is sanitized before display.

Triggering a Modal¶

Use the open-modal action type on any block to open a modal. Set the action's targetRef to the modal block's ID.

Common patterns:

• Table row action → open a detail preview modal
• Delete button → open a confirmation modal
• "Add New" button → open a modal with a form or instructions

Closing a Modal¶

Modals can be closed in three ways:

• close-modal action — add a button inside the modal (e.g., "Cancel") with action type close-modal and targetRef set to the modal's ID
• Escape key — pressing Escape closes the topmost modal
• Close button — the X button in the modal header

Actions Inside Modals¶

Modal blocks support these action types in their footer:

All modal actions use button activation (not row-click or form-submit).

Examples¶

Delete Confirmation¶

1. Add a data-table block with a row action: type open-modal, targetRef → your confirmation modal's ID
2. Add a modal block:
   • Title: "Confirm Delete"
   • Size: sm
   • Content type: Markdown
   • Content: Are you sure you want to delete this record? This action cannot be undone.
   • Actions:
     • "Cancel" → close-modal
     • "Delete" → invoke-trigger (pointing to your delete HTTP trigger)

Record Preview¶

1. Add a data-table block with a row action: type open-modal
2. Add a modal block:
   • Size: lg
   • Content type: Data-Bound HTML
   • Data source: same collection as the table
   • Content:

     <div style="padding: 16px;">
       <h2>{{name}}</h2>
       <p style="color: #6b7280;">{{email}}</p>
       <p>Status: <strong>{{status}}</strong></p>
     </div>
     

The modal renders a formatted view of the record without leaving the page.

Nested Modals¶

A modal's actions can include open-modal to open a second modal. For example, a detail preview modal could have a "Delete" button that opens a smaller confirmation modal on top of it.