Using Custom States in Bubble.io

The custom state is the most powerful feature 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 always be on the page.

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 through 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 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. ‌

Assign a value to a custom state in Bubble

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 and 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 blank.

Use custom state in dynamic data in Bubble

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