Submit Form

The submit form component allows you to create a submit form linked to a runnable. It has a submit button that triggers a runnable when clicked.

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.

The following section details Submit 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 configuration

Name	Type	Connectable	Templatable	Default	Description
label	string	true	false	Submit	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.
jobId	string	The job id of the runnable.

Event handler

The submit form component has the following event handler:

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