Forum Documentation Showcase Pricing Learn more

Question - Custom state?


What exactly is a “custom state”, and how do I change it for reusable elements?

How to set a custom state

Here’s a bit of info on custom states.

A custom state is a temporary state of thing. It’s logic that doesn’t involve writing to the database (but can be based on information in the database). So, when the page is refreshed, any custom state changes that happened while the user was on the page are reset.

For example, let’s say that I have a traffic light.

  • The traffic light has three different states: red, yellow and green.
  • Each bulb (red, yellow and green) has two conditional states that match the custom states logic. (eg. red, yellow, green).

So, I create a custom state associated with the “Traffic Light” as the parent object. Each “bulb” references the custom state of the “Traffic Light.” So, I program each individual bulb to say, when Traffic Light is that bulb’s color, then illuminate (ie. change color to #color). I write another statement to say, when it is not that bulb’s color, then don’t illuminate.


Thank you @dan1!
I checked in on the manual, and I see things a bit more clearly now. I still can’t figure out where I define/set a custom state though.

What I’ve tried doing is selecting the reusable element I want to set the custom state for, coming to the Apperance/Conditional/Transition section.
I’ve also selected the earlier reusable element (the element of which I want to set the state), but when it’s in another reusable element. Then the first thing it asks me for is to define “Data source”. Also at the bottom it asks me to “Select parent” with a number of things in beetwen.

What am I missing?


Don’t worry if it’s a bit tough the first few times around. But soon enough, it’ll be second nature.

I made a quick video to illustrate the concept. Watch it a few times, tinker around.

When you are defining a data source, it is specifying the type of content that is going to appear in that thing by default. (For example, you have a Group on the page. The “Parent” reference for that group may be the “Current User”). This lets you point all of the references in the Group to the Group’s Data type, which is then referencing the Current User of the page).

Displaying different group depending on a dropdown search

Wow, thank you. That was very helpful!


Of course, glad it helped!


Quick question, if I set a custom state as a thing
For instance

repeating_group, custom state = current_users, list of stuff’s, thing
(list of stuff being a thing in the database)
does this change the database when I change the state


Dan1, I cannot seem to get this video to play. Could you send it to me or repost it?


I think the video may have been deleted/archived by the forum software. So, I created a new video, visible below that roughly follows the original logic above. (Except for the don’t illuminate conditional logic).

Learning states makes programming much more fun. Hope you enjoy.

Single Input to select both X and Y variable inputs?
Question: can custom states be temporary things? (solved)
Custom State text help [SOLVED]


Thank you so mcuh for that! Just seeing you click the ‘i’ in the element’s header has changed how I use Bubble. Just couldn’t find the ‘Add Custom State’ button :slight_smile:

Thanks again!


Of course, happy to help!


dan1, this is exactly the type of video I have been looking for. Thank you

Any tutorial on how to use "Custom States"?

Great video. Also exactly what I was looking for. The ‘i’ button also helped me a lot.