# Dialog

A dialog is a customizable [view](/reference/apps/ui/views.md) that is placed over a standard view and often used for user confirmation or data entry. Dialogs can be opened and closed using the Open dialog and Close dialog action nodes respectively.

{% hint style="info" %}
**Example**

A dialog example is available in our [Showroom.](https://showroom.appfarm.app/ui-components/dialog) You can view the demo, as well as access the setup in Appfarm Create. Don't have access? [Register](https://showroom.appfarm.app/sign-up).
{% endhint %}

## General properties

<table><thead><tr><th width="240">Property</th><th>Description</th></tr></thead><tbody><tr><td><strong>Dialog Type</strong></td><td><p>The way the dialog should be displayed. The options are:</p><ul><li><code>Modal</code>: Display a modal window in the middle of the screen. The rest of the app is covered by a backdrop and interactions outside of the dialog are blocked.</li><li><code>Fullscreen</code>: Fill the entire screen. The height and width properties of the dialog are ignored. Usually only recommended for Small and Extra Small devices. </li><li><code>Responsive</code>: Adapt according to the client screen size. Modal will be applied by Large and Medium devices, while Fullscreen will be applied on Small and Extra Small devices.</li></ul></td></tr><tr><td><strong>Close on Click Outside</strong></td><td>When selected the user can click on the backdrop outside of the dialog, or press the <code>Esc</code> key on their keyboard, to close the dialog.</td></tr></tbody></table>

## App bar

App bar properties for dialogs are the same as for [views](/reference/apps/ui/views.md#app-bar).

## Event handlers

<table><thead><tr><th width="244">Property</th><th>Description</th></tr></thead><tbody><tr><td><strong>On Dialog Open</strong></td><td>Triggered once the dialog has been opened and is visible.</td></tr><tr><td><strong>On Dialog Close</strong></td><td>Triggered after the dialog has been closed and is no longer visible. This will be triggered if <strong>Close on Click Outside</strong> is selected and user clicks on the backdrop.</td></tr><tr><td><strong>On Backdrop Click</strong></td><td><em>Available when Close on Click Outside is selected</em><br>Triggered when the user clicks on the backdrop outside of the dialog. This is useful when a user clicks the backdrop to close instead of using a cancel/close button. This will also be triggered when the user presses the <code>Esc</code> key on their keyboard.<br><br>If both <strong>On Dialog Close</strong> and <strong>On Backdrop Click</strong> are configured, <strong>On Backdrop Click</strong> will be triggered first.</td></tr></tbody></table>


---

# 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.appfarm.io/reference/apps/ui/views/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.