Modal Form

The modal form component allows you to create a form linked to a script or flow. It is a Submit form component but with a dedicated modal opened when triggered. It has a submit button that triggers a runnable when clicked. The form is displayed in a modal, which can be opened by clicking on a button.

The runnable parameters are defined:

• Static: the parameter is defined in the component configuration.
• User input: the parameter is defined by the user input.
• Eval: the parameter is connected to an output.

Only user inputs are displayed in the form in the modal.

The following section details Modal Form component's specific settings. For more details on the App Editor, check the dedicated documentation or the App Editor Quickstart:

App Editor Documentation

The app editor is a low-code builder to create custom User Interfaces with a mix of drag-and-drop and code.

Apps Quickstart

Learn how to build your first app in a matter of minutes.

Controls

This component can be controlled by frontend scripts using these functions:

setValue

The setValue function is meant to set or force the value of a component. This can be convenient in cases where connection is not the easiest pattern. Note that it's a bad idea to mix dynamic default value and setValue together.

setValue(id: string, value: any)

validate

Make a specific field of a form in a Validate state.

validate(id: string, key: string)

validateAll

Make all fields of a form in a Validate state.

validateAll(id: string, key: string)

invalidate

Invalidate a specific field of a form

invalidate(id: string, key: string, error: string)

Runnable Editor

Learn how to create and configure Apps runnables.

Form Modal configuration

Name	Type	Connectable	Templatable	Default	Description
Modal Title	string	true	false	Modal title	Title of the component.
label	string	true	false	Open popup	The button label.
color	blue, red, dark, light, green, gray	true	false	dark	The button color.
size	xs, sm, md , lg, xl	true	false	sm	The button size.

The form component has a special parameters called On Success and On Error.

The options for On Success are:

• Do nothing
• Go to an url
• Set the tab of a tabs component
• Display a toast notification
• Open a modal or a drawer
• Close a modal or a drawer

The options for On Error are:

• Show error overlay
• Go to an url
• Set the tab of a tabs component
• Display a toast notification
• Open a modal or a drawer
• Close a modal or a drawer

Outputs

Name	Type	Description
result	any	The result of the runnable.
loading	boolean	The loading state of the button.

Event handler

The modal form component has the following event handler:

• onSuccess: Trigger one or more runnables when the button is clicked and the runnable is successful.