Dialog

A dialog is a customizable view 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.

Example

A dialog example is available in our Showroom. You can view the demo, as well as access the setup in Appfarm Create. Don't have access? Register.

General properties

PropertyDescription

Dialog Type

The way the dialog should be displayed. The options are:

  • Modal: 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.

  • Fullscreen: Fill the entire screen. The height and width properties of the dialog are ignored. Usually only recommended for Small and Extra Small devices.

  • Responsive: 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.

Close on Click Outside

When selected the user can click on the backdrop outside of the dialog, or press the Esc key on their keyboard, to close the dialog.

App bar

App bar properties for dialogs are the same as for views.

Event handlers

PropertyDescription

On Dialog Open

Triggered once the dialog has been opened and is visible.

On Dialog Close

Triggered after the dialog has been closed and is no longer visible. This will be triggered if Close on Click Outside is selected and user clicks on the backdrop.

On Backdrop Click

Available when Close on Click Outside is selected 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 Esc key on their keyboard. If both On Dialog Close and On Backdrop Click are configured, On Backdrop Click will be triggered first.

Last updated