What exactly is a “custom state”, and how do I change it for reusable elements?
Here’s a bit of info on custom states. https://manual.bubble.is/working-with-data/element-custom-states.html#element-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.
4 Likes
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).
3 Likes
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.
9 Likes
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 
Thanks again!
Of course, happy to help!
dan1, this is exactly the type of video I have been looking for. Thank you
1 Like
Great video. Also exactly what I was looking for. The ‘i’ button also helped me a lot.
Dan, this is an absolutely fantastic explainer. In so many ways.
Thank you!
P
Hi Dan,
It does not seem to be true. The only way to change the fields of the thing that is in custom-state is to call “make changes to the thing” which will overwrite the field in the database. That means that custom-state keeps a reference to the object and not a temporary and detached in-memory object. Am I missing something?
1 Like
@serg.sargsyan This is because your custom state only reflects the actual entry in the database; it does not extract it into the browser’s memory. There is unfortunately no way to edit or create a custom thing in browser only (if only… 
).
The only things that you can really manage without effect on the database are basic elements:
- text
- number
- boolean (yes/no)
- …
Hi @julienallard1, thanks for confirming. Pity 
Right now I am reading your post on how to fight super slow Bubble database update on multiple items Exploiting the database without slowing it down, I have a similar issue and clearly that problem comes from the lack of in-memory Things.
While I haven’t found an easy workaround the slowness of the database, there are two ways (that I’m aware of) to go faster. Both rely on the fact that you can deal with basic elements in-browser only:
1- Decompose your custom things
Let say you have a custom thing named Customer which is made of a name (text) and age (number). Instead of having a custom states that is of type List of Customers, you would have two custom states: a List of text and a List of numbers. Items from each list are linked by their position index so List of text's item #4 goes with List of number's item #4.
This method allows you to quickly add/delete/edit items without waiting on the database. You can then create/modify things in background (Scheduled custom workflow).
However I found that as soon as things get little complex, workflows and actions can become very messy thus hard to debug and maintain.
2- Parse your data in javascript and use JSON to talk to Bubble
This is the method I prefer; it is way more flexible then the first one. But you need to have some knowledge in javascript despite Bubble being a no-code platform. The post your are reading explains how to use it. Since a JSON string is only a text element, but with a specific syntax, it can be used and passed around in Bubble in-browser only.
2 Likes