Visibility Rules

Visibility rules allow you to create rules to determine whether a given component is visible (and able to be interacted with). For example, you can place several buttons in the same place and then create different visibility rules to determine which one appears.

Creating a Visibility Rule

When configuring a component, you’ll find visibility rules at the bottom of the configuration panel. You can create multiple rules for a component - the component will be visible when all rules are satisfied.

Each rule is comprised of a component value that is compared, using an operator, with another value.

Example:

Filter/Value [is equal to] 20

Table/Selected row/Data/Email [is equal to component value] Riders/Data/Email

In the first example, this component will be visible if the value input into the filtes is “20”. In the second example, if the table’s selected row’s email is not equal to the email in the Riders card list, this component will be shown.

Example:

Let’s say you want to create an enrollment tool to help new customers onboard. You want to create a button that will display “Activate”, “Enroll”, and “Complete” - depending on if the customer is in the first, second, or third stage of your process.

You can use visibility rules along with multiple buttons to accomplish this. First, you’d create and configure your “Activate”, “Enroll”, and “Complete” buttons. Then, you set different visibility rules to determine when they appear, and place them on top of each other in your design.

1 - “Activate” button rule:
Customers Table / Selected Row / Data / Stage [is equal to] 1

2 -“Enroll” button rule:

Customers Table / Selected Row / Data / Stage [is equal to] 2

‍3 - “Complete” button rule:

Customers Table / Selected Row / Data / Stage [is equal to]3