How do I save values to Local Storage?

In this video, I discuss the feature of saving values to local storage and how it can be used in different scenarios. Local storage is a browser feature that allows us to save values from our application for later use. I explain that while it's possible to extract these values using custom code like JavaScript, I'll focus on using native options within the builder.

I present a finished app as an example, which involves multiple levels of pages and connections between different tables. One issue we encounter is setting the company connection when adding a new task, as we don't have a straightforward way to determine the company connected to the job. To solve this, I demonstrate how local storage can be utilized to store the company's record ID and retrieve it in the task form.

Additionally, I show how we can assign tasks to users using action links by saving the user ID to local storage. By clicking the action link, we can assign a task directly to a user based on the stored value.

Before diving into the builder, I explain the concept of connections, emphasizing that connections are always made using record IDs. The display value is chosen to identify the connected record, making it more meaningful to users. I also discuss the page structure, including parent and child pages, and how dynamic URLs are generated based on the record IDs.

Moving back to the builder, I showcase the tables and their relationships in our sample application. We have companies, jobs, and tasks, with tasks connecting to both jobs and companies. I caution against creating pages with excessive indentation and recommend not going more than one level deep.

To demonstrate the workflow, I add forms to the pages where users can add new records. I highlight the visible options when choosing a data source for the forms, explaining the limitations we face when selecting a connection from a previous page.

Overall, I aim to explain the concept of local storage and how it can be applied in a specific scenario involving connections between tables and pages in the builder.

 

Backlinks:

• https://docs.tadabase.io/getting-started/article/tadabase-page-hierarchy
• https://docs.tadabase.io/manual/article/connection-fields

Features Discussed:

1. Connection Fields (Time: 4:02)
   Learn how display values and actual IDs work inside of connections.
2. Details Page (Time: 7:30)
   Learn how a detail page URL is structured and the ID of the record being passed from the parent page's component.
3. Connection Fields (Time: 10:00)
   Learn how to properly structure relationships when working with 3 tiers. Like Companies, Job and Tasks.
4. Record Rules (Time: 15:30)
   Learn how to automate record-level actions based on predefined conditions.
5. Table Rules (Time: 17:05)
   Learn how to set rules for tables to automate data handling and display.
6. Details Components (Time: 17:47)
   Learn how to use detail components to display record-specific information.
7. Local Storage (Time: 18:32)
   Learn how to use local storage to save and retrieve data across sessions.
8. Display Rules (Time: 22:50)
   Learn how to create clickable links that perform actions or navigate to other pages.
9. Action Rule (Time: 23:00)
   Learn how to define specific actions triggered by various conditions to automate processes.

 

---

Transcript Summary

Introduction

Hey everybody, welcome back to Build It with Tadabase. This week's episode we've got a new camera angle, a new haircut, and a new feature to talk about—saving values to local storage and how to use this feature. This feature has been around for a couple of months, but I don't see it used that often. I feel like maybe it's because it's not understood well, so I wanted to go over that today and discuss different use cases.

When we're talking about saving values to local storage, this is a browser thing. The values we can save from our application into the browser storage or local storage can be utilized in many different ways. If you're capable with custom code like JavaScript, you can extract those values from local storage and do a lot of neat things with them. But today, we're going to be doing all native stuff inside the builder. I'll show you some examples of issues you might be having and how to solve them using local storage, along with some unique ways to build out certain features using this option.

Overview of the Finished App

Let's head over to the finished app and check it out. Here's our finished example. It's kind of a two-part example where they're both unique from each other but can work together.

Part 1: Complex Page Structure

We have a complex page structure where we're going multiple levels down from where we started. We start at the companies page, view the company details, see all their connected jobs, and then on job details, we can add new tasks.

By default, when I add a task in this form, we set the job connection, but we don't have a great way of setting the company connection unless we look at the company connected to the job we're connecting to, or we save values to local storage. In the background, I've set up local storage options so that when we add tasks, the company connection is automatically set.

Part 2: Assigning Tasks to Users

Once we have tasks created, what if you want to assign them to users using action links? I've saved another value from the user detail component, which is the user ID. By clicking this action link, I can assign a task directly to a user using the value saved in local storage.

Explanation and Diagram

As you saw in the finished app, we're dealing with record IDs, setting connections, and utilizing local storage. But before we jump into the builder, I want to talk about connections and page structures inside Tadabase.

Connections

Connections are always made using record IDs. The record ID isn't explicitly shown in Tadabase, but it's always there, most notably in the URLs of both the builder and the live application. When you set a connection from one record to another, such as a customer belonging to a company, that connection is made using the record IDs of those records.

The display value, such as a company's name or a user's email, is just what you see, but the actual connection is made using the record ID.

Page Structures

Page structure is very specific when working inside the page builder and the live application. When you click on a details button to go to a details page, you're taken to a page with a dynamic URL that includes the record ID of the record you clicked on.

Building the Application

Now let's get into the builder. I've created a couple of tables: Companies, Jobs, and Tasks, which are common use cases with a clear parent-child relationship.

Setting Up Pages and Forms

We have:

• Companies: The parent object where all jobs connect to a company.
• Jobs: A child to a company, with fields like job name, due date, status, and connection to a company.
• Tasks: Connects to jobs, companies, and users.

We'll create pages to add data, such as companies and jobs, and then go into the job details to add tasks.

Saving Record IDs to Local Storage

We'll add fields to save record IDs to our tables, then populate those fields with record IDs using table rules, form rules, or action link rules.

In the job details page, where we're missing the connection from the task to the company, we'll add the record ID to a detail component. We'll use that record ID to save a value to local storage. Then, in the form, we'll use that saved value to set the company connection.

Using Local Storage for Action Links

For assigning tasks to users using action links, we'll save the user ID to local storage on the user details page. We'll then create an action link in the task list that assigns the task to the user by pulling the user ID from local storage.

Testing the App

We'll test the app by creating tasks and assigning them to users. The tasks will now automatically connect to the correct company and user based on the values saved in local storage.

Conclusion

The ability to save values to local storage and extract them at any time during a user's experience can be hugely beneficial. I chose this example because connections come up a lot, and using local storage in this way can simplify your workflow, especially in complex applications.

I hope this video gave you a better understanding of how to use this feature, specifically with record IDs and connections in an unorthodox way, and also a better understanding of connections and page structures in general.