Bubble Docs
Search…
Help Guides
Core Reference
Account & Marketplace
Using Custom States
Elements can have data attached to them. This is done through custom states. While this is an advanced feature, it is extremely handy if you need to store some information.
Our Academy tutorial on how to use custom states
Use cases
Custom states are very useful when you want to store some information on the page, and not store it permanently in the database. Two main cases usually require such functionality:
- 1.Store the current view on the page. For instance, your page has two tabs, 'view' and 'edit', and users can switch between both modes. Storing in the page the current mode will be very handy to control which element to show and hide using conditions. When the user refreshes the page, the last mode will be lost.
- 2.Store temporary values in workflows. If you need to run some calculations, and want to store some intermediate results, using custom states can be useful to store the result and use it in the following actions.
Defining a custom state
Any element can have a custom state attached to it. It is up to you to decide which element is the most appropriate to save the data, and one element can have more than one state.
You have two ways to define a custom state. You can either do this when you use a 'Set custom state' action, and click the last option in the dropdown after picking the element. Another way is to use the Element Inspector.
Similarly to fields, a custom state should have a data type. This will enable the Bubble Editor to display the relevant options when using an element's state's value. For instance, in the example above, the 'Address' state is a geographic address, and setting it that way will let you use this information on a map.
Setting a custom state
The 'Set Custom State' action lets you store a value in an element's state. To use it, you should pick the element first, and then pick the state you want to modify. As everything that involves data in Bubble, the data you are storing in a state must be compatible with the type of the state. An inconsistency will be flagged as an Issue by the Issue Checker.
​
Note: Currently custom states can only change when you use a "Set custom state" action.
Because of this, when you delete a list of things that are included in a custom state, the state will not update to reflect that automatically. The deleted thing will have all its fields appear as empty, but the list will still have the same number of items, because the deleted thing will still be in there.
You can work around this by clearing out the custom state in a separate action, or by adding a filter to an expression that counts entries from this custom state. This could look like "My element's custom state list: count" -> "My element's custom state list: filtered [Creation Date is not empty]: count"
Last modified 6mo ago
Copy link