Skip to main content

Dialog

A Dialog is an interactive, dynamic UI element designed as a popup overlay to streamline user engagement by rendering additional content or forms within the existing page context.

Dialog Creation​

To initiate a dialog, navigate to the edited web form header panel and select the Dialogs button explorer.

Initially, it will indicate There are no configured Dialogs yet. However, once dialogs are created, they will be listed under this section.

To create a new dialog, click on the New dialog button within this panel.
explorer
This will trigger a modal where you can assign a name to the dialog.
explorer

After naming and confirming with the create button, the new dialog will appear both in the dialog's list and within the outline view.

explorer
explorer
info

At runtime, dialogs are displayed at the center of the page.

Dialog Deletion​

There are two ways for removing Dialogs:

  • Dialogs List: Click on the delete icon explorer next to the dialog you intend to delete in the dialogs listt.
    explorer
  • Outline section: As an alternative method, dialogs can also be removed directly from the outline section..
    explorer
info
Regardless of the chosen method, a confirmation step is required in a follow-up modal to finalize the deletion process.
explorer

Dialog Renaming​

To change the name of a dialog, select the edit icon explorer next to the desired dialog in the dialogs list. This action activates the edit mode within the same interface, allowing you to rename the dialog.
explorer

Dialog Content Editing​

To edit a dialog, select it from the dialog list in the header panel or access it via the outline. This will open the dialog within the current webform, providing a dedicated interface for modifying its content.
explorer
info
The dialog that is currently being edited in the web form will be highlighted in the dialog list, making it easy to identify which dialog is under modification.
explorer

Each dialog includes a style box that enables the integration and customization of various components. Components can be dragged and dropped directly into this style box, allowing for efficient customization of the dialog's appearance.

explorer
tip

To exit the dialog's editing mode, click the close button explorer located at the top right corner.

Properties Customization​

Enhance the Dialog component to align with your application's requirements using the following customization options:

  • Overlay (Boolean): Activates a screen overlay when set to true.
  • Draggable (Boolean): Enables user-driven repositioning. Features a customizable move icon explorer.
  • Closable (Boolean): Integrates a close function, operable via the button or by clicking outside the dialog (if overlay is enabled). Features a customizable close icon explorer.
  • Animated: Implements an opening flicker effect for visual emphasis.
explorer

Server-Side Interaction​

Every dialog is uniquely named, which acts as its server-side reference for server-side interactions. This allows you to control the Dialog's behavior, such as hiding, showing, adding CSS classes, or removing CSS classes from it.

tip

Employing the .show() method triggers the On Open event, whereas utilizing .hide() triggers the On Close event.

Display and Customization​

The overlay style of dialogs can be further styled using the shared CSS class fd-dialog-overlay, such as:

self {
    background-color: rgba(137, 43, 226, 50%);
}
info

This shared CSS class takes precedence and cannot be superseded by any locally defined classes of the same name.

Showcase​

Here's a glimpse of how the Dialog component will look and behave in action:

explorer

Triggers and Events​

The Dialog component can respond to various events, enabling dynamic user experiences. Events that can trigger actions within the component include:

EventDescription
On InitCalls for an action when the dialog initially opens. It is used for the dialog's initialization.
On LoadedCalls for an action once the dialog has completely mounted/loaded, indicating readiness for interaction.
On CloseCalls for an action to be performed just before the dialog is closed.
tip

In scenarios where the Dialog includes a Webform Loader, these events are triggered before the On Load actions of the Webform Loader.