Skip to main content

image


Hi,

I am using variable modes and I connected each toggle switch with the respective variable mode(You can ignore SwitchEmail variable). Toggle buttons are working as expected. I have “disable all” button at top to disable all toggle button . So You can see I set interaction as setting variable to false. But issue is that it is not working as expected.

What happens is when I click on disable all then only 1st toggle button disable. When I click again on “disable all” then all other three push toggle disabled. Also when I switch on 1st toggle then all other three push toggle also become true.


Can someone please resolve this issue? What I am missing in interactions?

I think all switches are assigned same variable switchPush, so they behave in unison. If you switch on one the other also switch on.

You will have to assign different variable for each switch. newsPush, pasPush, promPush and so on.

I have created a variable with 4 modes. And I assign each mode variable to a specific switch. So, all switches are working fine as changing one switch is not changing the other, But the issue was about disabling those switches at one click of the “disable all” button.


Here is the variable I am using:


image

The reason why only the first set of toggles in the “newsletter” section are responding to the tap of “disable all” is likely because they are in the default mode, which is “newsletter”. Since you are not changing the mode on-tap, the other booleans aren’t responding.


I would suggest a different structure here. Instead, make a boolean variable for each toggle switch, like this:

Screenshot 2024-07-07 at 4.35.45 PM


With an interaction like this:

Screenshot 2024-07-07 at 4.39.43 PM

Thanks for this solution.

Can you please suggest to me how to handle this issue by using modes? How to change each mode variable set to false when clicking on ‘disable all’?

Sure! In the dropdown list of “actions”, there should be an option to “set mode.”


I suspect this approach you’re taking may come out to be the same amount of effort as the one I described, but to me it seems conceptually fragile. One limitation you face if you’re not on the enterprise plan is that you won’t be able to add another mode if your design eventually calls for it.


Modes should be thought of as a context or environment for the end-user. Modes should share elements, but the values of those elements will change depending on the mode. Beyond the classic “light mode, dark mode” example here are some others:



  • Modes as sizes: small, medium, large (like different view options in Gmail, comfortable, compact, etc)

  • Modes as brands: brand-A, brand-B

  • Modes as breakpoints: 450px, 1400px

  • Modes as events: black Friday, Christmas, pride month

  • Modes as validation states: success, warning, error


It is best practice for a Mode to be applied to an entire screen, or at least a large chunk of it. Not individual pieces of interface. There will be exceptions of course. I consider validation styling to be one such exception, that link goes to a blog post I wrote about it.


From what I can tell from the screen you designed and the screenshot of your variable collection, the things you are using Modes for (newsletter, product, promotion, press release) are not contexts the user would be in. Instead these are labels for different pieces of data. I would strongly encourage you to go with one boolean variable for each individual toggle switch in your design.


I find that when I am using variables for prototyping a user flow, I am rarely switching modes at all. I usually have a “prototyping” collection with a single mode called “Value” where I store everything I need for prototyping.

Reply


Terms & ConditionsCookie settings