Multi-Tenanted Family Planner

In this episode of Build it with Tim, we'll learn how to build a multi-tenanted Family Planer app using Connection Fields and Data Source Filtering.

Features Discussed:

1. Data Builder (Time: 03:24)
   Learn how the creation of a basic data table to capture family names demonstrates how to establish a connection between users and their families within the application.
2. Signup Component (Time: 18:12)
   Learn how you'll see how to set the first name field as required while keeping the last name field optional.
3. Custom Component (Time: 22:56)
   Learn how you can show text elements with customized sizes, such as large and small, allowing for personalized and dynamic content display.
4. Record Rules (Time: 24:40)
   Learn when a user selects "Family Member," details related to the family member are automatically filled, and the role is assigned accordingly.
5. Custom Pipe (Time: 29:23)
   Learn how this setup allows you to integrate an open API to retrieve a new quote every day, which can be shown on your dashboard.
6. HTML Component (Time: 30:37)
   Learn how you can set up the HTML Component to show a user's name dynamically when they log in.
7. Page Settings (Time: 32:27)
   Learn how to rename a created page.
8. CSS Classes (Time: 34:44)
   Learn how to create a custom CSS class to enhance your application's design. For example, when a button is clicked within a List component to refresh an action, the CSS class will hide the button from view.
9. Menu (Time: 35:57)
   Learn how to create a menu and menu items that trigger specific pages within your application.
10. Calendar Component (Time: 45:23)
    Learn how to display a date range in a calendar. How to plan a three-day event (like a picnic) and then visualize it on a calendar with a selected color. Additionally, you'll learn how to set up a clickable pop-up that shows detailed information about the event when selected.

---

Transcript Summary

Introduction

Hey everybody, welcome back to Build It with Tadabase. On today's episode, we're building a family planner app. I was scrolling through social media recently and saw an advertisement for an iPhone app that was a family planner style application, and I thought, you know what, we can build this on Tadabase. This is likely going to be part one of two or three—I don't know exactly—but we're going to start building out the application using all the native features that we can, and then we'll likely come back and stylize it, customize it, maybe add some custom code to really take it to the next level. So anyways, we're building that family app today on Build It with Tadabase, and let's get started.

Finished App Demo

Okay, so finished app demo time before we actually start building. Like I mentioned, we're building this family planner app to mimic some of these actual mobile apps that I've seen. What we're doing here is we have our family dashboard that, right now, contains some stuff—I ideally want it to contain a lot more, but for now, this is what we're doing for part one of this video, I guess. We have a nice little welcome message with an automated quote per day, which is very cool. We have the ability to add new events and new lists for our family and display some things that are upcoming—things that we want to pay attention to for what our particular week looks like.

We also have a dedicated calendar page where we can view all of the family's events, no matter which family member is attending, whether it's soccer practice for one kid and dance classes for the other, or work schedules—whatever it is, it can all be maintained right here on the schedule. We also have the ability to create and edit multiple lists, where we can then view those lists and check off items when they are complete.

The way this whole process works is when somebody signs up, they create an account and become the account holder. They can then add family members to their particular family, and the entire application is 100% multi-tenant, with the ability to configure and maintain family-specific options for different types of objects. For example, the event types can all be added and edited uniquely for each family. My event types in my family will look different from your event types in your family, and the same goes for the actual lists.

So that's the basis of this application. We're going to go through the whole process of building it step by step. It's a long video, so buckle up, and here we go.

Building the Data Structure

I have an idea of the direction we need to go here, but we're going to start from basically nothing, and we're just going to start building out our data tables and all of the fields that we're going to need. Then, of course, we'll move over to the Page Builder.

Families Data Table

The idea with the application is that we have users who log into the application, and each user is going to connect with a family. The first thing we're going to do is create our Families data table. In this case, we'll just have a family name. It's really straightforward; for now, all the data we're capturing about a particular family is just going to be the family name. Right away, we're going to know that a user is going to connect to that family, so we'll add that connection field now on the Users table.

Family Calendar

The other thing we want to keep track of for this family planner app to work is a family calendar, so everyone in the family can add events to that calendar, and it can be seen across the entire family. That's going to be made up of different event types. To make this a multi-tenant solution where multiple families could sign up for this app, we're going to make sure that every single table is always going to have a connection to a family.

For the calendar, we're going to start with a basic setup, which is a Calendar data table with an event name, so we'll change the name of this default field. We need to know when that event is, so we'll use a date range field for that. Then, we're going to have a connection to the users, and it's going to be a one-to-many connection because different family members might attend different events. For example, let's say something like soccer practice: Mom and child are going, so we want to make sure we can connect multiple users per event.

Event Types

Another thing we're going to build is the event types. This will be interesting because every single record here is going to connect to a family, but we want to give each family the ability to define their own event types. Every family is different, and every family is doing a million different things, so we're going to build it that way. We're going to have another table called Event Types, which is an alternative to a select field.

On the Calendar record, we could maybe take an option field, use a select field, and list out all the different event types, like soccer practice or dance class. But this is a predefined list that can't be edited through the actual application, only through the Builder. Instead, we're going to move all of those options to their own table, so now all of those particular event types will be managed per family through the actual live app.

Lists

We're also going to create lists that families might want to maintain, like a grocery list, shopping list, chore list, or to-do list. We'll create list types as selectable options that can be maintained through the live app. Specifically for lists, we'll have a third table to contain all of the list items. For example, if it's a grocery list, you can add all of the items to the grocery list, and those are stored in the List Items table.

Data Structure Recap

For the calendar, we have a connection to the event type, the name of the event, the date range for the event, a one-to-many connection for all of the family members attending the event, the user who created it, and a connection to the family. The event types table contains the name of the event type and a connection to the family.

The lists are incredibly similar, with one additional table. The list has a connection to the family, a connection to the list type, and an auto-increment field. The list types are configurable per family. The list items table will contain all of the actual items that need to be actionable within each list, like grocery items.

Setting Up Table Rules

Now, while we're in the Data Builder, I'm going to go through each table and define some table rules, and we'll talk about each one and why we're doing it.

Calendar Table Rules

The first one is on the Calendar table. We're going to set up rules to run every time a record is created, edited, or both. We're doing it on the table level so that we can create these rules in a singular place rather than across multiple forms. The first rule is going to be on create: we're going to set "Created by" to the logged-in user. The next rule we're going to see across everything else in this app is setting the family connection to the logged-in user's family connection. This ensures that our filtering, page security, and everything else to make this a multi-tenant app will work consistently throughout the application.

Event Types and List Table Rules

We'll do the same for the Event Types and List tables, setting the family connection to the logged-in user's family connection. We'll go through and do this for all the other tables as well.

Building the Pages

Let's move on to the pages now, and the first thing we're going to do is set up the actual sign-up workflow.

Sign-Up Workflow

The idea here is that somebody will come to this application, create an account for the family, visit the sign-up page, and do that all through the sign-up form. We'll start there and go over our sign-up form, utilizing all the form rules and stuff like that to accomplish everything we need.

One more change I want to make is in the Users table. I'm going to change the name field to "First Name" and add an additional text field for the last name. Then, we'll go back to the sign-up form, remove the name field, and add the first and last name fields. We'll also include the family connection by allowing users to insert a new family. We'll make sure we limit this drop-down to families connected to the logged-in user, and we'll require this particular field.

Adding Family Members

What this will look like is a sign-up form where users can add a new family. Upon submitting the form, we've already inserted the family record, and we're connecting the user as the logged-in user to this particular family. We'll also set the role for the user—I'll be the account holder, and we'll have another role for family members.

On the Profile page, the account holder can then add their family members. We'll set this up similar to the profile, with a form on the left to add a user and a list of family members on the right.

Family Dashboard

Next, we'll move on to creating the Family Dashboard. This will act as our home page and contain a bunch of different information that's relevant when the user logs in. The dashboard will have a welcome message, buttons to add new events and lists directly from this page, and a section to show upcoming events.

We'll also add an open API for daily quotes using Zenquote, which will show a different quote each day on the dashboard.

Calendar and Lists Pages

We'll create a dedicated Family Calendar page using the calendar component to display all calendar events. We'll filter the calendar records to ensure they are connected to the logged-in user's family.

For the Lists page, we'll create a list component to display all lists that have been created. After adding a list, we'll redirect to the list detail page, where users can add items to the list.

Final Thoughts

At this point, I'm going to end part one of this build. We have our basic family planner app with the core structure in place. We can easily expand this depending on what other things you might want to include in the family planner app—maybe a meal planning section or a chore list group of tables. There's lots of different things we can add, depending on what you want to include in this type of application for your family or adapt it for a business.

The key things we've focused on in this episode are the multi-tenant aspect of the app, ensuring that users are connected to a family and that all filtering and security is based on this connection. We also utilized table rules to set these connections consistently across the app.

That's it for part one of the Family Planner App on this week's episode of Build It with Tadabase. Thank you very much for watching, and we'll see you next week. Take care!