# Open Dialog

{% embed url="<https://youtu.be/GnZ2T1_KR2k?si=LX2fnHtSe94zkoia>" %}

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

<figure><img src="https://3626461507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbhApDTL7kHrXte2TTtjs%2Fuploads%2Fgit-blob-8076f10607bf12e1489d09e6169a9854885f91f8%2Fopen_dialog_action.png?alt=media" alt="Open Dialog action configuration"><figcaption><p>Open Dialog action configuration in Digia Studio</p></figcaption></figure>

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](https://github.com/Digia-Technology-Private-Limited/digiaDocs/blob/main/platform-overview/builder-tool/finding-slugs.md) - How to locate and copy component slugs for dialogs
* [Show Bottom Sheet](https://docs.digia.tech/logic-and-interaction/actions/show-bottom-sheet) - Display components as bottom sheets instead of dialogs

***