[BUDI-7695] Support "On State change" function on screens/ modals

[sdsys-ch]

On State change functionality

Budibase should monitor state changes and allow the developer to create function triggers based on it.

Use-case

Allow state changes to trigger UI changes, Actions, etc. based on developer-definable functions. This would allow i.e. to trigger a change in a route (Screen) that called a modal in which state was set.

Proposal

Screens should have an On State Change setting that allows the developer to configure a JS function being triggered as soon as State changes. Apps could have a global On State Change monitor allowing for higher-level app-wide changes (i.e. to Actions).

Since I'm really new to budibase, I'm not sure how much work implementing this would actually be. It might even be a good first issue (at least for the "should have", but unsure)?

In my case, I simply wanted to CREATE a new db entry on a different table/route than the original route's Form via a Modal and link the modal's new db entry to the still-to-be-created entry inside the main Screen. I tried this by setting a State variable inside the modal upon entry creation and thinking I'd be able to update a multi-picker option linked to a Relationship between the tables based on this, reflecting the change in the UI. Having an "On State change" functionality would allow me to either Refresh Data Provider and accomplish this. As it turns out, this isn't currently possible.

_BUDI-7695

[andz-bb]

suggested in a discussion for a specific use case where they couldn't share data between a form and another form in a modal

[aptkingston]

Hey @sdsys-ch. You should be able to accomplish this - if your multi-picker field has a filter configured which references your state variable, it'll automatically updated as required. You could also use conditionally UI in combination with this state variable to change any setting you'd like.

Having said this, that would be a pretty cool feature. Slightly dangerous though, because you could get into infinite loops if you updated state from within this action.

[sdsys-ch]

HI @aptkingston. I was stoked by your possible solution an tried right away. Maybe I didn't really understand how to enact your idea but I wasn't able to come up with a working example yet.

First, I tried applying a filter to the multi-picker, adding two, one to "Column Name"->"Is not empty" to catch all possible db entries and the other to "Column Name"->Is in: Binding->JS:RefToArrayWithAllNewNamesFromWithinStateVariable while keeping "match all filters" in place.

I then tried setting a conditional for the multi-picker, triggering some sort of loop. As soon as I now click on "Conditions"->"1 condition set", the entire UI freezes and I need to reload the page. I've still got it for reference if interested, since I can't see what condition is set exactly that's leading to the freeze.

After deleting the multi-picker, I tried again with both:

Update Setting->Field->to:Students->if:State Variable->is not empty Update Setting->Filter-> 1) Column Name is in Binding ->State Var Ref to array && 2) match all ("is not empty")

None reload the multi-picker's options in the main screen unless I actively search for it in the search option of the picker.

If you've got a hint on your proposed solution, that's be awesome. Thanks!

EDIT: Also, yeah, the loop might eat all the fish. True. Maybe have a "modal state" that can be set in modals only but can only be read or deleted in main? On second thought: bad idea.

EDIT2: And a solution(!)

I've managed to get it to work by setting a condition that enables two filters as above but only for one iteration. I'll have to figure out how to trigger the condition to reapply the filter based on some magic and I should be there. I'll keep exploring and report a definite solution - if found - in the original discussion. Thanks