As a resident forum stalker that spends way too much time in the forums, I’ve noticed an influx of new users. I have a little bit of extra time and the mood so I’ll share a primer on States.
State Management
Managing states in Bubble can be a mess since there’s no Master list for states in your page. Use dedicated groups for different types of states. Here’s an example of how I will setup a page:
I have dedicated groups storing different states all starting with #. Why? Cause it’s easy to press shift+3. In the same example you will see #Header v3 which is a reusable element and does contain its own states, hence the #.
This makes storing and searching for states a whole lot easier.
Use States To Store Loaded Data
All new Bubblers should make it a practice to store Data into states to help you manage Data better.
- You can use one State as a Data Source for multiple elements & conditionals.
- Reduce WU usage by removing Real-time Search costs where you don’t need it.
- Better control of Data (explained in the next section)
- Create a better User Experience
- Repeating Groups work better with loaded data
Workflow Management: Understanding Action Sequence
New Bubblers will always get confused about how workflow actions actually run. I won’t dive into detail about that here as there are plenty of other threads about this. Here are some important bits you need to know:
- Client-side actions follow their sequences (setting states, showing/hiding elements, Pauses, Custom Events etc)
- In a workflow, Schedule API actions will always run first regardless of where they are in your workflow unless…
- Conditions and values that depend on values from a previous action will wait until that value is available. So while you can make Schedule API actions follow your workflow sequence, it will immediately trigger once it gets its value from the parent action regardless of where it is (based off my experience so far).
Workflow Management: Setting States and Custom Events
Now you know a little more about action sequences and why you should store data into States, you are now able to plan better control of your data using States and Custom Events.
Setting States and Custom Events are client-side actions and will always run in sequence. So do Pauses. Which makes the below work as intended.
Schedule Custom Event actions also follow this sequence. See this example:
So the above sets a state then schedules the Custom Action to run after .5 seconds then the pause starts and ends then sets a state.
2 things to learn from this is:
- A client-side action does wait for the previous action to execute. Eg. Step 4 only triggers after Step 3 completes updating its state
- The Custom Action runs .5 seconds from the point it was triggered in the sequence so it’s actions can run simultaneously. Yes, Bubble does allow parallel workflows.
Improve User Experience: Preload Data
You can use States to preload Data. Know that you can use multiple lists as your RG’s data source as seen below
For example in a Repeating Group that you may want to show 100 pieces of Data. Your user isn’t going to need to see all 100 immediately. You can load 10 on a page load and then schedule a custom event to load the other 90.
In this example what I will do is load the first 10 into one state on page load and then schedule a custom event to load the other 90 into another state.
Improve User Experience: Use Loading States
Use states to keep track of when the page is loading data and when that data is complete:
Having a state that tracks data load means you can create loading elements to improve your user experience. Users don’t mind waiting, what they do mind is not knowing if something is happening or not.
Here’s a simple method.
In my custom event, I start by setting the load state to yes. This shows my loading element.
Then I load the Data into my data state.
Now to there are 2 ways to update the loading state:
I can change the loading state immediately after (or after a pause action) I load the Data into my data state since it is supposed to run only after the data state is filled
Alternatively, I can use a Do When event to check that the right number of data is loaded into the data state using another state that counts the expected number of data. This does require an additional state, extra actions and the Do When event.
Easiest method to do this is would actually be with plugins that can watch for when an expression’s value changes.
Things To Watch Out For
Using States and Custom Actions are the most reliable way to control your data and workflows but because Bubbling means working with both client and server, there will be cases where you think it might work, but it actually doesn’t, but actually it does. Get what I mean?
So here are some additional tips and some things I will always take into account.
Storing Extremely Large Data Into States
You might break the sequence if the Data takes too long to load and store into a State. I’m talking about loading thousands of Things with multiple fields. As a general rule avoid this. If you need to load very large amounts of data you can always do it in parts using Custom Actions. I personally have never needed to do this since I use a lot of satellite datatypes.
You Can Use States To Watch Data Changes and Trigger Workflows
Example; You can setup a state that watch the difference in count between the loaded data (stored in one state) and the real-time search count of the same Dataset (stored in an input element). Use the difference to setup Do When logic.Though I would highly recommend using plugins for this. There’s Floppy and Listopia to name the few I know of.
The
:countOperator
This costs way less WU than
Last But Not Least: RTFM
Click on that Question Mark icon to open the Help Center
