Hi,

I'm trying to implement the toggle button functionality but the pattern toggle button (of the outsystemsuiweb) displayed strange behavior. Toggling to the true option works fine, but if I want to toggle back to the false option this doens't work. 

Is this a know bug in the widget or am I doing something wrong? The toggle button is used in a list.


Hi,

Have you done all these steps yet:

  1. To setup the toggle you can follow this document. 
  2. Than use that IsChecked variable on input widget property Enabled. 
  3. On toggle setup the onChange action. On that action ajax refresh the input widget.

Regards,

Nuno Verdasca

Hi Nuno,

I read the article you descibed and set up the toggle as they described in the first part. 

For me it is not nescessary to disable the toggle button. The user always need the option to toggle from false to true and reverse.


This is a setup I did in a small project. And I just did this that you can see in the pictures.


Regards,
Nuno Verdasca

Hi Nuno, 

The functionality you described works fine because the toggle variable is linked to a local variable. This indeed works correctly. 

In my example the toggle widget is implemented in a list of records and linked to a boolean variable which is present as an attribute in the list of the table record. I think there is the difference. 

Hello Wendy, 

I used the toogle in the past, in TableRecords, and it worked as expected. 

Are you using the OnChange? If so, can you show the code? 

Also, whats your platform version and OutSystems UI veraion? In the recent past the toogle was with a problem, but it was already fixed. 

Cheers 

Hi Wendy,


Can you please describe the business logic you are trying to implement with the toggle, do you have an OnChange action associated to it or are you just trying to change the value of each line and save the full list afterwards?


Kind regards,

Hugo

Eduardo Jauch wrote:

Hello Wendy, 

I used the toogle in the past, in TableRecords, and it worked as expected. 

Are you using the OnChange? If so, can you show the code? 

Also, whats your platform version and OutSystems UI veraion? In the recent past the toogle was with a problem, but it was already fixed. 

Cheers 


Hi Eduardo,

I'm using the Onchange indeed. The platform version is 11.0.542.0 and OutSystemsUI version 1.7.9 the latest stable version. 

The code of the sceen and onchange:


The current row is updated. So my expectation is that the boolean variable 'isdoorbelasten' has the value true or false, because this is set with the toggle widget.

In my opinion the most remarkable thing is that toggle to true works fine, but to switch back to false isn't possible. Additionally when I start the debugger the OnChange is triggered when I set the value to true, but nothing happened when I switch the toggle back to false.

Hello Wendy,


I see that you did refresh the data binded to the list record, but did you add the ajax refresh of that? Maybe you're simply missing a step on the update.

Wendy Wubben wrote:

In my opinion the most remarkable thing is that toggle to true works fine, but to switch back to false isn't possible. Additionally when I start the debugger the OnChange is triggered when I set the value to true, but nothing happened when I switch the toggle back to false.

Where are you placing the breakpoint? At the Start Node of the Action?
Also, are you getting any JavaScript error in the Console of the browser? JavaScript errors tend to disable the OnChange actions if I am not wrong.

In the OnChange action are you setting the value of the attribute associated with the Checkbox of the Toggle?

Cheers

John Emmanuel Si wrote:

Hello Wendy,


I see that you did refresh the data binded to the list record, but did you add the ajax refresh of that? Maybe you're simply missing a step on the update.

Hi John,
Sorry for the late reaction.
In my code first there is an update of current row record in the tablerecord list and after the update there is qeury refresh and thereafter an ajax refresh action.But this is not working because the toggle set to false value doensn't work. I set the debugger breakpoint at the beginning of the onchange linked to the toggle widget. When toggle to true the onchange is triggered and my debugger is activated. By toggle to false, the onchange action isn' triggered. 


Eduardo Jauch wrote:

Wendy Wubben wrote:

In my opinion the most remarkable thing is that toggle to true works fine, but to switch back to false isn't possible. Additionally when I start the debugger the OnChange is triggered when I set the value to true, but nothing happened when I switch the toggle back to false.

Where are you placing the breakpoint? At the Start Node of the Action?
Also, are you getting any JavaScript error in the Console of the browser? JavaScript errors tend to disable the OnChange actions if I am not wrong.

In the OnChange action are you setting the value of the attribute associated with the Checkbox of the Toggle?

Cheers

Hi Eduardo,

The breakpoint was placed at the startpoint of the onchange action binded to the toggle variable. In the console of the browser no errors occur. And indeed in the onchange action I'm trying to set the value of the attribute associated with the checkbox of the toggle.


Hi Wendy,

"...in the onchange action I'm trying to set the value of the attribute associated with the checkbox of the toggle."

This is usually a problem. The variable associated with the checkbox is automatically set to the value True or False, depending on if the user has checked the checkbox or not, before the action starts.

If you are changing this value, you may be messing with the widget behaviour, if you do not refresh the widget itself (the toggle). And this may be the problem, as you change the value "visually" back to false, but its value is already false (for example), and so it does not fire the event (this is just a guess).

I would avoid setting the value programmatically in the OnChange.

Is there any reason for you to set this value? Do you want to "revert" the user decision? 

Cheers

Hello Wendy,


I just did a sample with table records with switch, and the OnChange works (although there are delays as usual and some toggle did not trigger for either transition).

** EDIT: I used extended properties "onchange" instead and triggered a button click for a hidden button which executes OnChange screen action. This method seems to be faster and few-to-no failure on my end. Maybe you can try this instead? **


Something I noticed also from your OnChange logic though is that the database isn't always updated, but the table is refreshed. This action will simply reset the change you made after toggle. Maybe this inconsistency is the cause?


Hope this helps!

- Emman

The options described above doens'nt work for me unfortunately. For now we decided to use the normal checkbox

functionality, since this works fine. Thanks for all the tips and suggestions hopefully we have time left in the sprint so that we can do further research to solve the problem.


Hello Wendy, 

Sorry to hear that. 

If you have time in the future, please, build a very small example and attach here. This will help understand the problem and give OutSystems an example so that they can work on. 

Cheers