question How to detect toggle is enabled in UI builder page? in Developer forum

How to detect toggle is enabled in UI builder page?

ajayraina14 — Thu, 10 Oct 2024 06:25:59 GMT

I have created a settings page using UI builder. In that page I have a toggle and if the toggle is enabled then I want to trigger a scheduled job.

How we can check whether the toggle is enabled/disabled?

Thanks

Ajay

Re: How to detect toggle is enabled in UI builder page?

Kevin83 — Thu, 10 Oct 2024 14:46:52 GMT

One way to do this is to:
1. set up a boolean state variable such as toggleState

2. Bind the checked property to your state variable

3. Update the state variable when the toggle changes

4. you can then access the state variable later such as in this script I wrote when a button is clicked

Re: How to detect toggle is enabled in UI builder page?

ajayraina14 — Fri, 11 Oct 2024 06:56:01 GMT

@Kevin83 Thanks for the reply

I followed the steps but in the log it is always showing as false.

Can you please confirm if its giving correct value at your end.

Thanks,
Ajay

Re: How to detect toggle is enabled in UI builder page?

Kevin83 — Fri, 11 Oct 2024 14:01:25 GMT

Yes I checked it on my end and it is logging the value correctly

Re: How to detect toggle is enabled in UI builder page?

ajayraina14 — Mon, 14 Oct 2024 15:07:08 GMT

@Kevin83 Below is the configuration which I have done, The only difference is that I want to trigger the toggle not with the button, the toggle on/off should be triggered by the toggle itself. Below are the screenshots:

The value is not changing when toggle is changed to on/off.

Re: How to detect toggle is enabled in UI builder page?

Kevin83 — Tue, 15 Oct 2024 13:30:10 GMT

The event handlers associated with the toggle do not run in sequence, so it is possible your script runs before the state is updated.

If you want to you reference the toggle value and update state all in one script something like this:

/** * @Param {params} params * @Param {api} params.api * @Param {any} params.event * @Param {any} params.imports * @Param {ApiHelpers} params.helpers */ function handler({api, event, helpers, imports}) { if (event.payload.value) { //toggle set to true console.log('enable job'); } else { // toggle set to true console.log('disable job'); } api.setState("toggleState", event.payload.value); }

In your case you may not need the state variable at all. The purpose of the state variable original was to do record the value of the toggle for later use by the button click, but it sounds like you want to take immediate action based on the toggle being clicked