Modal Dialog

Tips & examples

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

When to use

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.

What you need

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

Examples

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

Avoid

Nesting modals inside modals, which confuses focus and navigation.

Properties

Editor properties

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.

Configuration

Is HiddenoptionalYes / no or Custom expression (yes/no)

When true, hides the launcher button (useful when opening the dialog from another action).

Example false

Default: none

Modal Window SizeoptionalOne of: small, medium, large, full

Size of the dialog. Defaults to medium.

Choices

small — Narrow dialog for short confirmations.
medium — Default size for most forms.
large — Wider dialog for denser forms.
full — Fills the viewport.

Default: none

Is AdaptiveoptionalYes / no or Custom expression (yes/no)

When true, sizes the dialog height to fit its content.

Example false

Default: none

Button Settings

IconrequiredText or Custom expression (text)Inside `buttonConfig`

Optional icon shown on the launcher button.

Example add_circle

Default: none

ColorrequiredOne of: primary, secondary, success, error, warning, info, default, lighter, disabled, white, black (or not set)Inside `buttonConfig`

Colour of the launcher button.

Choices

primary — Primary theme colour.
secondary — Secondary theme colour.
success — Success / positive action.
error — Error / destructive action.
warning — Warning.
info — Informational.
default — Default text colour.
lighter
disabled
white
black

Default: none

SizerequiredOne of: small, medium, large, fullWidthInside `buttonConfig`

Size of the launcher button.

Choices

small — Compact.
medium — Default.
large — Larger call to action.
fullWidth

Default: none

Is IconoptionalYes / no or Custom expression (yes/no)Inside `buttonConfig`

When true, renders the launcher as an icon-only control instead of a labelled button.

Default: none

DisabledoptionalYes / no or Custom expression (yes/no)Inside `buttonConfig`

When true, the control cannot be edited.

Example false

Default: none

VariantoptionalOne of: outlined, containedInside `buttonConfig`

Fill style of the launcher button.

Choices

outlined — Outlined button with transparent fill.
contained — Solid filled button.

Default: none

Full WidthoptionalYes / no or Custom expression (yes/no)Inside `buttonConfig`

When true, stretches the launcher button across its grid cell.

Example false

Default: none

Sizing

Default size when dropped on a page: 1 × 1.

Translatable labels

openButtonLabel — Label on the launcher button.
modalTitle — Title shown in the dialog header.

Accessibility

Uses dialog semantics (role=dialog, aria-modal). Focus stays in the overlay while open and returns to the launcher on close.

Space or Enter opens the dialog from the launcher.
Escape closes the dialog.

Composition

Child slots

This container accepts nested elements in these slots:

slot	accepts
`content`	any element

Nesting overview

graph TD
  root["default_modal_dialog"]
  root --> content["content slot"]

Where you can place it

Drag this element into one of these containers:

Sample configuration

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
  "config": {
    "openButtonDisabled": false,
    "modalWindowSize": "small",
    "isHidden": false,
    "isAdaptive": false,
    "buttonConfig": {
      "icon": "icon",
      "color": "primary",
      "size": "small",
      "fullWidth": false,
      "disabled": false,
      "variant": "outlined",
      "isIcon": false
    }
  },
  "children": {
    "content": [
      {
        "type": "default_text_input",
        "config": {
          "label": "Example field"
        }
      }
    ]
  }
}

Ready-made setups

Adaptive dialog for a sub-form ↕

Compact launcher that opens a medium dialog sized to its content.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
{
  "config": {
    "isHidden": false,
    "modalWindowSize": "medium",
    "isAdaptive": true,
    "buttonConfig": {
      "icon": "add_circle",
      "color": "primary",
      "size": "medium",
      "isIcon": false,
      "variant": "contained",
      "fullWidth": false
    }
  }
}