Dialogs Overview
MaestroThe UI design product. | Form Builder | All versions This feature is related to all versions.
Dialogs are pop-up windows that appear within the current page, in front of other content. Typically, they're used to capture information that might not need to be captured from every user.
For example, sometimes users save a form and return to it later, but many users complete a form in a single session. For this reason, saving a form is often handled within a dialog. If a user wants to save a form, they can do so, but if not, the user won't be presented with the option.
Dialogs can contain most of the components available to the form, but minimizing the amount of components in a dialog is recommend as they're a smaller, more condensed interface elements. If you place too many components inside a dialog, it can appear cramped and overwhelming.
Some components cannot be inserted into a dialog, such as modal pages or other dialogs.
Dialog Types
Out of the box, Maestro provides a range of different dialog components.
The most flexible type of dialog is the Dialog component. It's available via the Palette pane, inside the Containers folder.
This dialog enforces the least amount of default functionality.
Additional dialogs are available via the Dialogs folder. The exact range of available dialogs, however, will depend on the template the form or template is based on.
| Maguire | Blue Steel |
|---|---|
| Save Confirm | Cancel Confirm |
| Save Challenge | Show XML |
| Cancel Confirm | Save Confirm |
| Form Help | Save Confirm Dialog |
| Show XML | Save Challenge Dialog |
| Full Screen Menu | |
| Form Help |
Although different templates have dialogs with the same names, the dialogs themselves contain different content.
Creating Dialogs
Unlike most other components, dialogs cannot be dragged directly into a form. Instead, they need to be dragged into the Dialogs folder, inside the Structure pane (also known as the View pane in earlier versions of Maestro).
Configuring Dialogs
To configure a dialog, simply select it. The dialog will appear within the form editor and its properties will appear in the Properties pane.
If a cross-out icon appears beside the name of a dialog, the dialog can only be edited via the template. If you want to configure this dialog but don't have access to the template, you will need to speak to the person who does.
Open a Dialog
To open a dialog within a form, use the Form.showDialog method inside a rule:
Form.showDialog("dialog_id_goes_here");But replace dialog_id_goes_here with the ID of a dialog.
Typically, the opening of a dialog is triggered by a click rule.
To close a dialog, use the same method without any arguments:
Form.showDialog();Next, learn how to use dialogs to implement a save and resume feature.