How do I use the barcode scanner?

In this episode, we'll learn how to populate field values in a Form using:

• the Form Component
• the Barcode Scanner
• Pipes & Rules

Features Discussed:

1. Main Dashboard (Time: 2:21)
   Learn how to create a dashboard with card components to display metrics (e.g., total clients, ongoing jobs).
2. Form Component (Time: 2:21)
   Learn how to configure form components for efficient data entry. For example, you can set up a form to capture user information, configure field validations, and customize the form layout to enhance user experience.
3. Barcode Scanner (Time: 2:44)
   Learn how to enable and configure a barcode scanner within a form to streamline data input. For instance, you can use the barcode scanner to quickly add product details by scanning product barcodes, reducing manual entry errors.
4. Pipes & Rules (Time: 10:47)
   Learn how to use the Tadabase REST API, focusing on filtering data by a single field. This allows you to retrieve specific records from your Tadabase application by applying a filter to the API request, ensuring you only get the data you need based on a particular field's value. This is especially useful for integrating Tadabase with other applications or building custom interfaces.
5. Rollup (Time: 11:59)
   Learn how to use rollup fields to aggregate data across related records. For example, you can create a rollup field to calculate the total value of all invoices related to a specific client, helping in financial reporting and analysis.

Transcript Summary

Introduction

Hey everybody, welcome back to Build It with Tadabase. In this week's episode, we're talking about the barcode scanner and specifically how to actually use it. I'm going to show you how to use this feature, and then we'll take it to the next level.

What we're going to be doing is primarily using the form component, where the barcode scanner is baked in. We'll also talk about pipes and rules to push this feature to its limits and build some cool stuff.

Overview

Let's take a look at the finished product. We have a barcode generated inside the application. I’ll switch over to my cell phone to show you how we can scan this barcode, fill out the form, and save it. When we go back to our application, you'll see that we now have a new registration record. This example uses a text field and a connection field, and I'll show you how to do both.

Basic Barcode Scanner Setup

Today, we're going to talk about and show you how to use the barcode scanner inside of a form component. It's really easy to use, and we can do some more complex and unique things with it.

Simple Data Table: Registrations

We have a simple data table called "Registrations." Let's say we're collecting information about registrations for a particular event. The table includes fields like event name, number of guests, whether a booth is needed, and comments.

Enabling the Barcode Scanner

To enable the barcode scanner, it’s all within the form component. We’ll add a page, call it "Example One," and add it to our menu. We'll use a form to insert a new registration record. Inside the form component, select a text field and enable the scanner. You'll see a new option called "Scanner Options" where you can adjust settings like submitting on a successful scan, toggling the scanner UI, setting width and height, and selecting additional formats.

Previewing the Barcode Scanner

In the builder, you won’t see much difference, but when you preview the page, there will be an additional button. I’ll switch over to my cell phone to show you how this works. After generating a QR code with the event name, you can scan it using the barcode scanner. The text value for the event name will be filled in automatically, and you can continue to complete the form and save the record.

Advanced Functionality: Generating QR Codes

The most basic functionality of the QR code scanner is useful, but we can take it to the next level by generating our own QR codes.

Creating an Events Table

We'll create a new table called "Events," where we'll store event names. Then, we'll use a pipe to generate QR codes.

Using Pipes to Generate QR Codes

We’ll use the "Generate SVG QR Code" pipe. This outputs an SVG image code that we can save into a rich text field. We’ll add this as a rule to generate a QR code automatically when a new event is created or edited.

Connecting Events with Registrations

If we want to store event data as connections instead of just text, we can use the database REST API pipe to make this work.

Setting Up the Database REST API Pipe

We’ll install the database REST API pipe and use it to look up the event name and return its record ID. We’ll set connections based on the record ID using this pipe.

Creating a Connection Field

We’ll create a connection from the "Registrations" table to the "Events" table, allowing us to link each registration to an event. Then, we’ll set up the pipe to find the event by name and set the connection field to the event’s record ID.

Adding Rollup Fields

To further analyze registrations, we’ll add rollup fields like the total number of registrations, how many need a booth, and the total number of guests.

Live Example and Final Setup

I’ll switch back to my phone to show you how this works in the live app. The scanner will fill in the event name, and after saving, the registration will be linked to the event. We'll set up a page to display all generated QR codes for easy access.

Conclusion

I hope this video gives you a good understanding of the barcode scanner, how to use it, and how to extend its functionality for more complex scenarios. That’s it for this week’s episode of Build It with Tadabase. I hope you enjoyed it, and we’ll see you next week. Thanks for watching!