When building a single page application, we rely on custom states a lot to create the inner “screen” navigation. With multi-page apps, you can use the “when page is loaded” event to run actions that might be needed to set defaults or initial states of various things.
With SPAs, we have to get a bit more creative to do the same kind of “start of screen” for every screen change since “when page is loaded” only works literally when the page is first loaded. It would be really nice to have a workflow event for “When custom state’s value is changed.” This could help us create the equivalent of “when page is loaded” for SPAs when used in this context. I’m sure there could be other great uses for “When custom state’s value is changed” too.
For example, I’m working on a SPA that has a lot of inner screens, and we want the user to be scrolled to the top every time they change views (which are managed by a custom state). Instead of having to add a “Scroll to page” action for the dozens of different events that change the custom state (ie screen view), it would be great to have a single “When custom state’s value is changed” to run that scroll to top action.
I’m sure there are other use cases, but this is one I’ve run into a few times across multiple apps.
Also, on a similar note, is there a git issue tracker or something where Bubble shares the issues that are prioritized? I would like to see the feature requested by OP, but I would judge whether to wait, use a plugin, or some other alternative, if I knew roughly when it was going to be in the pipeline.
Loving Bubble overall though, I’m previously a React and mobile dev, but am able to fully embrace no-code now because of this! Keep on pushing forward, team
There’s no need for such an event. Custom States only update when you tell them to. So you, as the programmer know when the Custom State has been updated. (Also, Custom States update synchronously, so when your action step that updates the Custom State finishes, well, the Custom State now holds the new values.)
If you want an asynchronous analog to Custom States, consider using List Shifter as one. When it updates, it throws an Updated event. Unlike Custom States, if you send List Shifter a list (using List Shifter’s “Original List”) or scalar (single) value (using List Shifter’s “Use Scalar” parameter), whenever those source values change, List Shifter’s output values will change and the Updated event will be triggered.
That is, unlike Custom States, List Shifter updates whenever its source values change (like most Element plugins).
You’re thinking about it the right way. In order to detect change, the current and previous values need to be known. The way I’d do it is with a Do when condition is true event…
Be sure to set the Run this property to Every time. Then, simply implement the desired logic in the workflow. In the OP’s case, they would scroll to the top whenever the view changed. This would eliminate the need to invoke the scroll action directly with each view change, thereby making the logic easier to maintain and update.
I put up a working example of a “state change detector” on Buildshare. The example is pretty simple. It just animates an element on the page in response to a change in a custom state defined for the page. The dropdown is what changes the custom state, and then the state change is “detected” by the event depicted above. If you have a Buildshare account, you can add the example directly to any app of your own with just a click.
