How to properly use Custom States

Database Aug 18, 2020

Custom state is the most powerful features of Bubble but many beginners struggle in using them. Custom states are temporary values stored in the user's browser. As they are stored in the user's browser, they are unique for each user and are lost on page load/refresh. This makes them handy when you want to temporarily use some value but don't require it to be saved in your database.

I use custom states on occasion even when I need to store those values to the database. I save all the values in custom states and make database changes collectively rather than making several database changes.

How to begin using custom states

You can store the custom state on any element in Bubble. There is no benefit or disadvantage in picking any element to store these values. The only rule is that the element should be there on the page at all the times.

Even if you navigate to another page which has the same element as the one on the last page, you cannot use the value. As the value is lost whenever refresh/change the page. The only solution is passing the value though URL parameters. To learn more about how to use URL parameters, read here.

  • Double click any elements to open the Edit popup and click the the i icon in the top right corner. ‌

This will open the Element inspector.

  • Click Add a new custom state and give a Name and Type to your custom state. You can even create a list. You can assign a default value if you'd like. This will be the value whenever the page is loaded. ‌

How to assign a value

To assign a value, we need to use a workflow. Click any element which you want to trigger the workflow and in the workflow section, go to Element action - All Elements - Create a state. ‌

Now select the element where you had created the Custom state then its name. Any value that you assign now, will be temporarily stored and can be used where you can input Dynamic data.

To reset the custom state value, you can create a workflow and leave the value as blank.

How to use in Dynamic data

To use the custom state in Dynamic data, first select the element where the custom state has been set then select the name from the list of options. I have a custom state 'Name' on a button and I want to display the value in a text field.

I first selected the button in the Dynamic data then the custom state. This text element will now show the value of the custom state. You can use this stored value anywhere on the same page.

If you need some help with your Bubble app, hit me up at [email protected] or follow me on Twitter