Conditional Visibility

Learn how to conditionally change the visibility of widgets.

You can choose to show or hide any element in your app based on a condition. This is done using the "Visibility" property that can be set on widgets and components. 
The visibility option can be set to any "boolean" field that you have available on that page. This could come from a Firestore document field, or even a custom function.
Conditional Visibility Example
As you can see in the figure above, the likes count is only shown when a picture has any likes.
Let's continue with this example and see how to add conditional visibility on UI elements.
Adding Conditional Visibility
Adding Conditional Visibility comprises of the following steps:
1.​Design a Page (you can skip this if you already have a page designed)
2.​Showing Backend Data​
3.​Show/Hide UI Elements Based on Data​
1. Design a Page
You can skip this if you already have a page you would like to add conditional visibility to.

Here's an example of how you can design a page that shows a list of pictures:
First, Drag the ListView widget from the Layout Elements tab (in the Widget Panel).
Now, add the Container widget by dragging it from the same Layout Elements tab or add it directly from the widget tree.
Drag and drop the Row widget inside the added Container.
Add one Image widget inside the Row.
Add a Column widget after the Image widget and set its Cross Axis Alignment to Start.
Now, add the Text and Row widget inside the Column.
Add the Icon (set to Favorite icon) and Text widget inside the Row.
2. Showing Backend Data
After you have designed the page, make sure you display data from the backend. You can display the data using the instructions here.
See the likes count for the picture is displayed as 0 when a picture has no likes. Let's hide the likes count text(with count 0) using Conditional Visibility in the next section.
3. Show/Hide UI Elements Based on Data
Conditional Visibility allows you to define a condition based on two values. The UI element can be displayed based on the result which can be True or False. If the result is True the UI element is displayed.
Conditional Visibility Example
As seen in the above figure, the UI element is displayed only when the First Value (likes_count) is greater than (>) 0 (Second Value).
Here's an example of how to apply Conditional Visibility to UI elements:
Select the Widget that you would like to show/hide based on condition.
Move to the Property Editor (on the right side of your screen) and scroll down to the Visibility section. Click on it to open the section.
Click on the Unset text. (This will open a new panel).
Find the Source dropdown, click on unset, and select the Condition.
Under the Condition section, Click on the First Value text, set the Source to [collection] Record (from ListView).
Set the Available Option to the Field that you want to compare with.
Click on the Equal To dropdown and select the appropriate option from the list.
Click on the Second Value text, set the Value Source to Specific Value.
Set the Value to whatever you would like to compare it with the First Value.
When you run the app, see how the list shows likes count only when a picture has any likes.
​
Using Conditional Visibility to Filter A List
You can use the Conditional Visibility fundamental to filter a list based on a condition. For example, you may display only favorite items from the full list.
To show ListView items based on condition:
Make sure you have designed a page with ListView and Showing the backend data.
Select the first widget inside the ListView.
Set Conditional Visibility for the item as per the instructions here.
Show in UI Builder
You can toggle "Show in UI Builder" to test the effect of showing/hiding that widget in the UI builder. 
This option is only to help you visualize the effect of visibility on the widget and it does not affect your app.
To show/hide UI element in UI Builder:
Select the widget from the widget tree or from the canvas area.
Set Conditional Visibility for the item as per the instructions here.
Check/Uncheck the Show in UI Builder property to show/hide UI element.

Customizing Your App 🖌️ - Previous

Manage Custom Code In GitHub

Next - Advanced Functionality 🤖

Conditional Logic

Last modified 1yr ago