After reading this article you’ll know:
What the form components are and how they are configured within your application
How these components align with actions
Form and input components functions and options
Table of contents
Form components explained
Form components are forms with input fields and a submit button. The main goal of the form component is to gather the input of the user so that this can be submitted to the actions. Then it can go through the action’s configured flow and the user will receive either success or error messages.
Configure form: default, create and update
Using the form components, you can create web pages that are connected to your data model. When adding the form component to the canvas, one can first follow the configure form to select what model and properties the form is going to be based on. Depending on what kind of properties are selected, input components will be created within the form to match them.
This is the menu of the configure form when a form component is added to the application canvas. As you can see, there is a selected data model with chosen properties: |
Create form
When dragged to the canvas, the create form also adds a success & error alert. These components give the end user feedback depending on the outcome of the action the form is submitting to. The form also has a submit button so that the end user can use this to submit the input data.
All these features are visible in this example of adding the create form (after completing the configure form): |
The create form component is the same as the default form component with the exception that the action based on the create form will have a create record step (see the screenshot below). It will be added where the form input component values are assigned to the selected properties. |
Update form
The update form has a build-in action that'll automatically be configured for you so that you can easily update the object from the form.
The features are visible in this example of adding the update form (after completing the configure form): |
The action and its update record step: |
Login form
When adding the login form on the canvas, you first follow the configure login form and select what authentication profile the form is going to be based on. The authentication profile is based on a model within the application and has defined the username & password property. Also, you will have to choose the page user will be redirected to after successful login. |
Depending on the configured properties in the authentication profile, the login form will create the input components that match those selected properties. |
The login interaction is configured within the form component. The end user’s credentials will be stored as a token in the local storage based on the result of the action and redirect them to the selected page.
That is what the added login form looks like on the application’s canvas. In the interaction menu, we chose that on the action’s success, our end user will be redirected to the home page: |
The login form comes with an authentication user step within the action. The inputs of the form component are assigned to these properties to make sure the values the end user fills in are submitted to the action. |
Form components
Form
Options
Filter Configure the filter based on the selected model of the model option. |
Interactions > Triggers
Interactions > FunctionsSubmit This component function triggers the form to be submitted. |
Input components
Input configuration
When adding an input component to an exiting 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. |
Textfield
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
Interactions > Triggers
Interactions > Functions
Enable/Disable
Sets disabled the state of the input. |
Text area
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:
InteractionsThe interactions are the same as in the text field. |
File upload
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 where it allows the user to populate 'file' properties. |
|
The options are the same as in the text field with the exception below:
Interactions > Triggers
Interactions > Functions
|
Image upload
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 where it allows the user to populate 'image' properties. |
|
The options are the same as in the file upload component overview with the exception below:
The interactions are the same as in the file upload component overview. |
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. |
OptionsThe options are the same as in the text field with the exception below:
InteractionsThe interactions are the same as in the text field. |
Password
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:
InteractionsThe interactions are the same as in the text field. |
Phone number
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:
InteractionsThe interactions are the same as in the text field. |
URL
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 input enables end users of the application to fill in an 18-digit IBAN number (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:
Interactions The interactions are the same as in the text field. |
Hidden input
The hidden input can be used to pass values to the action the end user is unable to directly update. |
Options
Value Configure the value of the input component to give it a default value or base it on a dynamic property. |
Checkbox
The checkbox allows you to let the end users submit boolean values. |
Options
Interactions > Triggers
Interactions > Functions
Check/Uncheck This component function sets the toggles to the checked value. |
Number
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:
InteractionsThe interactions are the same as in the text field. |
Price
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:
InteractionsThe interactions are the same as in the text field. |
Decimal
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:
InteractionsThe 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 list property. |
Limits Currently, the dropdown shows 10 records in the menu of options when based on a relation.
Options
Note: Some of the options are still under development, see them below:
Interactions > Triggers
Interactions > Functions
Note: Some of the options are still under development, see them below:
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
Interactions > Triggers
Interactions > Functions
|
Radio
The radio allows you to provide a list of options based on the list property. Only one option can be selected at a time. |
Options
Interactions > Triggers
Interactions > Functions
Note: The reset function is still under development. |
Date picker
The date picker allows you to configure a form where an end user can select a specific date. |
Options
Interactions > Triggers
Interactions > Functions
Note: Some of the options are still under development, see them below:
|
Date time picker
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:
Interactions > Triggers
Interactions > Functions
Note: Some of the functions are still under development, see them below:
|
Time picker
Options The options are the same as in the date picker except for this one:
Interactions > Triggers
Interactions > Functions
Note: Some of the functions are still under development, see them below:
|