All Collections
Building your application
Pages
Using page components
Form & input components its inputs
Form & input components its inputs

Learn about the Form component: its characteristics, options and the inputs you can add to it.

Updated over a week ago

After reading this article, you’ll know:

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

  • The important options and uses of the Form component and its inputs

We would like to note that this is quite a big article since the form and its input components all belong together. use the quick-navigate menu on the right side of the page to navigate to the segments you are looking for!

What is the Form component?

Form components serve for gathering input from users and submitting it to the action(s) connected to the form. In other words, by employing Form components, one can create web pages with input fields that are 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 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 interactions that are pre-build with the form. Be careful: if you change these the 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 are components that 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 that has the same type as the data you want to collect; are you asking for a username that is an email address? Use the email input component. Is the username a short name? Use the text field input component.

We will cover what kind of property we would advise to use with each input field down below.

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 single-line and text multi-line properties are selected in the configuration wizard of the form, the component will be created including a single-line text input field and a multi-line text input field.

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.

Form & input options

The 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.

Interactions > Triggers

  • 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.

Interactions > Functions

Submit

This component function triggers the form to be submitted.

Input components

Input configuration field

When adding an input component to an existing form, you select what the intended property this input is going to be submitting. The combination of the selected input and property will determine the action input variable that can be mapped to the assigned rows within the action.

Configure form input field

Textfield

The 'text (single line)' property works well with this input field

The text field 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.

Options

  • Based on Property
    ​    This is the property selected in either the form or input configuration. It is used for the connection between 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 value of the input component to give it a default value or base it on a dynamic property.

  • Validation Options
    ​     This functions as a dropdown to reduce the number of options.

    • Required
      ​      When enabled, this input is required and informs the end user if there is no input.

      • Required Message
        ​        Configure what validation message is displayed.

    • Validation Pattern
      ​      Fill in a regex pattern that the input needs to pass.

      • Pattern mismatch message
        ​        Configure what validation message is displayed.

    • Min Length
      ​      Configure the minimum amount of characters the end-user needs to fill in.

      • Value too short message
        ​        Configure what validation message is displayed.

    • Max Length
      ​      Configure the maximum amount of characters the end-user can fill in.

      • Value too long message
        ​        Configure what validation message is displayed.

  • Autocomplete
    ​    When this option is enabled, the browser of an end user will show autocomplete suggestions. More info.

  • Disabled
    ​    This 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 text within the input component when a user has the input focused.

  • 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.

  • 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.

    • Icon position
      ​      The icon can be displayed at the start or end of the input component.

  • Styles options
    ​    This functions as a dropdown to reduce the number of options you see.

    • Configure the various colors used within the input component.

  • Advanced options
    ​    This functions as a dropdown to reduce the number of options you see.

    • Test attribute
      ​      This option allows you to set a data attribute on the component. It can be used to make the selection of these components easier when working with various tools such as testing tools, gathering metrics, or even styling based on custom CSS.

Interactions > Triggers

  • onChange
    ​    This event is triggered when the value of the input is changed.

Interactions > Functions

  • Clear
    ​    Clears the value within the input.

  • Reset
    ​    Resets the value within the input to its default.

Enable/Disable

Sets disabled the state of the input.

Text area

The 'text (multi-line)' property works well with this input field

The text area 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.

The options are the same as in the text field with the exception below:

  • Multiline

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

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

Interactions

The interactions are the same as in the text field.

File upload

The 'File' property works well with this input field

The 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' properties.

File upload input

The options are the same as in the text field with the exception below:

  • Max File Size (MB)
    Fill in a number for the maximum file size in megabytes as client-side validation. On the property, the max file size can be set to validate from the server side with a max of 25 MB.

    • Invalid Max File Size Message
      Configure what validation message is displayed.

  • Hide default error

    • If the error message should be displayed on the component

  • Accept Files
    Configure the accepted mime type.

    Note: This will also affect the files the user can select when the file dialog opens.

Interactions > Triggers

  • onChange
    This event is triggered when the value of the input is changed.

  • onError
    This event is triggered when the upload of a selected file fails

    • The error message is part of the event

  • onSuccess
    This event is triggered when the upload of a selected file completes

  • unloading
    This event is triggered when the uploading of a file begins or completes

  • online
    This event is triggered when the uploading is done, regardless of success or failure

Interactions > Functions

  • ClearFileUpload
    Clears the value within the input

Image upload

The 'Image' property works well with this input field

The 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.

File upload component

The options are the same as in the file upload component overview with the exception below:

  • Show Image Preview
    When enabled, it will display a preview of the current or recently uploaded file.

  • Image Preview Width
    Defines the width of the preview in pixels.

  • Image Preview Height
    Defines the height of the preview in pixels.

The interactions are the same as in the file upload component overview.

Email

The 'Email address' property works well with this input field

The 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.

Options

The options are the same as in the text field with the exception below:

  • Validation Pattern
    ​    The email input comes with a default value to check if the input matches the format of an email address. Using the input on mobile devices also updates the keyboards to match the intended input of the user.

Interactions

The interactions are the same as in the text field.

Password

The 'Password' property works well with this input field

The 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.

Options

The options are the same as in the text field with the exceptions below:

  • Validation Pattern
    ​    The password input comes with a default value to check if the password matches the minimal requirements defined by Betty Blocks.

  • Icon
    ​    Displays an icon inside the input component to give context to the end user. When clicking this icon it toggles the visibility of the characters within the input.

Interactions

The interactions are the same as in the text field.

Phone number

The 'Phone number' property works well with this input field

The phone number 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.

Options

The options are the same as in the text field with the exceptions below:

  • Validation Pattern
    ​    The number input comes with a default value to check if the input matches the format of a phone number. Using the input on mobile devices also updates the keyboard to match the intended input of the user.

Interactions

The interactions are the same as in the text field.

URL

The 'URL' property works well with this input field

The 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.

Options

The options are the same as in the text field.

Interactions

The interactions are the same as in the text field.

IBAN

The 'IBAN' property works well with this input field

The 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.

Options

The options are the same as in the text field with an exception:

  • Validation Pattern
    ​    The IBAN input comes with a default value to check if the input matches the format of an IBAN format.

Interactions

The interactions are the same as in the text field.

Hidden input

Depending on the expected input of the hidden input field: the text, number, or checkbox property works best with this input field.

The hidden input can be used to pass values to the action the end user is unable to directly update.

Configure

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

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

Value

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

Checkbox

The 'Checkbox' property works well with this input field

The checkbox allows you to let the end users submit boolean values.

Options

  • Based on Property
    ​    This is the property that was selected in either the form or input configuration. It is used for the connection between 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 value of the input component to give it a default value or base it on a dynamic property.

  • Validation Options
    ​     This functions as a dropdown to reduce the number of options you see.

    • Required
      ​      When enabled, this input is required and informs the end user if there is no input.

      • Required Message
        ​        Configure what validation message is displayed.

  • Disabled
    ​    This option sets the input in its disabled state to prevent the values of this input from being submitted and the end user from filling in any values.

  • Helper text
    ​    Adds text below the input to give the end user more information. In case there are validation messages, this text will be replaced to display them.

  • Label Position
    ​    The position of the label versus the checkbox.

  • Size
    ​    The default sizing is available for the input component.

Interactions > Triggers

  • onChange
    ​    This event is triggered when the value of the input is changed.

  • IsTrue
    ​    This event is triggered when the checkbox is set to check.

  • IsFalse
    ​    This event is triggered when the checkbox is set to unchecked.

Interactions > Functions

  • Check
    ​    This component function sets the checkbox to be checked.

  • Uncheck
    ​    This component function sets the checkbox to be unchecked.

Check/Uncheck

This component function sets the toggles to the checked value.

Checkbox group

The checkbox group uses a relational connection to a relational object, for which the 'checkbox' property works best with this input field

The checkbox group works like the checkbox, except it allows you to let the end users submit multiple boolean values.

Options

The options are the same as in the check box except for this one:

  • Model

    Select a model from which you would like to select a relational connection that shows your data object (for example, select the project model from which you would like to show the connected tasks)

  • Label for options
    ​    Select the names that should display as options (for example: task names)

  • Row

    Allow each option to use a row of spacing instead of fitting in the parent component dynamically

  • Full width
    Allows the component to use the full width of the parent component

  • Margin
    Allows you to pick spacing between the box component and the labels

Interactions

The interactions are the same as in the checkbox

Number

The 'Number' property works well with this input field

The 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.

Options

The options are the same as in the text field with an exception:

  • Validation Pattern
    ​    The number input comes with a default value to check if the input matches a numeric value. Using the input on mobile devices updates the keyboards to match the intended input of the user.

  • Min Length
    ​    Configure the minimum value the end user needs to fill in.

  • Max Length
    ​    Configure the maximum value the end user needs to fill in.

Interactions

The interactions are the same as in the text field.

Price

The 'Price' property works well with this input field

The 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.

Options

The options are the same as in the text field with an exception:

  • Validation Pattern
    ​    The price input comes with a default value to check if the input matches a numeric value. Using the input on mobile devices updates the keyboards to match the intended input of a user.

  • Currency
    ​    You can pass in the currency icon via text input. This action replaces the icon option.

Interactions

The interactions are the same as in the text field.

Decimal

The 'Number with decimal' property works well with this input field

The 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.

Options

The options are the same as in the text field with an exception:

  • Validation Pattern
    ​    The numeric input comes with a default value to check if the input matches a numeric value. Using the input on mobile devices updates the keyboards to match the intended input of a user.

Interactions

The interactions are the same as in the text field.

Select

The 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.

Options

  • Based on Property
    ​    This is the property that was selected in either the form or input configuration. It is used for the connection between 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 value of the input component to give it a default value or base it on a dynamic property.

  • Label for options (relational only)
    ​    Overwrite the label that is displayed in the dropdown menu of available options.

  • Validation Options
    ​    This functions as a dropdown to reduce the number of options you see.

    • Required
      ​      When enabled, this input is required and informs the end user if there is no input.

      • Required Message
        ​        Configure what validation message is displayed.

  • Disabled
    ​    This option sets the input in its disabled state. This prevents the values of the input from being submitted and the end user from filling in any values.

  • Helper text
    ​    Adds text below the input to give an end user more information. If there are validation messages are present, 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.

  • 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.

  • Styles options
    ​    This functions as a dropdown to reduce the number of options you see.

    • Configure the various colors used within the input component.

  • Advanced options
    ​    This functions as a dropdown to reduce the number of options you see.

    • Blank Option
      ​      This is the first option displayed in the dropdown and selected when an end user is not sending any value.

    • Test attribute
      ​      This option allows you to set a data attribute on the component. It can be used to make the selection of these components easier when working with various tools such as testing tools, gathering metrics, or even styling based on custom CSS.

Note: Some of the options are still under development, see them below:

  • Filter for options (relational only)
    ​    Filter the records displayed in the dropdown menu of available options.

  • Order by for options (relational only)
    ​    Change the ordering in the dropdown menu of available options.

Interactions > Triggers

  • onChange
    ​    This event is triggered when the value of the input is changed.

Interactions > Functions

  • Reset
    ​    Resets the value within the input to its default.

Note: Some of the options are still under development, see them below:

  • Clear
    ​    Clears the value within the input.

Enable/Disable

Sets disabled the state of the input.

(Multi) Autocomplete

The 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

  • Action input variable
    The action variable with the name provided in the input wizard. It can be used in the related form of action.

  • Property
    The property that was selected in either the form or input wizard. It is used for the connection between 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 value of the input component to give it a default value or base it on a dynamic property.

  • 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.

  • Validation Options
    This functions as a dropdown to reduce the amount of options you see.

    • Required
      When enabled this makes this input required and informs if there is no input.

      • Required Message
        Configure what validation message is displayed.

  • Disabled
    Sets the input in its disabled state this prevents the values of this input from being submitted and the end-user from filling in any values.

  • Helper text
    Adds text below the input to give you 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.

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

  • Variant
    Select the pre-defined styling variants for the input.

  • Styles options
    This functions as a dropdown to reduce the amount of options you see.

    • Configure the various colors used within the input component

  • Advanced options
    This functions as a dropdown to reduce the amount of options you see.

    • Blank Option
      The first option is displayed in the dropdown and selected when the end-user is not sending any value.

    • Error message
      This option is to disable the built-in error message if it is passed as an interaction instead.

    • Test attribute
      Allows you to set a data attribute on the component. This can be used to make the selection of these components easier when working with various tools such as testing tools, gathering metrics, or even styling based on custom CSS.

Interactions > Triggers

  • onChange
    This event is triggered when the value of the input is changed.

  • onLoad
    This event is triggered when the options in the menu are loaded.

  • onSuccess
    This event is triggered when the options in the menu are loaded successfully.

  • onError
    This event is triggered when the loading of options in the menu gives an error.

  • onNoResults
    This event is triggered when the loading of options in the menu returns an empty list.

Interactions > Functions

  • Clear
    Clears the value within the input

  • Reset
    Resets the value within the input to its default

  • Enable/Disable
    Sets disabled the state of the input

  • Filter
    Filters the menu of default available options, this is on top of the configured filter for options option.

  • ResetFilter
    Resets the filters based on the filtering set by filter interactions, the default filter for options persists.

  • Refetch
    Refetches the records in the dropdown menu of available options.

Radio

The 'list' property works well with this input field

The radio allows you to provide a list of options based on the list property. Only one option can be selected at a time.

Radio input component

Options

  • Based on Property
    ​    This is the property that was selected in either the form or input configuration. It is used for the connection between 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 value of the input component to give it a default value or base it on a dynamic property.

  • Validation Options
    ​     This functions as a dropdown to reduce the number of options you see.

    • Required
      ​      When enabled this makes the input required and informs the end user if there is no input.

      • Required Message
        ​        Configure what validation message is displayed.

  • Disabled
    ​    This option sets the input in its disabled state. This prevents the values of this input from being submitted and the end-user from filling in any values.

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

  • Label position
    ​    The position of the label of the radio compared to the input.

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

  • Margin
    ​    Configure the spacing around the input component.

  • Size
    ​    The default sizing is available for the input component.

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

  • Styles options
    ​    This functions as a dropdown to reduce the number of options you see.

    • Configure the various colors used within the input component

  • Advanced options
    ​    This functions as a dropdown to reduce the number of options you see.

    • Test attribute
      ​      This option allows you to set a data attribute on the component. This can be used to make the selection of these components easier when working with various tools such as testing tools, gathering metrics, or even styling based on custom CSS.

Interactions > Triggers

  • onChange
    ​    This event is triggered when the value of the input is changed.

Interactions > Functions

  • Reset
    ​    Resets the value within the input to its default

Note: The reset function is still under development.

Date picker

The 'Date' property works well with this input field

The date picker allows you to configure a form where an end user can select a specific date.

Options

  • Based on Property
    ​    This is the property that was selected in either the form or input configuration. It is used for the connection between the component and the action input variable.

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

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

  • Validation Options
    ​     This functions as a dropdown to reduce the number of options you see.

    • Required
      ​      When enabled, this input is required and informs the end user if there is no input.

      • Required Message
        ​        Сonfigure what validation message is displayed.

  • Autocomplete
    ​    When this option is enabled, the browser of an end user will show autocomplete suggestions. More info.

  • Disabled
    ​    This option sets the input in its disabled state. It prevents the values of this input from being submitted and an end-user from filling in any values.

  • 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.

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

  • Disable past dates
    ​    Prevents an end user from selecting dates in the past.

  • Close the picker after selecting
    ​    The picker is closed after selecting a value.

  • Margin
    ​    Configure the spacing around the input component.

  • Size
    ​    The default sizing is available for the input component.

  • Full width
    ​    When enabled the width of the input will be based on the width of its direct parent container component.

  • Variant
    ​    Select the Standard, Outlined, or Filled styling variants for the input.

  • Picker Variant
    ​    Select the dialog, inline, or static variant for the picker.

  • Disable Toolbar
    ​    Hide the toolbar within the picker.

Interactions > Triggers

  • onChange
    ​    This event is triggered when the value of the input is changed.

Interactions > Functions

  • Clear
    ​    Clears the value within the input

Note: Some of the options are still under development, see them below:

  • Reset
    ​    Resets the value within the input to its default

  • Enable/Disable

    Sets disabled the state of the input

Date time picker

The 'Date time' property works well with this input field

The date picker allows you to configure a form where an end user can select a specific date.

​​Options

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

  • Use a 24-hour format
    ​    Displays the time in the input in a 24-hour format

Interactions > Triggers

  • onChange
    ​    This event is triggered when the value of the input is changed.

Interactions > Functions

  • Clear
    ​    Clears the value within the input

Note: Some of the functions are still under development, see them below:

  • Reset
    ​    Resets the value within the input to its default

  • Enable/Disable

    Sets disabled the state of the input

Time picker

The 'Time' property works well with this input field

​​

Options

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

  • Disable past dates
    ​    This has no use in a time picker.

Interactions > Triggers

  • onChange
    ​    This event is triggered when the value of the input is changed.

Interactions > Functions

  • Clear
    ​    Clears the value within the input

Note: Some of the functions are still under development, see them below:

  • Reset
    ​    Resets the value within the input to its default

  • Enable/Disable

    Sets disabled the state of the input

Switch

The 'Checkbox' property works well with this input field

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

Options

The options are the same as the check box.

Interactions

The interactions are the same as the check box.

Rating

The 'Number' property works well with this input field

The rating component allows you to collect a score from 1 to 10 (customizable) and parse this to the form action.

​​Options

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

  • 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

  • Outer space
    Changes the spacing around the text and icons within the rating component

  • Icon
    Allows you to change the selectable icons for the rating selector

Interactions

The interaction options are the same as for the checkbox component.

Rich text

The 'Rich text' property works well with this input field

The rich text editor allows you to collect text, and save its styling and formatting.

Options

The options are the same as in the text field with the exception below:

  • 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.

Interactions

The interactions are the same as in the text 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

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.

Related Articles
Form component reference
Create, Update & Login form components
Column component
Button, Open page button, Action button & Logout button components
Alert component
Did this answer your question?