Form

A form collects input values from form item elements, serving as filters, data entry, and more. It allows user to submit a series of input value on one click, and triggered other interactions with the gathered user input.

Add Form elements in Form

Click Add an item to add a form element and configure it. It's crucial to define the Form field name for the form element. The input for each form element will become a property in the return object when the form is submitted, with the Form field name serving as the corresponding key.

If there is a conflict with the Form field name (the key), only the first form element will function as expected.

Property

Form elements: The form element items in the Form.

Default form value: The object used to the default value for forms.

Submitting: Toggle on to start submitting animation. This can be used with Action Change Submitting Status to prevent duplicate submissions.

Disabled: Toggle on to prevent all form elements to be edit.

Supported Event

Submit: This event is triggered when the form is submitted. There are two ways to trigger the submit event:

  1. When a user clicks the built-in Submit button.

  2. When an interaction on another element is set up to submit the form. To do this, a Submit form action should be configured on the element.

Either way, the form elements input value will be collected, and can be utilized as ${event.form} as an object in the following actions.

Reset: This event is triggered when the form is reset.

Form Value Change: This event is triggered when users edit the values of form elements.

Supported Actions

Submit form: Submit the form (trigger its Submit event).

Set form value: Set the value of form object.

Set form item value: Assign a value to a specific item within the form. This feature allows you to modify the value of individual form elements. The Field parameter corresponds to the Form field name of the target form element.

Reset form: Reset form item values.

Set Data: Change element data. See Data Store.

Set Loading: Set loading animation. See Set loading animations.

Last updated