Conditional Button Visibility

How to make it so a button is visible if ANY inputs on the screen are empty?

You can’t nest “empty” groups with visibility settings for each input because this is an AND relationship, not an OR relationship. For example if you have fields Name, Email, Password and create groups like

Name Visibility → Visible if Name is Empty
Email Visibility → Visible if Email is Empty
Password Visibility → Visible if Password is Empty

This is fine if ALL the fields are empty, but if you put anything in any of the fields it will make the button invisible because these are all nested within each other. I don’t want the button to disappear until ALL the fields are filled.

Seems like the only option is to do the reverse with a button that is only visible once all fields are filled…but I like the look of having a “disabled” button until all the fields are filled.

Hi @naossoan ,
So as long as there is one field empty, be button will be visible but not enable correct. once all 3 are filled in, button is clickable, and all this with button always visible correct?

Well not exactly. I was trying to follow the logic of the Adalo help section for making an “inactive” button.

They do it by having 2 buttons. One is a bit lighter in color to indicate that it is ‘inactive’ while the other one is normal.

They use the example of an input field controlling which button is visible. If the input is empty, the “inactive” button is visible, but when you fill in the input, the normal button becomes visible and the ‘inactive’ one disappears.

This works fine if you just want it to be controlled with a single input, but doesn’t work if you want it to rely on multiple inputs…

trying to figure out how to do it.

Can you show that help section? Probably that is just a button with different color and no action associated to it and the other button reverse, and basically they have the reverse visibility conditions.

You mean, something like this: The One with the Visible button

  1. Create the button
  2. Add visibility conditions to this button associated with one of the inputs. Only visible if input A is empty.
  3. Make this button a group.
  4. Add visibility conditions to this group associated with another of the inputs. Only visible if input B is empty.

Repeat until you have all inputs covered.

Yes, that is what I am saying.

This works ONLY for the button I want to be hidden until ALL fields are filled, however it DOES NOT work for the initially visible “inactive” button because as soon as you put anything in ANY of the fields, the button disappears, which I don’t want to happen until all the fields are filled.

These nested visibility settings are like AND relationships, not OR relationships…

So it works fine for the button I want to show when ALL fields are filled, but not the other way around.

So basically is just the sample I gave you but hiding the button but not disabling as I created. Your statement here is how I did it before:

Well not exactly. I was trying to follow the logic of the Adalo help section for making an “inactive” button.

They do it by having 2 buttons. One is a bit lighter in color to indicate that it is ‘inactive’ while the other one is normal.

They use the example of an input field controlling which button is visible. If the input is empty, the “inactive” button is visible, but when you fill in the input, the normal button becomes visible and the ‘inactive’ one disappears.

This works fine if you just want it to be controlled with a single input, but doesn’t work if you want it to rely on multiple inputs…

So this is the example I madenow, I changed now to button visible or not but depending on all fields filled in:

You need all 3 fields filled in to show the button, if one at least is empty, the button will not show.

Pragmaflow had a video tutorial which may help with a solution.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.