Open Dialog

Watch this on Youtube: https://www.youtube.com/watch?v=GnZ2T1_KR2k

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

Property	Type	Required	Description
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

Property	Type	Description	Default
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:

Behavior	Description
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

Open Dialog action configuration in Digia Studio

1. Add the action to a widget event (e.g., button tap, menu selection)

2. Choose Open Dialog from the action list

3. Set component from dropdown and fill their respective args

4. Optionally 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

---