Skip to main content

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:

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)

Form configuration

NameTypeConnectableTemplatableDefaultDescription
labelstringtruefalseSubmitThe button label.
colorblue, red, dark, light, green, graytruefalsedarkThe button color.
sizexs, sm, md , lg, xltruefalsesmThe button size.

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

The options for On Success are:

The options for On Error are:

Outputs

NameTypeDescription
resultanyThe result of the runnable.
loadingbooleanThe loading state of the button.
jobIdstringThe 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.