Hidden Conditions can be used to dynamically show and hide an app’s Fields. This allows you to only display a Field to a user when it is relevant to do so.
For example, let’s say that you ask a user to choose a product_type from a dropdown list, and you provide the user with four possible options: Product A, Product B, Product C, and Other. If the user selects Other, you may then want to immediately display a Textarea Field to the user, so that he/she can type in a product name. In this example, you would create a Hidden Condition that essentially says, “Only show my Textarea Field if the user selects Other from product_type.”
Before We Start ...
This tutorial will assume you understand the following concepts:
Format
Hidden Conditions make use of Comparison Operators, as used in Javascript. They follow a specific format:
[ <name_of_field_being_evaluated> ] <comparison_operator> <value> If the expression evaluates to true, the Field the condition is applied to will be hidden. Otherwise, the Field will display.
For example:
[field_a] != 'Third Party'If applied to a Field named field_b, this Hidden Condition says, “Only show field_b if the value for field_a does not equal Third Party.”
We recommend familiarizing yourself with the various Comparison Operators used in JavaScript that Hidden Conditions rely on.
Beware of “curly” or “smart” quotation marks. If you compose your hidden condition in a separate editor, then copy-paste, you may find yourself with something like this:
field_a != ‘Third Party’
This will not work, and you will need to look very closely to understand why not.
Commonly Used Conditions
There are a few different types of values that Hidden Conditions will accept. Below are some examples to help illustrate your options:
- country == 'Florida': This example says, “If the value for the country Field equals Florida, hide the Field this condition is applied to.” Notice the value in this example is placed in single quotes; this is because we are referencing a custom value that is a string. Follow this format when using custom values.
- attachments < 5: This Hidden Condition will hide a Field if the value for a Field named attachments is less than 5. Notice the value is an integer in this example and does not require single quotes around it as our example with a custom value above does. Integers and decimals do not require quotes.
- ![checkbox_field]: This is a special condition, which will hide a Field if a Field with a Type of Checkbox is not checked. You can similarly use [checkbox_field] to express the opposite. (In this example, checkbox_field is the name of the Field.)
- ![checkbox_field_name]: Hidden conditions based on a Field with a Type of Checkbox are special in that they don’t require a comparison; the condition's evaluation is based on whether or not the Checkbox Field is checked. For example, you may want to hide Attachment Fields unless a user checks a box indicating that they want to add attachments. If the Checkbox is named “add_attachments”, the Attachment Fields would have a hidden condition of ![add_attachments].
- true: This condition is as simple as it gets. Inputting true into a Field’s Hidden Condition property will cause the Field to always be hidden. This is often used when data about transactions needs to be stored but is not useful for an end user to see.
Let's Get Started!
In this tutorial, we're going to create a combo Field that asks a requester if they have any biases to declare. If he/she selects Yes, we then want a Textarea Field to display, prompting the requester to provide more information. However, since they won't need to provide more information if they answer No, we can use a Hidden Condition on the Textarea Field to conditionally hide it.
1. Create Your Fields
Open the Wizard of your app and browse to the Fields tab. This is where you can assign Hidden Conditions.
For our example, we’ll need the following Fields:
- A Field named bias_to_declare with a Type of combo and with values of Yes and No.
- A Field named please_explain with a Type of Textarea.
Note: If you need help creating Fields, see Step 5: "Fields" of Building Your First App.
2. Write Your Hidden Condition
We need to ensure that the Textarea Field will only show when the value of Yes is selected. If we wrote a condition that only hides the Field when No was selected, the requester would have to select the No value before the condition would evaluate to true and therefore become hidden.
Our condition should look as follows:
[bias_to_declare] != 'Yes' This condition says, “If the value for bias_to_declare is anything other than Yes (including a blank value), hide the Textarea Field.”
Navigate to the Field you want to be conditionally hidden under the Fields tab of the Wizard. Place the condition in the Hidden Condition property of this Field. In this example, we’ll place it on our please_explain Textarea Field.
Save your changes and close the Wizard.
Test Your Hidden Condition
Congrats! You’ve created your first Hidden Condition!
To test it out, launch a new transaction. Your Textarea Field should be hidden on launch or when No is selected. If you select your combo Field's Yes value, the Textarea field should display.
There are other ways to conditionally show and hide Fields. Tags and Decision Tables for instance allow an app creator to use some complex logic to determine whether multiple Fields will display based on the combination of inputs for other Fields. Hidden Conditions, however, are the simplest way to hide one or a few Fields and are quick to configure.