Form Component Part 1
Transcript Summary
Introduction
What's up, databasers? Sam here, and in this video, I'm going to talk all about the form component in Tadabase.
Importance of the Form Component
The form component is one of the most, if not the most, important components in Tadabase. A form component allows users to add or edit database information.
Setting Up the Form
To set up a form, first, you would create a table with all the fields you want to be available for your form. After that, you would create the form by adding the form component and selecting the fields in the page builder. You don't have to include all the fields—just the ones you need. Once that's done, your customers will be able to access the form within your app to add or edit information.
Exploring the Form in the Builder
Let me show you how to set this up in the Builder. Since the form component is so powerful, it has many parts. This is going to be a multi-video series. In this first video, I'll cover the fundamentals and provide a foundation for using the form component.
Sample Tables and Forms
In the Builder, I have a couple of tables: a user table with a connection to companies, a customer table with connections to companies and users, and a company table with a company name and status. On the page, I have a form that allows users to add new customers.
Adding a Form Component
To add a form, you would go to the page builder, add a component, and click on "form." You can choose which table the form will add records to. For example, if you choose "users," the form will add records to the users table. Similarly, you can choose the customers or companies table.
Creating Forms for Different Tables
Once you've added the form, you can preview the page and see the form that allows users to add customers or companies. When you fill out the form and click save, the information will be added to the respective table.
Customizing the Form Layout
You can customize the form layout using the Bootstrap grid system. This allows you to resize and rearrange fields to fit your design preferences, such as adding columns or making fields span across the page.
Quick Add vs. Customized Forms
If you don't want to use the "quick add" option, you can manually select which fields to include in your form. The quick add option automatically adds all fields from the table to the form, but with the customized option, you can drag and drop specific fields.
Field-Specific Options
Each field in the form has specific options, such as the title, help text, and whether it's required or read-only. You can customize these settings based on how you want the form to function.
Required Fields
Marking a field as required ensures that users cannot submit the form without filling out that particular field. This is indicated by a red asterisk next to the field.
Read-Only Fields
If you want to display information without allowing users to edit it, you can set a field as read-only. This can be useful for certain data that should remain unchanged.
URL Parameters
You can also pull values from the URL into the form by using parameters. For example, if you send out a link with a specific value in the URL, you can automatically fill that value into the form.
Attachments and Custom Text
For attachment fields, you can set the maximum file size and the number of files users can upload. You can also customize the text that appears for the attachment field, giving specific instructions to users.
Layout and Grid System
You can organize your form fields using the Bootstrap grid system, allowing for flexible and responsive layouts. You can also control the form title and field placement for a cleaner design.
Barcode Scanner and Disabling Autofill
The form component also supports a barcode scanner for text and number fields, which can be useful in certain applications. Additionally, you can disable browser autofill for a more controlled user experience.
Conclusion
These are just a few of the many features of the form component. In upcoming videos, I will dive deeper into more advanced features and customization options. Stay tuned!