🚦Conditional Visibility
Show or hide certain UI elements based on API data.
Last updated
Show or hide certain UI elements based on API data.
Last updated
With the Visibility property, you can control which UI elements you want to show in the app, based on the API data.
You could choose to hide certain elements within a list upon certain conditions, or display some UI elements only to specific users, among other cases.
The Visibility property must be bound to a data item containing a boolean value. This means, the value of the data item needs to be either True or False.
There are two ways to configure it:
Make it visible: The UI element will show.
Make it hidden: The UI element won't show.
The way to define a boolean data type will depend on the backend tool. For instance, in Airtable, these values can be defined with a checkbox. Then, these boolean data items can be bound to the Visibility property for a UI element.
When "Make it visible" is selected:
If the data item has a False value, the UI element won't show.
If it has a True value, the UI element will show.
When "Make it hidden" is selected:
If the data item has a False value, the UI element will show.
If it has a True value, the UI element won't show.
Remember that the value returned by the API needs to be a boolean (true/false) or a number (1/0), never a string.
Some examples are shown below. Note that there are more possible cases than the ones described on this page, and they can be combined in the way you wish. Feel free to be creative!
If you are using conditional visibility on a stateful component, make sure you set the visibility at the group level.
You could choose to control from the backend which list items you want to display in the app in a specific moment. To do that, add a boolean field to your database items, and bind its corresponding data item to the Visibility property of the list container element.
You can also control the visibility of an item binding the Visibility property of the list container to a non-boolean field: if that field for a specific data record is empty, the list item won't be shown.
For instance, you could hide all the list items that don't have an image in the database, as shown below.
It's also possible to hide a specific UI element inside a list data item. For instance, you could choose to display a piece of text, a badge or a button depending on a boolean value in the database. That UI element would be hidden for some of the list items, depending on that boolean field.
To do that, bind the Visibility property of the UI element inside the list container to the corresponding data item. In this example, we control the visibility of a text element inside the list item, while showing all the list elements. We could also control the visibility of the whole items separately, by binding the Visibility of the list container as shown in the previous examples.
The Visibility property can also be used for single elements outside lists. For instance, you could control the visibility of some elements in a detail page.
To do that, you'll need to select the boolean data item (in this case Show Description) in the detail API request used for the detail page. Then, bind this data item to the Visibility property of the corresponding UI element.
In this example, we'll control the visibility of a description text inside a detail page.
