Changing a Component's Visibility
With Adalo, you can add logic to your components so that they are only visible when certain rules apply.
Last updated
With Adalo, you can add logic to your components so that they are only visible when certain rules apply.
Last updated
Skill Level: Beginner
Have a basic understanding of Databases, Screens and Components, and Magic Text
You do not need a paid Adalo plan to use this feature
With Adalo, you can add logic to your components so that they are only visible when certain rules apply. For example, you may only want Admin users to see a button that lets them add new records. Or, you may only want some text to be visible if the certain data is not blank.
To Change the Visibility of a Component:
Select a component
Click the More Menu icon (the three dots) at the top right of the left panel, and select Change Visibility
Select Sometimes Visible
Alter the visibility so that the component is only visible under certain conditions. You can learn more about filter and conditions in this guide.
For Texts the available options are:
Is equal to, Is not equal to, Contains
For Numbers the available options are:
Is equal to, Is not equal to, Is greater than, Is less than, Is greater than or equal, Is less than or equal and Is between
For Toggles the available options are:
True, False
For Date & Time the available options are:
Is after, Is before, Is between
For Images the available options are:
Is equal to, Is not equal to
For Files the available options are:
Is equal to, Is not equal to
For Addresses the available options are:
Is within, Is not within- Miles of, Kilometers of
For example, take the vacation app we've been using to demonstrate different functions. Suppose it displays all planned trips, but we want a way to differentiate trips that are occurring soon from those that aren't. Above we have changed the visibility of the hourglass icon so that it's only visible for a particular trip if that trip is happening between the current day and a week from the current day.
If you want to learn how to create an empty state— a screen that shows up when no data input matches filtering or search criteria— check out this tutorial.
If you would like to take a further look at how to set Conditional visibility we will highly recommend you take the Conditional Visibility Course from The Adalo App Academy.
