Designing a Basic Form
Last updated
Last updated
Forms are structured using sections, which are further divided into columns where different types of data fields are added.
To add new sections or columns, go to the toolbar and click on the Layout option.
When you click, the tool will be selected, and the cursor will display a colored line in the space where the column (if being added within an existing section) or section (if not being added to an existing one) will be placed. You can add as many sections and columns as needed.
Sections take up the full width of the form, while columns have a total size of 12 units, equivalent to 100% of the section's width. When selecting a column, the Properties panel will appear. In the General section, you can view general properties such as size and title.
Start by inserting a new section. Next, insert a column within the section and reduce its width to 6 units. Then, insert another column next to it, so there are two pairs of columns within the section.
Finally, click the Save button to save your progress.
Now it's time to rename the sections. Click on the first section and go to Properties > General > Title. We'll name this section "Personal Data." Then, go to the second section and name it "Contact Information." Next, select each of the columns and ensure they don't have a title, as these will be assigned to the fields.
We will now start adding components to the form. Some elements will be useful for displaying static information, while others will allow you to collect user data.
Among the static elements, we find the Text and Image tools, which allow you to add fixed text or images. These types of elements are generally used to add titles, logos, or provide help messages or highlighted information to the end user.
In the default form, this field is used within the column in the upper section to display the form's name. As with sections, you can go to Properties > General > Title to modify its name. We'll name it the same as the form: "Data Update."
Input fields offer greater variety, as they are designed to record different types of data. In addition to tables, which have their own button in the toolbar, you can find all the options you need in the Text field dropdown.
We will add two basic types of fields to our form:
Text
Allows the entry of a single line of text, useful for brief data such as names and addresses.
Number
Configured to accept only numeric characters, useful for applications like phone numbers, IDs, and quantities.
Select the Text option from the dropdown and click on the first column of the "Personal Data" section to add it.
The Properties > Name section is used to assign a name that identifies each specific field in the form. It is recommended that names do not contain spaces and are clear, as they will only be visible internally, allowing you to retrieve and organize data. Rename this field as "last_name_first_name" and press OK (or the enter key).
Place another text field below, rename it "nationality," and press OK.
Now repeat the same procedure in the second column, but this time adding a numeric field and another text field. Select the Number option from the dropdown and place a field we will call "id_number." Then, from the Text option, insert a field where the user will enter their tax ID, which we will call "tax_id" (known as "CUIL/CUIT" in Argentina).
The fields should look like this:
Later, we will delve deeper into the properties, appearance, and behaviors of each type of element and explore various validation options. For now, we will focus on the General section:
Label
Allows you to set the name the end user will see when accessing the form.
Size
Defines the field's width. As with columns and sections, the 12 units are proportional and mean the field occupies 100% of the column it is in. This number can be reduced by decreasing its size, freeing up space to insert new fields alongside existing ones.
Required
Specifies whether the form field is mandatory (True) or not (False). Note that, as we will see later, this property can be replaced by the validation expression isEmpty, which provides a more specific and personalized message when a field is left blank.
Select each of the fields you have created and set the following values:
Label will be named in each case: Last Name and First Name, Nationality, ID Number, and Tax ID.
Size will retain the default width of 12 units.
Required will have the value True for all four fields, making them mandatory.
To check your progress, you can use the Live Editor mode of the visual editor, which you will find under the name Preview to the right of the form elements. When you activate the button, it will show you a real-time preview of your form, where you can continue editing the properties of its components and testing its functionality.
The main limitation of this mode is that you cannot add new fields or layout elements, so you will need to deactivate it to continue working on your form design.
Now it's time to complete the second section: "Contact Information." Add a Text field in the first column. Define the properties Name: "email" and Label: "Email Address." Add another Number field in the second column, with the properties Name: "phone" and Label: "Phone Number." If you add a component by mistake, you can always delete it by selecting the element and clicking the Delete option displayed in the bottom-right corner.
When you're done, click Save to save the form and go to the Preview option located next to the visual editor and code editor buttons to check the final design of your form in this initial stage.
Finally, click the cross to close the form and return to the main screen of your workspace.
Congratulations! You have completed the quick start guide by learning how to create a form with new sections and components to collect basic data. Keep progressing to learn more about the features and functions of RPA Connect.
