Dive Deep into Tadabase's Field Settings

 

Hello Tadabase Users,

In this episode of Build It With Tim, we explored additional field settings available in the Tadabase page builder, specifically focusing on the form component and the table component. These settings empower you to enhance the functionality and appearance of your applications. Let's delve into what we covered and how you can achieve your goals with these features.

Goal: Enhancing Field Functionality and Appearance

The goal of this tutorial was to explore various settings for date fields, attachment fields, address fields, connection fields, and slider fields. These settings allow you to configure restrictions, change display formats, and enhance user interactions within your Tadabase applications.

General Instructions for Achieving the Goal:

1. Date Fields:

   • Easily restrict date selections to the future, specific date ranges, or weekdays only.
   • Format dates dynamically, showcasing real-time countdowns or natural language age representations.

2. Connection Fields:

   • Modify how connected data is displayed, transitioning from simple dropdowns to more detailed list or table views.

3. Address Fields:

   • Utilize Google Maps integration to validate addresses.
   • Enable a button to capture the user's current location, enhancing user experience.

4. Attachment Fields:

   • Customize settings for maximum file size, accepted file types, and capture methods (image, video, or audio).
   • Implement resizing and compression options to optimize uploaded images.

5. Slider Fields:

   • Enhance the visual representation of sliders by configuring progress bars with various styles and colors.

Conclusion:

These enhancements provide you with versatile tools to create tailored, user-friendly applications. Whether you're building complex forms or organizing data in tables, these additional field settings empower you to craft personalized and practical interfaces. By following the straightforward steps outlined in this tutorial, you can quickly elevate your application's functionality and user experience.

We hope you found this tutorial helpful in your Tadabase journey. As always, if you have any questions or need further assistance, don't hesitate to reach out. Stay tuned for more exciting tips and tricks on the next episode of Build It With Tim.

Features Discussed:

1. Form Component (Time: 1:01)
   Learn how to add fields like date, attachment, address, sliders, and connection fields. Example: Restrict date selections and modify connection field displays.
2. Table Component (Time: 6:21)
   Learn how to format fields, such as showing age or using progress bars for sliders. Example: Apply custom color rules for progress bars based on conditions.

 

---

Transcript Summary

Introduction

Hey everybody, this is Build It with Tadabase. On today's episode, we're going to be talking about additional field settings that are available to you inside the Page Builder, specifically within the form component and the table component.

Background

The idea for this video actually came from me, who's supposed to be your resident Tadabase expert. But I got absolutely humbled last week when I completely forgot that a specific feature existed. So, I've picked a couple of fields that we're going to talk about today to show you those additional settings inside the form component and the table component. Let's get into it and check them out.

Setting Up the Sample Page

The fields we've added to our sample data table include:

• Date Field
• Attachments Field
• Address Field
• Slider Field
• Connection Field

Inside the Page Builder, I've set up a simple page with a table component on the left-hand side to display the records from that table and a form component on the right-hand side to input new records into that data table.

Published Application Overview

When we check out what this page looks like in our published application, everything looks pretty standard:

• Date fields
• Address fields
• Slider fields
• Connection field

Filling out the form works as expected:

• You can type in your address, and Google Maps will validate it.
• You can select your connected company through a dropdown.
• The date picker allows you to choose a date.
• The progress slider lets you select a value.
• The attachment field allows you to upload images through a drag-and-drop interface.

Date Field Settings

The first field I want to talk about is the date field because this one got me just last week. Often, when dealing with form components and date fields, there's some sort of validation happening inside the form to ensure that a date meets a specific condition. I've done a couple of videos on validation rules, but when it comes to date fields, there's actually a much simpler way to restrict what the user can and cannot select.

By clicking on the date input field options, we can restrict dates to be in the past, in the future, by day range, or by date range. For example, if we only want future dates to be selected, we can choose "restrict dates to future dates." Additionally, we can toggle week numbers on or off, select the start day of the week, and restrict specific days (like weekends) from being selected.

After saving these settings and checking the published application, we now have an entirely different date picker:

• No past dates can be selected.
• Only weekdays can be selected; weekends are disabled.

Connection Field Settings

By default, connection fields appear as a simple dropdown that displays a field value from your connected table, like a company name. However, if you want to display more information about that company, you can change how that field is displayed inside your form. By enabling options like a list or table view, you can add additional fields from the connected table and display them through the dropdown.

Address Field Settings

For the address field, users can type in their address and get Google Maps results to validate the address. Additionally, there's an option to add a button to get the current location. Toggling this option on adds a button that allows users to click and get their current location.

Attachments Field Settings

The attachments field has more options than just resizing by width, height, and compressing the quality of the image. You can:

• Restrict by maximum file size
• Limit the maximum number of files
• Specify accepted file types
• Set the capture method (e.g., image, video, microphone) for mobile devices
• Change the default text inside the drag-and-drop area

These settings are incredibly handy to ensure users don't upload oversized photos.

Displaying Records in the Table Component

Once we've configured our form component and added records, it's time to display them in a table component. By default, the table component displays values regularly:

• Date fields look like date fields.
• Address fields are clickable to open in Google Maps.
• The progress slider displays as a number value.

However, the additional settings we discussed for the form component can also be applied to the table component. For example, you can change the date field format to display as a stopwatch or as an age value.

In the published application:

• The stopwatch shows a real-time running clock of how much time has passed.
• The age format displays in natural language, including years, months, and days.

Progress Slider Settings

By default, the progress slider shows a simple number value. However, you can change the output to a progress bar and modify what that bar looks like. For example, you can change the bar to a stripe and add color rules to define the conditions under which the bar changes color.

Conclusion

That wraps up this week's episode of Build It with Tadabase. I hope you found these quick tips useful. Hopefully, they were new information for you and will allow you to add more personal and practical touches to your application, whether through how things are displayed inside a table component or how users interact with data through your form component. All of these options are super quick and easy to set up, so I highly recommend checking them out.