Checking a checkbox, and running on change code?

UI Builder
1

I have a page with a data repeater containing a check box. So I end up with between zero and 5-ish checkboxes.

There is an On Change event handler that adds/removes data to Page Data when the boxes are checked/unchecked.

I want to be able to pass an id into the page, which matches one of the check boxes, and pre-checks that check that box. If I use the Checked State logic, it can have the box checked, but the On Change code doesn’t run. So the values aren’t put into Page Data.

It doesn’t seem efficient to replicate the code in On Change and Checked State. My ideas:

  1. Custom JS code to simulate a click on the box to trigger the On Change event hander? Not sure this would even work.

  2. Put the On Change event hander code into a function and call the function from the Checked State Logic?

  3. Something else?

Thanks in advance for the suggestions.

Tim

2

Hello @Tim_Jones

This example should help.

UI Builder - MyApp - Backendless 2023-08-03 12-08-58
UI Builder - MyApp - Backendless 2023-08-03 12-08-581708×1220 254 KB

UI Builder - MyApp - Backendless 2023-08-03 12-13-50
UI Builder - MyApp - Backendless 2023-08-03 12-13-501878×518 46.1 KB

UI Builder - MyApp - Backendless 2023-08-03 12-14-05
UI Builder - MyApp - Backendless 2023-08-03 12-14-051532×428 41.5 KB

Regards

3

Hi @viktor.liablin ,

Thanks for the example. What I’m not seeing is a way to trigger code that is currently in the on change event.

Thanks,
Tim

4

What I’m not seeing is a way to trigger code that is currently in the on change event.

I do not clearly understand your issue. Did you try to paste your logic into the On Change handler example that Viktor share with us?

5

This is the current On Change logic -

image
image753×777 52.5 KB

I want all of that logic to run, as if a user clicked the checkbox, when an an ID is passed in.

Getting the box checked is not a problem, that already works -

image
image882×252 18.2 KB

I don’t want to duplicate the code from the On Checked handler in the Checked State logic, that’s poor practice.

Thanks,
Tim

6

I finally understand what you want to achieve…

Firing a fake event or duplicate logic into the Checked State handler is an absolutely wrong solution(also it may trigger a lot of rerenders).

You should process data separately when you already have your checkboxes list. It could be done in On Before Mount ... or On Mounted ... handlers - any what called once. In that case, we will have an actual state, and only update it in On Change events.

As for code duplication, you could create a custom function that will be called from the “initial calculation” and “On Change” events.

7

@Dima

Thanks for the help. I will move the On Change logic to a function so I can call it from On Load or On Change.

Thank you,
Tim