Add "When Custom State's Value is Changed" event

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.


Oops, I should have checked before I posted, but this has been suggested before by @sridharan.s : Idea: Enable triggering workflows based on a change to a custom states' value

Seems like a great idea to me! :slight_smile:

1 Like

This would be a big time-saver :slight_smile:

*Edit: I didn’t realize Scott’s original post had the when an input’s value is changed workaround!

Yes, this is desperately needed!

1 Like

That would be so useful!

Agreed, would be very nice to see this feature come to life.

Hey guys! Did anyone figure a way to do this? @romanmg @philnauta @fayewatson @sridharan.s @luke2

1 Like

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 :slightly_smiling_face:

I confirm, “Do when a custom state value changes” would be very useful !

This would be a fantastic addition to bubble! It would allow for more functionality with reuseable elements.

Is there a new solution to this? The way I am currently doing it is:

Button clicks, sets state 1 of reusable elements.

That triggers the action required within the reusable and also sets the same initial state to state 2.

Custom “when” rule setup when state 1 is not state 2, triggers x.

I hope that makes sense, if anyone has better ways, please let me know :slight_smile:

+1, please.

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

A video where I talk about using List Shifter for scalar values and how it differs from Custom States can be found here: List Shifter: Reverse, Rotate, Swap and ITERATE (Loop) Over Bubble Lists | Now at v1.4: Adds Numeric Option, GET INDEX Action - #102 by keith

Warning: This video is goofy, but you might get the idea.

Hi @razvan,

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.



How do i get access to this @sudsy , cant access using the link… thanks