Visibility Condition

Introduction

Visibility Condition allows the workflow designer to show or hide other fields based the value entered by the end-user in one field.

TIP: Visibility Condition is only available if your organization subscribes to Advanced or Ultimate plan.

Using Visibility Condition

Steps to add Visibility Condition to a field on the form design screen
1. Open the "Properties" panel of the field you want to determine the visibility based on other fields.

2. Enter the expression into the designated input

You can switch between Basic and Advanced mode while entering the expression. The expression uses Javascript expression syntax (click here to learn more).

Enter Visibility Condition in Basic Mode

In Basic mode, you can also use placeholders whose values are calculated at run-time, in your expression. For example, to show "Arrival Date" only if "Should we pick you up?" is set to "Yes, pick me up on arrival", the workflow design can use this expression: {{pickUp.value}} === "1".

"Should we pick you up?" field has Code as "pickUp"

Type {{ to show the list of available placeholders

Enter the expression

The following animation shows how this setup works when the end-user interacts with the form:

Enter Visibility Condition in Advanced Mode

TIP: Advanced Mode is only available if your organization subscribes to Ultimate plan. 

The Advanced Mode in Visibility Condition (and other similar configurations in Rethink Workflow) allow workflow designer to write advanced logic using Javascript syntax. Though it offers an extremely powerful feature, the workflow designer should consider it as the last option because of effort and programming knowledge requirement. 

The expression entered in Advanced Mode should return a boolean value to determine the visibility of the control. Only when the return value is truthy, the control will be displayed. 

The following example demonstrates how to show "Address" field only when the value entered to the "Email Address" field ends with "aduyng.com".

Once published, the following animation shows how the end-user interacts with this logic: