Modals¶

Historical Pages documentation. Centrali Pages was retired in v8.0.0 (CEN-1474). The builder, hosted runtime and Pages SDK/MCP tools are unavailable. This page preserves past behavior, not current setup instructions. See the capability register.

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.