Form & input components

After reading this article, you’ll know:

• What the Form component is and what kind of inputs can be added

• Important options and uses of the Form and its input components

Form components serve to gather input from users and submit it to the action(s) connected to the form. In other words, by employing Form components, one can create web pages with input fields connected to a data model.

When dragging a Form component onto your canvas, a configuration menu appears that allows you to create the form based on a data model, or without.

When creating a form based on a data model, you have the option to select the properties from a model you would like to gather from your users, these properties will then automatically be generated in the model action as input variables.

When generating a form that isn’t based on a model, you are asked to choose a name for the action generated with the form and can do so without any data connected to the form whatsoever.

 

A standard Form component comes with a Submit button and two Alert components. The Submit button is connected to all the input fields you drag into the form and when connected correctly, will submit all the data you are asking from your users, via the form.

The Alert components generated with the Form component, trigger based on the action result and the pre-build interactions with the form. Be careful: changing these alerts might not work as expected.

If the action submits the data successfully, the green success alert shows, and on an error, the red alert with the corresponding message will show.

What are input components?

Input components work together with Forms to collect information based on user input. Think about the various logins you have to do daily! The fields you type your username, email address, or password in, are all input fields.

A best practice is to use an input field with the same type as the data you want to collect; are you asking for a username with an email address? Use the Email input component. Is the username a short name? Use the Text field input component.

When generating a form based on a model, input components based on the property type of the selected model property, will automatically be generated.

 

As seen in the example, when a Text input and Email field properties from the Webuser model are selected in the configuration wizard of the form.

Besides the two input fields shown in the example, we offer a variety of input components, corresponding to the data you would like to collect and can save in your application.

Action step synchronization

When updating a form input, your action step may be automatically updated if the 'action synchronization feature' is turned on. If you would like to enable action synchronization yourself, look into this article for more info.

Form & input options

Form component

Options

• Reconfigure
  Allows you to re-order the items in the form, and delete input fields from your form. When deleted this way, the input is also deleted from the form action.

• Action
  ​Navigate to the action the form is submitting its use input to

• Model
  ​The model that this form is based on is a record that is being loaded in the context of the form.

• Filter
  Configure the filter based on the selected model of the model option.

 

Default interactions

• onActionLoad
  ​This event is triggered when the action is processing the submitted data of the end-user.

• onActionSuccess
  ​This event is triggered when the action flow is executed successfully.

• onActionError
  ​This event is triggered when there is an error within the action flow. This specific event also passes the error messages so that they can be displayed within the alert component.

• onActionDone
  ​This event is triggered when the action flow is executed.

 

Input component options

Input components are used to ask your application user for information, the kind of input component you want to use depends on the kind of information you need.

Within the input fields, you can also change the formatting you would like the user to provide you the information with, think of asking for a date in DD/MM or MM/DD. 

Common options

Because most input components share the same (or highly similar) option items, let's cover them beforehand. That will leave us more space for explaining some unique features of each input component.

Property
​This is the property selected in either the form or input configuration. It is used to connect the component and the action input variable.

 

Label
​Configure the label of the input component to give context to the end user what it is intended for.

 

Value

Configure the input component to give it a default value or base it on a dynamic property.

 

Autocomplete / Disabled

When the Autocomplete option is enabled, the browser of an end user will show autocomplete suggestions. The Disabled option sets the input to its disabled state. It prevents the values of this input from being submitted and an end-user from filling in any values.

 

Placeholder

Show the Placeholder within the input component to demonstrate the format/example of how the input text has to look.

 

Helper text

Adds text below the input to give an end user more information. When there are validation messages, this text will be replaced to display them.

 

Margin

Configure the spacing around the input component.

 

Size

The default sizing is available for the input component.

 

Place label above input

Toggle the 'Place label above input' option to display the input label on top of its main field.

Full width

When enabled, the width of the input will be based on the width of his direct parent container component.

 

Variant

Select the pre-defined styling variants for the input.

 

Icon

Displays an icon inside the input component to give context to an end user.

 

Validation options

Validation is key to ensuring that data input aligns with specific rules and conditions. The platform provides a set of validation options that help developers control the type and quality of data entered by users. Below is a brief explanation of the most common validation options for input components.

Required / Value required message

Ensures a field must be filled before proceeding. Essential for mandatory inputs like names, email, passwords, etc.

 

Validation pattern

A regex-based rule that enforces specific input formats (e.g., emails or phone numbers).

 

Pattern mismatch message

Displays 'Invalid value' message by default when input doesn’t match the pattern, but can be customized (also using variables).

Min length / Max length

Ensures input meets a minimum character length, useful for fields like passwords.

Value too short / Value too long messages

Shows “This value is too short” by default if the input is below the minimum length.

Displays “This value is too long” if the input exceeds the character limit.

 

Styling options

Styling options are used to customize the appearance of input components. These include settings like hiding the label, adjusting background and border colors (with hover effects), as well as setting labels and text colors, error messages, etc. to match your design needs. For more detailed guidance, refer to the Styling best practices and Color use articles.

 

Advanced options

Interaction (change) delay allows you to set a delay (in milliseconds) before an action is triggered after user input. Another feature is the Test attribute, which lets you add a custom data attribute to components, making it easier to identify and interact with them in testing tools, for metric gathering, or applying custom CSS.

 

Input components overview

Text

Text component enables end users of an application to fill in the text in the input. In the context of the form, this input can be submitted to the action where it can fulfill multiple use cases. Text (single-line) property works well with this input field.

 

Multi-line text

Multi-line text field component enables end users of the application to fill in multiple lines of text in the input. In the context of the form, this input can be submitted to the action where it can fulfill multiple use cases. Text (multi-line) property works well with this input field

 

See the unique options for this component:

• Multiline

  This option toggles whether the input has multiple rows or not.

• Rows
  ​This option specifies the number of rows in the text area.

 

Number

Number input enables end users of the application to fill in a number in the input. It has browser-specific behavior and a mobile keyboard switch on mobile devices. The Number (or Decimal number) property works well with this input field.

 

Password

Password input enables end users of the application to fill in a password in the input. The default behavior of such inputs is hiding the characters that an end user fills in to make it safer. Also, it has browser-specific behavior and a mobile keyboard switch on mobile devices. The Password property works well with this input field.

 

Price

Price input enables end users of the application to fill in a number in the input. It has browser-specific behavior and a mobile keyboard switch on mobile devices. The Price or Number properties work well with this input field.

 

See the unique option for this component:

• Currency
  ​You can pass in the currency icon via text input or variable

• The currency option is used as an adornment on the price input field to prefix the currency (“€” or “$”) before or after the input’s value

 

Decimal

Decimal input enables end users of the application to fill in a number in the input. It has browser-specific behavior and a keyboard switch on mobile devices. The Number with decimal property works well with this input field

Both the Price and Decimal input components include these configuration options:

1. Decimal separator (point or comma)

When Point is selected as the decimal separator, a comma is automatically used as the thousands separator

A comma cannot be inserted for grouping unless Show group (thousands) separator is enabled:

Other rules applied in a runtime of your application:

• You can only insert a point once
• When submitting a value to the action, the internal (raw) number value is used (1,234.56 → 1234.56 will be sent and saved into the database)
• The applied input formatting works only in runtime. Static default values in the design time will not reflect it
• The chosen decimal separator (. or ,) is compiled at runtime and cannot be changed dynamically per user
• The inputs only accept point (.) decimals without group (,) separators

 

2. Scale (Number input)

This option defines the number of characters allowed after the (second) decimal separator - a chosen point or comma:

Email

Email input enables end users of the application to fill in an email address in the input. In the context of the form, this input can be submitted to the action where it can fulfill multiple use cases. The Email address property works well with this input field.

 

Autocomplete

Autocomplete input provides a menu of options based on the records of relational models or based on the values of a List property. When typing, the component fetches records to show in the menu of options.

 

Limits

Currently, the dropdown shows 20 records in the menu of options when based on a relation.

Options

• Model
  The model this input is based on.

• Filter
  Filter the records displayed in the dropdown menu of available options.

• Order by
  Change the ordering in the dropdown menu of available options.

• Label for options
  Overwrite the label that is displayed in the dropdown menu of available options.

 

• Add checkboxes

  Enable checking the options provided via the Autocomplete

 

• Close dropdown after select
  The dropdown of the Autocomplete form closes after your selected an option

• No options
  Adds text below the input to give you more information. When there are validation messages, this text will be replaced to display them.

Date picker

Date picker allows you to configure a Form where an end user can select a specific date. The Date property works well with this input field.

 

Options

• Format
  ​Defines the date format displayed in the input component.

  

• Locale / Hour format

  Define local time and 12 or 24-hour format

 

Date time picker

Date picker allows you to configure a form where an end user can select a specific date. The Date time property works well with this input field.

​​

Options

The options are the same as those for the Date picker.

Time picker

Time picker allows you to configure a form where an end user can select a specific date. The Time property works well with this input field.

 

Options

The options are the same as in the date picker except for this one:

• Format
  ​Defines the time format displayed in the input component.

Switch

Switch works like the Checkbox, except the boolean toggle is shown with a slider instead of a checkbox.

 

Select

Select input allows you to provide a menu of options based on the records of relational models or based on the values of a listed property. The List property works well with this input field.

 

A unique option includes:

• Allow users to empty selection

  When enabled, users can avoid selecting any kind of value from the list.

Image upload

Image upload component enables the end users of the application to upload files in the input. In the context of the form, this input can be submitted to the action which allows the user to populate Image properties.

 

Unique validation options:

• Hide default error

  Suppresses the default error message when an invalid file is uploaded.

• Accept files: Limits accepted file types to images (e.g., image/*), with the option to make this dynamic using variables. Configure the accepted mime type.

• Max file size (MB)

  Sets a limit on the maximum file size allowed for uploads, in megabytes.

• Invalid file size message

  Displays a custom message if the uploaded file exceeds the set size limit.

  

 

File upload

File upload component enables the end users of the application to upload files in the input. In the context of the form, this input can be submitted to the action which allows the user to populate File (or Image) properties.

 

The File upload options repeat the ones of Image upload.

Checkbox

Tables can't be imported directly. Please insert an image of your table which can be found here.

Checkbox allows you to let the end users submit boolean values. The Checkbox property works well with this input field.

 

A single unique option includes:

• Label position

  ​Set the label text position around a checkbox.

Checkbox group

Checkbox group functions similarly to a single Checkbox but allows end users to submit multiple boolean values. It uses a relational connection to a relational object, where the Checkbox property is ideal for handling these inputs.

 

Hidden

Hidden input can be used to pass values to the action the end user is unable to directly update. Depending on the expected input of the hidden input field: the text, number, or checkbox property works best with this input field.

 

Configuration:

During the configuration of the Hidden input, you may choose what kind of value you expect in the Hidden input, being: Text, Number, or Checkbox.

 

Options:

• Action input variable
  ​A property that was selected in either the form or input configuration is used for the connection between the component and the action input variable.

IBAN

IBAN input enables end users of the application to fill in an 18-digit IBAN (with letters) in the input. It has browser-specific behavior and a mobile keyboard switch on mobile devices. The IBAN property works well with this input field.

 

Multi Autocomplete

The main difference between Autocomplete and Multi Autocomplete is that Autocomplete allows users to select a single option from a dropdown list of suggestions based on their input, while Multi Autocomplete enables users to select multiple options from the list.

In Autocomplete, once an option is selected, the input is finalized. In Multi Autocomplete, users can continue selecting additional options, often using checkboxes for easier selection.

 

Phone

Phone input enables end users of the application to fill in a phone number in the input. It has browser-specific behavior and a mobile keyboard switch on mobile devices. The Phone number or Number properties works well with this input field.

 

Radio

Radio allows you to provide a list of options based on the List property. Only one option can be selected at a time. The List property works well with this input field.

 

Options

• Label position

  Set the label text position around a radio item.

• Row
  ​The radios are displayed in a list or a row next to each other.

  

Rating

Rating component allows you to collect a score from 1 to 10 (customizable) and parse this to the Form action. The Number property works well with this input field

​​

Unique options include:

• Is read-only
  ​Stops the user from being able to change it

  

• Number of icons
  Allows you to define the score of the given rating from 0/1 to 0/10.

  

• Precision
  When enabled, Allows users to select half an icon. Enabling to give a,5 rating up to 10.

  

• Size
  Changes the size of the rating icon.

  

Rich text editor

Rich text editor allows you to collect text, and save its styling and formatting. The Rich text property works well with this input field.

 

Options

• Height
  Sets the height of the component using its parent height

• Width
  ​This option specifies the width of the text area.

• Spacing
  Allows you to set the outer space of the component, with options to define the space per side: top, left, right, bottom.

 

Toolbar options:

• Bold - Write the selected text in bold

• Italic -Write the selected text in italic

• Underlined - Writes the selected text while underlined

• Strikethrough - Write the selected text with a strikethrough

• Code inline - Allows you to write code structure in the rich text editor and allow javascript or other coding tags to pass through the action.

• Code block - Allows you to write an example code block using javascript or other coding tags

• Numbered list - Lists the text in a numbered order

• Bulleted list - Lists the text in a bulleted order

• Left alignment - Aligns the text on the left-hand side of the rich text field

• Center alignment - Aligns the text on the center of the rich text field

• Right alignment - Aligns the text on the right-hand side of the rich text field

• Justify alignment - Aligns the text according to the parent component it is placed into, justified.

 

URL

URL input is used to enable end users of the application to fill in a URL in the input. It has browser-specific behavior and a mobile keyboard switch on mobile devices. The URL property works well with this input field.

 

Using the components

Let’s look at the configuration of a model-based - Form component and an input field on a page canvas.

• Drag a Form into a section of your page layout

• Select the model you would like to use in your form

• Select one or more properties you would like to collect data from on your page

• Press Save, the form will now be generated

• To add input fields, drag an input field on your form

  • Select a property connected to the model your form uses

  • Press Save

  • The new input field has been added to the model

    • Beware: in the form action, the input variable has been created but not yet connected to action steps, you will need to do this manually if you wish to do so

Beware: in the form action, the input variable has been created but not yet connected to action steps, you will need to do this manually if you wish to do so

If you would like to know more about configuring an action behind a form, have a look at building an action.

Regular Form vs the other Form components

The Form component can be customized from the get-go by dragging it onto your canvas and adding input components in the form field. (don’t forget to add the added input fields in the action too!).

However, to save yourself some work, you can also use the Create form, Update form, or Login form. These forms come with an in-depth wizard to help you set up their functionality instead of having to do it manually, look into this article for more information.

Regular Form vs configured Forms

The regular Form component is a starter for the predefined forms, our advice would always be to start with a Create or Update form as most of the steps users often take are connected to an update or create action, and how nice it is if it’s already there for you!

However, if you would like to parse multiple variables to your action, the regular form is perfect. Maybe you would like to delete multiple items at once, for this case, you could use the regular form and add multiple Hidden input components to the form and parse these to the action behind the form.

Another case would be to combine them with the use of schema models, it could be possible that you would like to collect data in your schema model and modify it after for other use cases.