Having a button Turn Itself on/off

Hi fellow Bubblers,

I am trying to create a button (or something of the sort) that will be able to turn itself on and off. I want it to function in a similar way to a radio button, but the button itself be the thing that indicates if it is on or off by color.

So far, I’ve tried creating a button and creating a workflow for that button:

I also created a separate workflow for the te opposite state, yet I was unable to make it work. Should I even be using a button or is there another element that I can manipulate more easily?

Thank you in advance for any help!

1 Like

You’re headed in the right direction, but something to keep in mind.

When you have a button that employs conditional logic to effectively toggle a state between yes and no, you should place the “Only when” condition at the Workflow (ie. the square tile) level, and not on the step itself. Otherwise, they may cancel each other out inadvertently.

Let me know if that’s the issue. If not, happy to take a closer look.

Just keep in mind that a state change only lasts for the time that that user is on the current page. If you want it to be a (semi) permanent change, it should be based on a database value. (Ex. the current invoice has been marked as paid, so button to pay should be disabled).

1 Like

To toggle a button (or any Boolean “yes/no” value) between the “yes” and “no” state, you only need a single workflow step, configured like this:

Evaluating Some_yes/no_value is "no" is Bubble’s version of a Boolean “not” or “flip-flop” type operation.

If the value is currently “no”, this expression evaluates to “yes”. If the value is currently “yes”, this expression evaluates to “no”. So it toggles between the two states.

You can have your actions for yes and actions for no after that toggle step. (For yes steps, configure the step to be “only when… that thing is “yes””. For no steps, configure the step to be “only when… that thing is “no””.)

1 Like

Good points, @keith.

I’ll add that when using that setup, it’s a good idea to set a default value for the state. (My approach is rooted in the time before Bubble had default states).

I believe that there as assumed “no” at first if you don’t set a default value. But it’s been a while since I’ve tested that logic.

1 Like

Just to clarify a bit! … Yes/no values when empty (the default state unless you’ve done something else), are (as in JavaScript) what they call “falsey”.

“Is Empty” evaluates to false when forced to a Boolean. So empty yes/no’s are “false” (“no”) when first created.

This is how it should be. And so you can confidently know that a newly created yes/no is false unless you’ve overridden the default (either in custom state setup or data type settings).

You can also confidently set a yes/no to false by nulling it out. (That is you can set it to literally nothing or set it to “no”… same result!)

BTWs the toggle operation took me forever to figure out. It’s a total “duh” moment when you realize it, but it’s pretty darn obtuse!

I’m still finding places where I worked around what I THOUGHT was a limitation of Bubble and did multiple tests for the state of a Bool. DERP!!!

(Would be easier if there were just a :not operator, but whaddyagonnado?

Thank you so much. Such a simple answer. I hate to find out this way, but I do appreciate all the help!

1 Like