Show or hide certain UI elements based on API data.
Visibilityproperty, 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 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
Visibilityproperty for a UI element.
- 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.
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!
Setting conditional visibility on a component with states.
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
Visibilityproperty of the list container element.
You can also control the visibility of an item binding the
Visibilityproperty 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
Visibilityproperty 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
Visibilityof the list container as shown in the previous examples.
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
Visibilityproperty of the corresponding UI element.
In this example, we'll control the visibility of a description text inside a detail page.