Data Components Overview

Transcript Summary

Introduction

Hello Tatabasers, Sam here. In this video, I’m going to teach you all about data components. This is a crucial part of creating your app, and I’m excited to dive in!

What Are Data Components?

Data components allow app users to interact with your data. This includes changing and editing the data within your live app. By adding data components, your app users can engage with your data directly.

Types of Data Components

Tadabase offers many data components that you can put into your app. Let’s take a look at the available components:

• Table
• Form
• List
• Map
• Timeline
• Kanban
• Chart
• Pivot Table
• Calendar
• Resource
• Card
• Accordion
• Custom Component
• Search
• Details

Viewing Data in the Builder

To help you understand where the data is coming from, let’s start by looking at the data in the Builder. For this demo, we have an example of a company with technicians. These technicians are stored in the users’ table, and they are assigned to different jobs. We also have a table for FAQs and companies that the technicians work for.

Using Data Components in Pages

Now that we understand the data, let’s go to the Page Builder and see how we can use data components. I’ve set up individual pages with one component each for simplicity, but you can add as many components as you want to a single page.

To add a component, you create a new page, name it, save it, and then click the "Add Component" button. From there, you can select from various data components like form, table, list, and search.

After adding a component, you select the data table it should pull from. For example, if I add a table component, I can pull data from the "Jobs" table, customize the fields, and display them on the page.

Form and Table Components

The form and table components are the most commonly used. The table component displays your data in a tabular format, while the form component allows users to input or edit data.

For example, we can create a form to add new jobs to the system. In this case, the form might include fields like job name, technician, job status, and start/end dates. When the form is submitted, the new job is added to the data table.

Viewing Components in the Live App

Once you’ve set up your data components on a page, you can preview what the page will look like in the live app. The form component will allow users to add new records, while the table component will display the updated data.

Calendar and Resource Components

The calendar component allows you to view data on a calendar based on start and end dates, with color coding by status. The resource component shows which resources (like technicians) are assigned to certain tasks over a period of time.

Other Data Components

• Card Component: Displays metrics like pending jobs, ongoing jobs, and revenue.
• Accordion Component: Useful for FAQs where users can expand and contract sections to see more information.
• Search Component: Allows users to search for records and updates the other components on the page based on the search results.
• List Component: Displays data in a list format, which can include images or attachments.
• Map Component: Plots addresses from your data onto a map, making it easy to visualize locations.
• Timeline Component: Displays a timeline of events based on date fields.
• Kanban Component: Displays data in the Kanban style for quick visualization of the status of items.
• Chart Component: Allows for various types of charts to visualize data, such as job status or pricing.
• Pivot Table: Summarizes data and provides detailed views of aggregated information.
• Details Component: Displays detailed information from connected tables, such as company details for a logged-in user.

Conclusion

I hope this overview gave you a solid understanding of the various data components in Tadabase. We’ll dive deeper into the settings and functionalities of each component in future videos. These components allow users to interact with data, and now you have a good understanding of how to use them to create a functional app.

Thank you for watching!