Modals for form authors

A modal is a dialog that sits on top of the current form. Typical uses include confirming a deletion, asking one extra question, or showing a short notice without leaving the page.

This workflow uses two forms: one for the dialog content and one that opens it. You connect them with a Modal component, openModal on a button, and closeModal on OK or Cancel.

For developers working in JSON, see Modal windows and Modal components.

When to use a modal

• Confirm something destructive (“Delete this record?”)
• Collect one short extra step
• Show help or legal text briefly

If the task needs many fields or a long workflow, use a normal form or wizard instead.

The moving parts

Step 1: Create the modal form

1. Open the Forms tab.
2. Click Add a new form.
3. Give it a clear name such as confirm-dialog.
4. Save it so it shows up in the list.

You will pick this name again as the Modal template.

Step 2: Build the dialog content

1. Open confirm-dialog from the Forms list (pencil icon).
2. Add a short message (a Typography component works well).
3. Add OK and Cancel buttons.

Keep it small. One question, two answers.

Step 3: Close the dialog from the buttons

1. Select OK.
2. Open Actions.
3. Under onClick, add closeModal from Common.
4. Open Arguments and set result to ok (or another short value your team agrees on).
5. Do the same for Cancel, with result cancel.

closeModal closes the dialog. The result string is only needed if the main form later checks what the user chose (advanced beforeHide setups).

Step 4: Set the dialog type on the main form

1. Create or open the form that should open the dialog (for example MainForm).
2. Open Settings on the left.
3. Under Modal, pick the type for your UI kit. With Material UI this is often Mui Dialog.

Dragging a Modal component onto the form can set this for you. Still check that it matches your library.

Step 5: Add a Modal component

1. Stay on the main form and open Components.
2. Search for modal.
3. Drag Modal onto the canvas or into the tree.

Until you set a template, the canvas shows a placeholder like Modal: '…'.

Step 6: Link the Modal to confirm-dialog

1. Select the Modal component.
2. On Main, set Key to something stable, for example confirmModal.
3. Set Modal template to confirm-dialog.

That property is what loads your dialog form into the placeholder.

Step 7: Open it from a button

1. Add a Button, for example Show confirmation.
2. Open Actions → onClick.
3. Add openModal from Common.
4. Open Arguments.
5. Set modalKey to the Modal key (confirmModal).

If the dialog should see the current form values, set useFormData as well.

Step 8: Try it in Preview

1. Click Preview.
2. Click Show confirmation.
3. Check that the dialog shows your modal form.
4. Click OK or Cancel and make sure it closes.

Save both forms under Forms so Preview can load confirm-dialog by name when the dialog opens.

Summary

Create a small modal form with closeModal on its buttons. On the main form, set Settings → Modal, add a Modal component, and set Modal template. Then call openModal from a button with a matching modalKey and check the flow in Preview.

See also

• Modal windows (core)
• Modal components (Designer)
• Events and actions concept
• Form-wide errors and tooltips