Pages
      Back to home
      1. Betty Blocks Documentation
      2. Building your application
      3. Pages

      Create, Update & Login form components

      Learn about the Create form, Update form & Login form components: their characteristics, options, and common use.

      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:
      Form configuration window

      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):
      Create form example

      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.
      Actions behind the create form

      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):
      Update form example

      The action and its Update record step:
      Action behind the update form

      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.
      Configuring login form

      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:
      Login form example

      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.
      Authenticate user action step

      Options

      All three forms have the same options.

      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.

      • Login (available on the login component)
        On a successful credential match, the component logs the user in and redirects the user to the set page.

      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!