How do I build a booking calendar?

In this episode, we’ll learn how to:

• use the Form Component to create new records in our application
• use Data Source Filters to change what records are visible in our Live App
• use Connection Fields to build relationships between records

Features Discussed:

1. Connection Fields (Timestamp: 3:00)
   Learn how to link a single record to multiple tables to limit the selections available
2. Form Component (11:44)
   insert new booking records.
3. connected to page (12:41)
   Learn how to use less pages by linking to child pages that already exists.

4. Table Rules (17:50)
   Enforce rules for table data consistency.

5. Record Rules (20:55)
   Learn how to update a parent record based on a new record in the child table.

6. Dynamic Filters (21:20)
   Apply dynamic filters for tailored results.

 

---

Transcript Summary

Introduction

What's going on everybody? My name is Tim, and this is an episode of Build It with Tim where I'm taking your suggestions for ideas of apps and features and different modules, and I'm going to build it live on the fly. Today we are going to be working on a booking calendar.

The suggestion was how do I build a booking calendar? The idea behind this app was to basically display different time slots that users would be able to select from, and once that time slot is selected, it's no longer available for anybody else to pick. And when we're done, we're going to have an app that looks and functions something like this.

We're going to have a list of schools where we can view details of that school, see the teachers that relate to that school, see their available time slots, and submit a form in order to add a new booking record or reservation for this particular time slot.

Features

The three main features that we're going to be working with today are:

1. The form component
2. Connection fields
3. Dynamic filters

Let's jump right into this app. I've got a blank app ready to go, and I'm just going to start working through this and thinking through this.

Building the App

The idea given was:

• We're going to have schools.
• We're going to have time slots that are available.
• Teachers will have time slots available to choose from, and then parents could go in and choose a time slot.

User Role

We're just going to add one user role, and that's going to be teacher. We could add a data table here called teachers if we wanted to list all the teachers, but if we wanted to give teachers the ability to log in to this application and actually create their own time slots, it would be best to keep all of those people records inside the users' table since that's where all the login information is going to live.

Let's add a user record. In this case, it's going to be a teacher. We'll call this Teacher One and give a simple login for testing later. They're going to be a teacher.

School and Time Slot

Now we need a school. How about Los Angeles High School? Don't know if that's real, but it doesn't matter. We have a school name, a teacher. The idea with the time slot here is to connect this to at least the user; we may end up connecting it to the school as well.

We want to build a relationship between the time slot and the teacher. When a teacher has a time slot, that implies that the time slot belongs to the teacher. That's what a connection is. So we're going to go into fields and add this connection field. We're going to connect a time slot to a user, display the user name, and call this teacher.

For now, we could leave this, but I'm going to add a connection to the school. I don't think time slots need a name; they're probably going to be referenced by the actual date and time. So we'll do those three fields right now.

We'll add a fourth field called status to know if the time slot is available or unavailable. We'll add some color to this to make it look nicer.

Page Builder

Let's move on to the page builder. I like to start building the data structure in the most basic way possible, then move to the page builder to frame out how the actual app will look.

We'll add a page for schools with a table to add new schools and a link to view more details about the school. We'll do the same for teachers, making a page for each of the tables. The teachers page will use the users' table but be called teachers. We'll skip the form to add new users and just do a link to view user details.

The last one we'll do for now is time slots, including add new and details. Let's preview this page: schools, teachers, time slots.

Reservations

We need a way to create and save reservations. We have the users' table, schools' table, and time slots' table. We could save a reservation on the time slot record, but a better approach is to add a new table called bookings to keep everything separate.

The bookings table will consist mostly of connections: time slot, teacher, school. We'll remove the booking name field. We'll add fields for parent name, email, and child name.

Page Placement

We'll use a form component to allow parents to submit a new booking record. If we just used the time slot record, we'd present the ability to edit the time slot record, not create a new one.

We'll add this form on the time slot details page because the booking record is closely related to the time slot. We have three parent pages: schools, teachers, and time slots, each with their own details page.

On the school details page, we could add a table to display connected teachers, then another details page for connected teacher time slots. But too many subpages can cause problems as you scale your app. I prefer a single details page and sometimes a third, but usually just one subpage.

We'll add connected page links for more lateral navigation instead of going deeper through subpages. On the time slot details page, we'll add a form to insert a new booking record.

Filters and Validation

We'll add validation rules to update the time slot status to unavailable once a booking is made. In the page builder, we'll add filters to show only available time slots.

Now, if we add a new time slot and book it, it will become unavailable and no longer visible for others to select.

Conclusion

This concludes the basic booking calendar app. It uses a join table to hold reservations, connects time slots, teachers, and schools, and includes dynamic filters and the form component to insert connected records.

Thank you for watching, and I look forward to the next one. Take care, everybody!