# 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="/files/lEZR6p2GZd8irbM9Sfqi" 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](/logic-and-interaction/actions/show-bottom-sheet.md) - Display components as bottom sheets instead of dialogs

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.digia.tech/logic-and-interaction/actions/open-dialog.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.