After reading this article, you’ll know:
The use of three common form components and their configuration
The important options of these form components
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.
Read more about the Form component and input components in this article.
Configuration
When adding the Form component to the canvas, one can first follow the configuration form to select what model and properties the form will be based on. Depending on what kind of properties are selected, input components will be created within the form to match them and a form action will be created corresponding to the selected form.
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 alerts. 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 configuration 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 built-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 login configuration 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 the 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. |
Options
All three forms have the same options.
Options
|
|
Interactions > Triggers
Interactions > Functions
|
Using the components
Let’s look at the configuration of a Create form component, how its input fields get added based on the selection made in the configure wizard, and the create action behind the form.
This works similarly for the UIpdate form component, for the login component other requirements are necessary.
Regular form vs configure forms
The regular form component is a starter for the configured forms, it depends on what you are trying to achieve with your page. But if you want to collect data and save it in your application, or update existing data, 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.
For logging in to your users, always use the Login form component. If you wish to customize your login flow, it can be done by adding necessary input fields to the configured form and/or by updating the changes to the login action.
Conclusion
Configure forms are ideal for a quick start in CRUD pages and many other use cases that require you to add data based on user input, or update data on user input, the login form saves you from having to create all items manually, so all in all its a faster process to use the configure forms if they match your needs!