Open Modal Action

Setting Up a Modal Pane

Before using the Open Modal action, create a Pane and configure it as a modal:

1. In the App Tree, right-click a Pane → Set as Modal
2. In the Properties Editor, configure modal appearance: width, maxHeight, closeOnBackdrop
3. Add widgets inside the modal Pane as you would any other Pane

Modal Panes do not render in the main layout — they only appear when triggered by an Open Modal action.

Open Modal Action Config

// OpenModalActionConfig
{
  "type": "open-modal",
  "paneId": "confirm-delete-modal",   // ID of the modal Pane
  "closeOnBackdrop": true,            // close when clicking outside (default true)
  "modalContext": {                   // values passed to the modal as {{ modal.* }} tokens
    "entityId": "{{ route.id }}",
    "entityName": "{{ variables.selectedLeadName }}"
  }
}

Accessing Modal Context in Widgets

Values passed in modalContext are available as {{ modal.* }} tokens in widgets inside the modal Pane:

// Inside the "confirm-delete-modal" Pane:

// Text widget showing the entity name
{ "content": "Are you sure you want to delete **{{ modal.entityName }}**?" }

// Delete button — triggers workflow with the modal's entity ID
{
  "actions": {
    "onClick": {
      "type": "trigger-workflow",
      "processId": "delete-lead",
      "input": { "leadId": "{{ modal.entityId }}" },
      "onSuccess": {
        "type": "chain",
        "actions": [
          { "type": "close-modal" },
          { "type": "navigate", "target": "/leads" }
        ]
      }
    }
  }
}

Closing a Modal

Modals can be closed by:

• The user clicking the backdrop (if closeOnBackdrop: true)
• The user pressing Escape
• A close-modal action in the modal's widget actions

// close-modal action (used inside a modal's Cancel button)
{ "type": "close-modal" }