Custom States: Storing Temporary Page Data

Welcome back! In our last lesson, you got your first taste of custom states when we built a more elegant toggle button. You saw how a simple yes/no state could help the page "remember" whether an element should be shown or hidden. That was just the beginning.

Today, we'll explore the full power of custom states. This lesson is dedicated to mastering how to use them to store and display various kinds of temporary data on a page. Think of custom states as the short-term memory for your application—incredibly fast and versatile, perfect for managing user interactions without constantly writing to your database. For your multi-tool platform, this skill is essential. It will allow you to build tabbed interfaces for complex tools, hold intermediate calculation results, or let users build a list of items to process, all with a snappy, responsive feel.

What is a Custom State?

At its core, a custom state is a temporary variable attached to an element on your page. The page itself is an element, and for states you want to access from anywhere on the page, it's the most common place to store them.

Let's use an analogy. If your Bubble database is like a computer's hard drive (long-term, persistent storage), then custom states are like its RAM (short-term, volatile memory). They are incredibly fast to read from and write to, but their contents are wiped clean the moment the user refreshes the page.

To get a formal understanding of what custom states are and why they are so important for performance, please read the introduction of the following guide.

Bubble.io custom states - All you need to know (2024)

This guide from Nocodable Components clearly defines custom states and explains their role in improving app performance and interactivity.

Read the introduction section. Focus on the distinction between custom states and database fields, and the performance benefits of reducing database queries.

Creating a Custom State

You can create a custom state in two main places:

In the Element Inspector: Select an element (like the page itself), click the "i" icon in the top right of the property editor, and click "Add a new custom state".
In a Workflow: Using the "Set state" action, you can create a new custom state on the fly.

When you create a state, you need to define three things:

The modal for creating a new custom state requires a name, a data type, and an option to specify if it's a list.

State name: A descriptive name (e.g., currentTab, isFormVisible).
State type: The kind of data it will hold. This can be a simple type like text, number, or yes/no, or it can be a complex type from your database, like User or one of your own custom data types (which we'll cover later).
This state is a list: A checkbox that lets the state hold multiple values of the chosen type, rather than just one.

Use Case 1: Managing UI with Tabbed Navigation

One of the most common uses for custom states is managing the user interface. Imagine a tool on your platform that has multiple modes or sections. Instead of spreading it across multiple pages, you can use custom states to create a clean, tabbed interface on a single page.

The following video provides an excellent walkthrough of building a settings page with two tabs: "Profile" and "Business". It uses two separate yes/no states to control which tab is active.

How to Use Custom States in Bubble.io

This video from Building With Bubble clearly demonstrates how to use custom states to build a tabbed navigation menu, a fundamental pattern for creating organized user interfaces.

Watch the section on creating a navigation experience. Follow along as the presenter: Creates two yes/no custom states on the page (display user settings and display business settings). Sets a default value to show one tab on page load. Builds workflows for each tab click that set one state to yes and the other to no. Applies conditional rules to the groups to make them visible only when their corresponding state is yes.

After watching, you'll have a solid grasp of this pattern. While using separate yes/no states works perfectly for two tabs, consider this for when you have three or more: it can be more efficient to use a single custom state of type text or number. For example, a state called currentView could have a value of "profile", "business", or "billing". Your conditional rules would then check When page's currentView is "profile", etc. This approach keeps your logic cleaner as the number of tabs grows.

This is what a conditional expression that references a custom state looks like in the Bubble editor.

Here, a conditional rule on a button checks the value of a custom state named 'myCustomState' which is attached to the page ('mypagename'). If the state's value is 1, a property of the button will change.

Use Case 2: Storing a Temporary List of Data

Custom states are also perfect for collecting data from a user before you're ready to save it to the database. This is especially useful for "batch" operations in your tools. For example, a "Word Counter" might have a feature to count words in multiple text snippets at once. You can use a list-based custom state to hold all the snippets.

Let's build a simple to-do list. This demonstrates how to use a custom state that is a list of texts. The data will be sourced by a Repeating Group, and we'll add and remove items without ever touching the database.

The official Bubble channel has a fantastic, concise tutorial on this.

How to Use Custom States | Bubble Tutorial

This clip shows how to create a dynamic list using a custom state, a powerful technique for any feature that involves collecting multiple items from a user.

Watch the segment on building a to-do list. Take note of these key steps: Creating a custom state on the page with type text and checking the "list" option. Setting the Repeating Group's data source to this custom state. Using the :plus item operator in a workflow to add the input's value to the state. Using the :minus item operator to remove an item from the list.

This pattern of adding to and subtracting from a list in a custom state is incredibly versatile. You could use it to build a shopping cart, select multiple users to add to a project, or, for your platform, allow a user to enter multiple values that a tool will then process all at once.

Key Considerations

While powerful, custom states have important limitations. Understanding when and when not to use them is key to building a robust application.

Bubble.io custom states - All you need to know (2024)

This final reading summarizes the crucial limitations and best practices for using custom states.

Read the section titled Limitations and Considerations. The lists under "Use Custom States When" and "Avoid Custom States When" provide an excellent mental framework for making good development decisions.

The most critical takeaway is that custom state data is lost on page refresh. They are for temporary information only. If data needs to persist between sessions or be secure, it must be saved to the database.

Conclusion

In this lesson, you've moved beyond a simple toggle and learned how to leverage custom states as a core part of your Bubble development toolkit.

Here are the key takeaways:

Custom states are fast, temporary, client-side variables attached to elements.
They are ideal for managing UI states, such as which tab is visible, without reloading the page.
They can store different data types, including text, numbers, yes/no, and even lists of items.
Using a list-based custom state is a powerful way to collect multiple pieces of data from a user before performing a final action, like saving to the database.
Their main limitation is their temporary nature; all data is lost when the page is refreshed.

You now have the skills to create much more complex and responsive user interfaces for the tools on your platform.

In our next lesson, we will focus on conditionals. You've already used them to show or hide elements based on a custom state, but we'll explore how they can be used to change almost any property of an element—like its color, text, or clickability—based on a wide variety of criteria. This will give you fine-grained control over your app's dynamic behavior.