In this article, we’ll learn about the form component, how it works and what you can do with it. I’ll go over a few of the options and how to set a form up form the start!
The form component must be dragged inside a column component. When dragged into a column you can see that it contains a textfield and a button. The textfield has a lot of options like a label, we can use a label to give a user an idea of what the purpose is of a textfield. The value where we can give the textfield a predefined value or assign a variable to the textfield. We can name an input variable, this is usually the same name as the label but with capital letters, this input variable will contain the data of the textfield when we submit the form.
We can set the type of the textfield to either text or number.
There are 3 checkboxes that we can check, the first one makes the textfield a required field. The form won’t submit if there’s no value in this textfield. The error checkbox makes the textfield show as an error. The disabled checkbox disables the textfield entirely, users can’t put any value into the textfield when this checkbox is checked.
We can set a placeholder text to give the user an example of what he should write inside of the textfield. The helper text allows us to give the user a small tip, for example that a password needs to contain a special character.
There are 3 styling options for the textfield, the first one is the variant we can change how the textfield looks by choosing either the standard look, the outlined look or the filled look. The checkbox can be checked this will make the textfield the full width of the column, or it can be unchecked and it’ll be reduced in size.
The actual size can be changed as well by picking one of the following three options: small, medium or large. And lastly we can change the margin of the textfield to none, dense or normal.
The button also contains quite a few options, the first one is the type option, a button can be used for either submitting our form or to reset our form. We can change the buttons’ text so it’s clear for a user what the purpose is of the button.
The style of the button is also adjustable to just plain text, a smooth outline, or by default contained. We can check the Full width checkbox to make the button as wide as our form is.
The form component can submit data, to process the data submitted by the form we’ll need to create an action. This is where the edit action button comes into place. When clicked on a new tab opens that redirects us to the action tab where we can start to build our action. Check out our action reference to learn more about creating action. The input variables created within the form are available here and can be used in any way you want to.
We can also select a model for our form here, this enables us to filter! This is really helpful when we want to edit data. For example, when a user made a spelling mistake and he wants to edit that, this will help him do just that!
Let’s put this into practice! We’ll create a new employee by submitting an employee’s name and his email address, to start off we drag the form component onto our canvas. We then need to add an additional textfield component into the form. Let’s change the labels to name and email and create input variables with the same name.
When we select our form and click on the edit action button a new tab opens up where we can create the action that will create a new employee for us! Make sure to have a model already created for your employees, containing a name and an email address property. When we add a new create action event, we can select our employee model. We can select the email and name properties and assign the input variables created on the form to them.
When we go back to our page we can press the play button to see the live version of our page, let’s fill in the form with a name and email address. When we submit the form a success message will show up or an error message, if the latter is the case then make sure to check the ‘log execution of action’ checkbox inside the action by editing the action and checking the checkbox! We can check what went wrong with the action by navigating to the log tab. If the action was successful however we can check out our newly created employee in our back office, create a new grid for our employees if you haven’t done that already and our new employee will be in there!