Form Component - Part 2

Transcript Summary

Introduction

What's up, databasers? In this video, we're going to talk about forms and dive deeper into the options available with the form component. We’ll cover topics like multi-step forms, editing information, connected fields, filtering, and using HTML components in forms.

Multi-Step Forms

Let’s start by turning a user form into a multi-step form. A multi-step form allows users to fill in their information across several pages by clicking "Next" to proceed. We’ll set it up so that the first step includes fields like name and email. We’ll add a new step for the user to upload a profile picture, and then a third step for setting up their password.

You can toggle between steps by clicking on them or clicking "Next." You can also edit the step titles and add icons. For example, for the name and email step, we could add a person icon, a camera icon for the profile picture step, and a lock or fingerprint icon for the password step.

In the form settings, we can choose to show the multi-step process at the top of the form. We can also include step names, select either step numbers or icons, and customize the default buttons for progressing through the form.

Previewing the Multi-Step Form

When we preview the multi-step form, you’ll see that the steps we created appear at the top. You can toggle between steps or click "Next" to go to the next step. On the final step, there will be a save button to submit the form. You can also customize these buttons or replace them with action link buttons for more flexibility.

Editing Information with Forms

Next, let’s talk about using forms to edit information. Forms can serve two primary purposes: adding new information (like a sign-up form) and editing existing information (like a profile form).

For example, if you’re editing customer data, you can add a form component to a detailed customer record page. This allows you to edit fields like name, email, or status. After saving, the record will be updated with the new information.

In the form builder, when adding a form to a details page, you have the option to create a form that edits the record, since the app already knows which record is being edited.

Using Connection Fields in Forms

Connection fields allow you to connect records between tables. For example, when adding a new user, you might want to let the user select a company they are connected to. You can add a connection field, which will appear as a dropdown where users can select the relevant company.

Additionally, you can display fields from the connected table in the form, though these fields will be view-only and cannot be edited directly.

Filtering Connected Fields

You can also filter connected fields. For example, if a user is logged in, you might only want to show records that are connected to that user. You can set up filters to display specific records based on predefined criteria, such as only showing companies the user is connected to or only showing users in a certain role.

Dependent Dropdowns

Dependent dropdowns allow you to filter options in one dropdown based on the selection in another. For instance, if you have a form with a company dropdown and a user dropdown, you can configure it so that the user dropdown only shows users who are connected to the selected company. This ensures that the user sees only relevant options based on their selections.

Adding HTML Components to Forms

Lastly, let’s talk about using HTML components within forms. You can add HTML as headers or titles within your forms to enhance the visual presentation. For example, you might remove the default form title and replace it with a custom HTML header that is centered, bold, and styled as a heading.

This provides flexibility to make your forms look more polished and customized to your needs.

Conclusion

I hope this video gave you clarity on how to:

• Create multi-step forms.
• Use forms for both adding and editing information.
• Work with connection fields and filter them based on user roles or conditions.
• Set up dependent dropdowns.
• Use HTML components to improve the visual presentation of forms.

Thank you for watching! I look forward to continuing this series and diving deeper into the form component with different rules and configurations.