Tags can be used to automatically hide/show Fields based on the values of other Fields. They work similarly to Hidden Conditions, but if you have a long and/or complex list of hide/show rules, you’ll find Tags easier to work with.
As an example, an app may have five Fields that should display if a requester selects Compliance from an area_of_law Field. If a requester selects Disputes from area_of_law, however, an app may need to display a set of three different Fields. Instead of applying redundant hidden conditions to each of these Fields, Tags can quickly be applied to each Field; any Fields with a Compliance Tag would only show when Compliance was selected, and vice-versa for Disputes.
Have our T&C team walk you through this tutorial:
Let's Get Started!
This tutorial will teach you how to use Tags to show different sets of Fields depending on the value inputted for a separate Field.
In our example, we’ll use a Combo Field named area_of_law. If a user selects Compliance as this Field’s value, we’ll say we want Fields named a, b, and c to be revealed. Alternatively, if a user selects Disputes from area_of_law, we want Fields d, e, and f to be revealed.
1. Create Your Tags
Our first step will be to create our Tags. Browse to the App’s Advanced Designer page and select the Tags node.
To create a new Tag, select Add, provide a Name and select OK.
We’ll create two Tags: Compliance and Disputes.
2. Build an Update Tags UI Action
Next, we need to create a UI Action that will conditionally activate tags based on the value of some Field.
Browse to the Advanced Designer page and select UI Actions.
Select Update Tags from the Add dropdown.
Provide a Name for the UI Action.
Select Add above the Tag Conditions section. In the Tag Logic Field, enter a condition that evaluates the value of your area_of_law Field and outputs the associated Tag. We'll be creating separate conditions for our two Tags within this UI Action so create one that checks for the value of Compliance and one for the value of Disputes as shown below.
New to Liquid? Check out our Crash Course on Liquid to learn more.
Select OK to save this UI Action
3. Link Your UI Action to a Field
Next, configure the appropriate Field to trigger your UI Action whenever a user changes its value. For us, that’s the area_of_law Field. Whenever a user selects a value from this Field, we want our UI Action to fire and check to see if one of its conditions is satisfied to activate a Tag.
Open the Wizard, browse to the Fields screen, and select the area_of_law Field. From the Field’s UI Action property on the right, select the Update Tags UI Action that you just created.
4. Tag Your Fields
Finally, we need to place our Tags on each of the Fields that we want to hide/show.
Select the appropriate Tag from the Tags property dropdown.
In our example, we'll tag Fields a, b, and c with our Compliance Tag and tag Fields d, e, and f with our Disputes Tag.
Update your app to save your work.
Test Your Tags Out
Congrats! You’ve just added Tags to your app!
To test them out, launch a new transaction.
As seen in the screen recording below, depending on the value selected in the area_of_law Field, different Fields will become unhidden. If a user selects Compliance as the area_of_law value, a, b, and c will appear. If a user selects Disputes, d, e, and f will appear:
This Update Tags UI Action is pretty slick. But you should note that it has its limitations. If your app requires a long list of determining Field values to activate your Tags, or your determining Field values should activate completely separate sets of Tags, it becomes much easier to build out and update your Tag logic in a list, which can be leveraged with a Update Tags Using List Lookup UI Action.
Gotchas
- A primary difference between Hidden Conditions and Tags is that Hidden Conditions default to displaying a Field, while Tags do the opposite. In other words, a Hidden Condition must be proven true before anything is hidden. On the other hand, a Tag must be activated before anything is displayed. You’ll probably want to think about that for a few minutes, because it can be tricky to wrap you head around at first.