Open Dialog
The Open Dialog action allows you to display a modal dialog containing a custom component. Dialogs are useful for showing confirmations, forms, alerts, or any other UI content without navigating away from the current screen.
Note: Only components can be used as dialog content.
📦 Properties
component and its args
Dropdown and value
✅
Add Component from dropdown and fill their respective component params
Expect Result
Boolean
❌
Boolean for trigger onResult or not
barrierDismissible
Boolean
❌
Allow dismissal by tapping outside the dialog
barrierColor
String
❌
Background overlay color (hex or color name)
onResult
Action Flow
❌
Actions to run when result is returned
🎨 Barrier Configuration
barrierDismissible
Boolean
Allow dismissal by tapping outside
true
barrierColor
String
Background overlay color
Semi-transparent black
✅ Common Use Cases
Confirmation Prompts: Display yes/no or confirmation dialogs before performing actions
Form Inputs: Show modal forms for data collection without navigation
Alerts and Notifications: Present important information or warnings
Settings Panels: Display configuration options in a focused modal
Progress Indicators: Show loading states or progress during operations
Confirmation Prompts: Display yes/no or confirmation dialogs before performing actions
Form Inputs: Show modal forms for data collection without navigation
Alerts and Notifications: Present important information or warnings
Settings Panels: Display configuration options in a focused modal
Progress Indicators: Show loading states or progress during operations
⚙️ Default Behavior
By default:
Modal Behavior
Blocks interaction with underlying content
Dismissal
Closes when tapped outside (if barrierDismissible) or via internal actions
Result Handling
No result returned unless Expect Result is enabled
Animation
Smooth fade-in/fade-out transitions
🛠️ How to Use
Add the action to a widget event (e.g., button tap, menu selection)
Choose Open Dialog from the action list
Set
componentfrom dropdown and fill their respective argsOptionally configure styling and result handling
📤 Result Handling
When Expect Result is enabled, the dialog can return data that triggers the onResult action flow. The result is available as a result variable:
Common Result Patterns:
Form submission data
Selected option/item
Confirmation responses
User input values
🔗 Related Documentation
Finding Page/Component Slugs - How to locate and copy component slugs for dialogs
Show Bottom Sheet - Display components as bottom sheets instead of dialogs
Last updated