Create, Update & Login - Form components

Form components are used to collect input from users and submit that data to the action(s) linked to the form. Put simply, they let you build web pages with input fields that connect directly to a data model.

Create Form, Update Form and Login Form are pre-configured derivatives of Form component for conveniently building 'create record', 'update record' and 'user login' functionalities in one's application. 

On the page builder's side, each Form consists of various input fields (like Text, Date, Autocomplete, etc.), alerts (usually success and error messages) and buttons (e.g. Submit Button). After being configured, Forms connect to models, that maintain data structure, and trigger actions responsible for certian types of business operations. 

Read more about the Form's input components in this article.

Create Form

Create Form is used to create new records in a database. When adding this component to the canvas, you will follow the configuration wizard to select what model and properties the form will be based on. 

Below you see the configure form menu after adding the Create Form component to the application canvas. Here, the Reservation data model is selected with the properties Name, Information, and Date registered.

Depending on what kind of properties are selected, input components will be created within the form to match them and a Form action (with Create Record step) will be created corresponding to the selected 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 Button component so that the end user can use this to submit the input data.

Update Form

Update Form is used to edit the previously created record in a database. The configuration of this component works in a similar way to Create Form. However, there are a couple of key differences that are covered here. 

After adding Update Form to the page canvas, you can select where the data is coming from (this page or another page) or add Form based on a model but without additional configuration:

• Another page: Link from another page to this page, and pass the ID property of the model

• This page: A component on this page is passing the data to this Form (by selecting a component that contains a collection of data, for example Data List or Data Table)

• Other: Add without additional configuration 

When you choose any of these options, an Update Form-specific action is automatically created and configured for you. This makes it easy to update the relevant object directly from the form without additional setup.

When you choose the Other option while configuring an Update Form, the Form is created without automatically generating a new input variable. Use this when the required inputs are already defined elsewhere on the page, so you can reuse Update Forms more flexibly and keep your configuration clean and straightforward.

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.

Options

All three Form components share the same essential options.

Interactions 

There is also a similar set of component interactions available for all Form components. These predefined events let you configure dynamic behavior for your Forms, and each can be adjusted to fit your specific use case.

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

Default Form component vs configured Forms

The default 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!