If, for example, you need to hide a component until a row is selected in a table, you need to do the following:
Select the component that you want to add conditional visibility to. In this example, that component is a table that displays all the purchases made by the selected customer.
In the component menu, go to the Display section.
Click in the Conditional Visibility field, and choose the condition that you want to use, or use a formula. In this example, I'm choosing my Customers table and then Selected Row. This way, when my user clicks on a customer, a table will appear below the first one that shows all the purchases made by that customer. Note that I click on the Apply button next to Selected Row – this is because I don't want a specific value from that row.
You do not have to enter it manually, but the value of the Conditional Visibility field in this case will be
=elements.Customers["0"].selected_item
App Builder view:
App view:
A common use case for visibility settings is to make certain components visible to specific teams or kinds of users.
To implement this kind of conditional visibility, you will need to have a Property Value set up. In this example, I am going to set up the property value Onboarded. I can do that by going to the Users menu, which can be accessed either in the left hand menu in the resources section, or in the account menu in the upper right hand corner.
To set up conditional visibility based on this property, start the same way as in other examples – click on the component you wish to make conditionally visible, then go to the Display section in the component menu.
In the Conditional Visibility field, choose the user property that you want to use. Because my property type is a checkbox, it already returns True or False based on its value.
If you were using a property that had text elements or something else, for example with the values "Junior," "Middle," and "Senior," you might need to use a formula like EQ() to get the result you want. For more information about using such a formula, see the previous example about setting visibility based on a specific value.
App Builder view:
App view:
Here are a few examples of how conditional visibility can be used:
Sometimes you may want to use multiple conditions when setting conditional visibility for a component. An easy way to do this is to use logical operator formulas like AND(), OR(), and NOT().
In this example, I will use AND() to make my purchases table visible only when the selected customer has a status of Active and true for Is Approved. If either of these conditions is not met, the purchases table will not be visible.
To set up conditional visibility using multiple conditions, start the same way as in other examples – click on the component you wish to make conditionally visible, then go to the Display section in the component menu.
In the Conditional Visibility field, first choose the logical operator formula that you want to use. In this example, that will be AND().
Next, enter the conditions that you want to use with the logical operator.
In this example, Is Approved is a checkbox – so it will already return True or False – but Status is a text field, so I will need to use the EQ() formula to return True or False.choose the user property that you want to use. Because my property type is a checkbox, it already returns True or False based on its value.
When I have set this up correctly, the value in the Conditional Visibility field will be:
=AND(elements.Customers["0"].selected_item["Is Approved"], EQ(elements.Customers["0"].selected_item.status, "Active"))
App builder view:
App view:
As an example, you need to hide a component until the value in a certain field is equal to a certain value. Let's consider the same example, will hide the table with purchase info until a user with Active status is selected in the Customers table. To do this, we will use the EQ() function to compare two values:
Select the component that you want to add conditional visibility to. In this example, that component is a table that displays all the purchases made by the selected customer.
In the component menu, go to the Display section.
Click in the Conditional Visibility field, and choose the condition that you want to use, or use a formula.
In this example, I'm using the EQ() function to compare the value Status in the selected row to the value "active".
To do this, I first write or choose the formula EQ(), and then I enter my values. For the first value, I choose my Customers table, then Selected Row, and then the Status field. For the second value, I simply write "active".
In the end, the value in the Conditional Visibility field will be:
=EQ(elements.Customers["0"].selected_item.status, "active")
With this formula set up, the table that displays purchases will only display if the selected customer has a status of Active.
App builder view:
App view:
