Create Component States

Sometimes you may need to create components that have multiple states. For instance, a button that is greyed out until an input is filled in. The way Adalo renders screens makes it very easy to do this. Since Adalo renders the screen from the top down, any missing hidden components are replaced by the components below it. Let's create a simple button that changes states if an input is filled.

1.) Add a simple button to a screen by clicking the big plus sign in the top left

2.) Below it, add another button just like it, but set the button color to a lighter color

3.) Let the bottom border of the first button and the top border of the second button barely touch each other. You can zoom in using Cmd and + (Mac) or Ctrl and + (PC) to make sure the borders are touching.

4.) Now let's add a text input field above the buttons by clicking the big plus sign in the top left, then clicking the Forms and Fields dropdown section.

5.) Let's change the visibility of each button so that the one that appears is different depending on if the input is filled or empty. Click on the darker button, then click on the More button and choose Change Visibility.

6.) Choose Sometimes Visible from the Visibility dropdown.

7.) In the "Will be visible if..." dropdown, choose Other Components > Input

8.) Change the Is equal to dropdown to Is not equal to, then leave the third input of the visibility set to Empty and click Done.

9.) Now click on the second, lighter button and repeat Steps 5-8 for this button as well - only this time set the visibility to Is equal to and leave the third input set to Empty.

Now this button will change colors based on if the input is filled in or not! The key to making this work is that the borders touch each other so they can take each other's placed based on the visibility conditions.