I’ve seen custom states used for everything from dynamic UI changes to lightweight temporary databases. Thought it’d be fun to share and get inspired—
What’s the most clever or unique way you’ve used custom states in your Bubble app?
Bonus points if you explain why you went that route instead of using a regular database or URL parameters.
I’ll start: I made a game builder and laid out the game board using a grid. This was just a bunch of numbers from the list of numbers element. Then I used a controller that I created to move a character around the level. It was instantly updated and very smooth. I did it this way to the page seems to load very fast to start and then the images from the database come in slower as they could.
Looking forward to some mind-blowing hacks. Let’s learn from each other!
Recent use case:
Gift draw app. First step is the participant selection. Easy, just a list of user.
The second step is for each participant, you can set an “exclusion” list (for example, brothers and sisters). For that, I’m building a JSON that look like {"user":"This cell user id","exclusion":[]} and store this as text list. So I can remove it before (base on the actual state in RG cell) updating the list of exclusion (stored on the page) and readd it to the list of participants.
WF is:
User select participants. Once it’s done, I’ve set a state on the page with the list of participant using :format as text to have one JSON item for each participant {"user":"This cell user id","exclusion":[]}
User set exclusion. Each time user add or remove an exclusion, the WF will: remove page state with current cell state, modify current cell state, add current cell state to page state (whole list)
Once everything is ready, the whole list is sent to a backend WF and process to draw.
DB is not involved until the request is sent to the backend WF (we create a draft item just before and create result in the backend WF, there’s a custom JS script created for that)
You can totally do this with custom states, but to persist those states across page loads is difficult so I ended up using the Floppy plugin which uses localStorage which maintains across page refreshes.
I created a “page handler” which can create a tabbed experience using a RG comprised of page components, and those components conditionally display if the “state” from localStorage’s page matches the current RG page’s component.
It’s a little confusing to explain but here is a video, essentially you can create “tabs” so user’s can interact with different sections of the app while maintaining an SPA. Traditionally with states you wouldn’t be able to refresh the page and maintain the other “tabs” but it’s 100% possible to build this with states
Use case:
I did store the user’s answers to survey questions in custom states.
How ?
Actually it’s like 2 arrays that are identical always with 1 array storing the question IDs and the other array storing the question responses that the user selected.
How to keep them always synced ?
To keep the arrays always identical (i.e. question number matches response number in both arrays), I used a plugin called “Find Index” (link below) which retrieves the index of an item in an array and then updates the other array to ensure that values are always consistent (i.e. Question number 3 is the 3rd item in questions array AND Answer to Question number 3 is the 3rd item in responses array).
Optional Questions
Finally, for the optional questions which do not require an answer, I created an empty response for them upon the survey submission so this shows that the user didn’t answer this question
Advantages:
This technique has the below advantages:
It did overcome the limitation in Bubble that it doesn’t support arrays
it offered a seamless & fast survey responses to the users
I didn’t have to store values in the database because values here are temporary and they should be saved only when user submits his survey responses
Much more efficient when it comes to WU consumption
What’s the most clever or unique way you’ve used custom states in your Bubble app?
That seems like it took a lot of work!
