Tadabase powered moving & packing app

In this episode of Build it with Tim, we'll build a moving & packing app with the ability to manage items you are packing, print a packing list, and generate QR codes to track inventory.

Features Discussed:

1. List Component (Time: 10:19)
   Learn how to sort by container number in descending order, select fields like container number, type, and location, and customize the button for viewing details. For example, explore how to use the layout and data source settings to create a user-friendly display, ensuring that your containers are organized and easy to navigate.
2. Submit Rule (Time: 12:22)
   Learn how certain fields, like items, are populated only after the container is created. After submission, the form redirects users to a detailed container page, allowing them to add items to the container immediately.
3. Links (Time: 15:01)
   Learn how to enhance your application's user interface by adding functional edit and delete buttons with icons. For example, replace standard text links with buttons that include visual icons like a pencil for editing and a trash can for deleting, making your application more intuitive and visually appealing. Customize these buttons with different styles and colors, such as full-width, large, and using color themes like "info" and "danger" for better user interaction.
4. Search Component (Time: 19:17)
   Learn how to utilize the equation field to manipulate data output, including converting values into HTML format for custom display.
5. Pipes (Time: 24:49)
   Learn how to generate a Base64 encoded QR code for each record using Tadabase's QR and Barcode Generator Pipe.
6. PDF Pages (Time: 36:48)
   Learn how to create a printable sheet with QR codes for each container, allowing for easy identification and tracking. The tutorial covers setting up the PDF page, adding an HTML field for the QR code, and creating a print button to generate the PDF for inventory management or other purposes.

Transcript Summary

Introduction

Hey everybody, welcome back to Build It with Tadabase. In today's episode, we're building a moving and packing app. Guess who is moving? I'll be moving in just a couple of weeks. As you can see behind me, I've already started clearing a lot of stuff out of the house, and I need a way to manage all of the items in the house—what bins, what boxes they are going into, and how to keep track of things through the moving process.

Overview of the Finished App

As usual, we're going to take a look at the finished application first and then dive into the Builder to get started.

Inside our moving and packing app, we have the ability to add containers, whether it's a bin, a box, or some bulk item. We can choose the container type and the location of the container—what room it came out of or is going to, or both.

• Adding a New Container:
• For example, we can add a new container, select "Box," and assign it to the living room.
• After adding a new container, we can add items to it, such as books, toys, blankets, etc.
• Once packed, we can manage and search for containers based on the container number or the items inside.
• Packing List Page:
• This page provides a list of all containers that have items and are at the location where we are loading the truck.
• We can print the packing list as a PDF to mark off inventory when loading and unloading the truck.
• QR Codes Page:
• We have a page for QR codes where we can run a scheduled task to generate QR codes for each container.
• These QR codes can be printed, cut out, taped onto the boxes, and scanned with a phone to see what's inside.

Building the App from Scratch

We're going to start from scratch for this app, meaning we'll create the data structure and the page structure ourselves, step by step.

Step 1: Building the Data Structure

1. Containers Table:

• Create a table for containers (bins, boxes, or large loose items).
• Add a connection from items to containers.
• Change the primary field to "Container Number" instead of "Container Name."
• Add fields for container type, location, and room (e.g., garage, kitchen, master bedroom).

1. Items Table:

• Connect items to the container and keep the item name text field.
• Add a roll-up field to concatenate the names of items inside each container.

Step 2: Building the Page Structure

1. Containers Page:

• Add a page to list all containers as cards.
• Sort containers by their numbers in descending order.
• Add a button to view items in each container.

1. Add Container Page:

• Create a form to add new containers and connect it to the "Container Details" page.

1. Container Details Page:

• Modify the detail components and add a form to add new items to the container.
• Add a list component to display connected items with edit and delete buttons.

Step 3: Adding QR Code Functionality

1. Generating QR Codes:

• Create a pipe to generate base64 QR codes for each container.
• Store the QR codes in a long text field.
• Build a scheduled task to populate QR codes for all containers.

1. QR Codes Page:

• Add a page to display QR codes, formatted in three columns.

Step 4: Adding a Packing List PDF

1. Packing List Table:

• Add a packing list page to show all packed containers and their contents.
• Filter data to show only containers that are packed and located at the house.

1. PDF Generation:

• Create a PDF layout and a packing list PDF page to print the inventory list for moving.

Conclusion

That's it for this week's episode of Build It with Tadabase. If you are moving, I hope you find this app useful. I know that I will when I move in a couple of weeks—it's certainly going to make our lives so much easier throughout the entire process. Thanks so much for watching, and we'll see you next time. Take care!