Changing a Component's Visibility

With Adalo, you can add logic to your components so that they are only visible when certain rules apply.

Skill Level: Beginner

Before You Begin

• Have a basic understanding of Databases, Screens and Components, and Magic Text

• You do not need a paid Adalo plan to use this feature

Walkthrough

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:

1. Select a component

2. Click the More Menu icon (the three dots) at the top right of the left panel, and select Change Visibility

3. Select Sometimes Visible

4. 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.

Help

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.