Switch event handler not triggered when toggled externally

App Building
,
1

Hi all,

I have a UI component, a switch (normally hidden) and a table.
When I click on the UI component, it toggles the hidden switch via the click event handler (works).
The switch has an event handler when set to true, to filter the table and another event handler when set to false, to clear the filter.

When I toggle the switch with the UI component, nothing happens.
When I toggle the switch directly, the filter is applied and reset.

So to me, it looks like the toggling does not trigger the switch buttons event handlers for true and false.

Am I missing something?

2

Hi @retool-user-230,

I'm not sure I understand your problem. In particular what do you mean when you say:

When I toggle the switch with the UI component, nothing happens.
When I toggle the switch directly, the filter is applied and reset.

Would you mind sharing a couple of screenshots of your setup?

3

I have a switch button with these event handlers for the value true and false:
image

When I click on the switch button, the filter gets applied (PickingCompleted) and reset like this:
Applied
image

Cleared

image
image930×307 20.7 KB

I also have a UI component with a click event handler like this:
image

This should programmatically toggle the switch button above.
I tried with toggle and inverting:
Inverting
image

Toggle
image

When I click on the UI component, the switch button is toggled (changes to on/off in the UI). But the event handlers for true and false are not called. So the table is not filtered.

1 Like
4

Hii @retool-user-230
You can use a run script on the click of your UI component to achieve the functionality of the switch event handler.

Here is an example I tried with a run script.

image
image1638×609 47.6 KB

5

Thanks @retool-user-230,

The approach I would take is one that uses a variable instead of a toggle component, and a line of code within the table's default filter.

Create a new variable, let's call it pickingCompleteFilter and set default to false.

Your UI component triggers an event that changes the variable, value can be {{ !pickingCompleteFilter.value }} so it will always set the opposite of the current value.

In your table's default filters, filter your column using a terniary, e.g. {{ pickingCompleteFilter.value === true ? 'Picking Completed' : null}}

6

Thanks all - I finally just set a variable shared by the filters and used a RunScript to set and clear the filter.

2 Likes