I’d find it helpful if there were a way to trigger workflows when a custom state changes. Right now, there’s a way to do similar when the value of an input field changes and it’d be useful if this were extended a bit.
Would this be helpful for anyone else?
Hey What is this workaround? I am currently trying to figure this one out myself!
You can probably just put an input on the page. Set it’s value to be equal to the value of the custom state. Then, trigger a workflow when the input’s value changes.
[edit 1: syntax change]
[edit 2: adding link to app]
Okay, I am not sure how to set the input value to equal the state of another element. When I go into my input and type something in, it is working.
After reading the manual and trying a number of different ways I am not sure this approach is possible.
An input’s value is changed
This event is triggered when the value of an input changes. For text inputs, the event is triggered when the user removes focus from the input.
I use set states triggered by workflows all the time. Just do a “when something is true” which is when the set state is set to something. I think I explain this in my video if you want to take a look. I can’t remember if I specifically do this or now. I know for sure in a menu, but I know this is possible now. Maybe not before, but it is now.
It would be a nice feature, so that we could spot a “generic” changes of a custom state, and not having to specify the new state value to do something.
You can use a bit of code to do this. I set up a test app. You need to put the input in a group and reset the group after you execute the code.
The code is
var element = document.getElementById('inputToTriggerUpdate');
var event = new Event('change');
element.dispatchEvent(event);
On further thought, although the code works, couldn’t you just do the workflow after setting the state or create a custom event to set the state and trigger the workflow? I think it might be easier than using the code. I use the code for manually changing an input’s value.
I think one of the challenges is when you are using reusable elements. For example, I have a scheduling app that uses a calendar saved as an RE. When the date in the calendar changes, I want the date in the “confirm appointment” box to change as well.
I know this thread’s a bit old, but I just discovered it via this other thread. I think @J805’s response is on the right track, but in my experience, in order to detect change, both the previous and current value need to be stored so that a comparison can be made (which is a bit different from just detecting when a state changes from empty to some value).
Anyway, it’s actually quite straightforward to do, as I outline in this post.
@willtaylordesign, in the case of reusables, custom states defined at the root level are accessible to the host page, so I don’t see why a similar approach wouldn’t work for that scenario.
-Steve
@sudsy Welcome to the thread! You are right about states being accessible to the host page. What I probably should have clarified was that I’d created a reusable element to act as a custom date input. Since it’s not a “real” (javascript) component, even though the selected date is exposed through a state and I can display it in real time, I can’t trigger a workflow like “when input’s value changes.” Even when I relay the state to a standard input as a dynamic value, it doesn’t register as a value change.
Hmm, I’d probably need to see an example. If I understand correctly, I’m doing just that with my own RE time picker. Here, I’m just toggling the visibility of a shape whenever the selected_date custom state of the RE changes…
Hey Everyone,
I actually built a simple plugin that does exactly this!
Checkout the demo video at:
To view the plugin page: Value Change Trigger (CustomStates) Plugin | Bubble
View it in the editor: APG plugins | Bubble Editor