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.

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. ​