Form Component

Introduction

The form component can be used to quickly gather multiple inputs from the user. It can automatically generate the required input fields based on the datasource selected.

It can also be manually configured when no datasource exists.

The form component also comes with dropzones for the header and the footer. Any component from the component library can be dropped into these zones for customizing the form component.

For example, you can drop a button component in the footer dropzone for submitting the form.

Configuration Options

Datasource

Expected Type: Object | Item

The datasource powering the form. Must be a single object that contains the fields that are required as inputs from the form.

Once the datasource is entered, the component automatically tries to generate a list of inputs to the form based on the structure of the datasource. It's always better to check if the datasource field's types were generated as desired.

If no datasource is specified, the inputs to the form must be manually configured.

Form Configuration

Components

Each component corresponds to an input to the form. The component is then available as one of the fields in the form's value.

The form component supports multiple types of inputs such as data, text, image etc. All of that can be configured here.

Creating a component

Click on + Component under the form configuration section to create a new component. Each component can be configured with the following properties:

Triggers

• Form Change: Triggers whenever the value of the form is changed.

Theme Options

• Padding: The form's padding. (Number | Pixels)
• Shadow: The form's shadow. (Shadow)
• Border: The form's border. You can also specify the radius for the edges. (Border)
• Background Color: The form's background color. (String | Hex)