Tags are used to control the display of sets of Fields. However, the Update Tags UI Action you can use to implement them has its limitations; you very well may find yourself needing a better way to organize your Tag activation conditions.
An Update Tags Using List Lookup UI Action allows you to tidy up your Tag logic in an Excel spreadsheet and comes in handy when:
- You have a large number of Tags and your App’s business logic around which Tags should be activated becomes more complex.
- You’re applying multiple levels of Tags whose activation depends on independent determining Fields’ inputs.
- You need to apply a separate UI Action to a Field also serving as a determining Field for a Tag’s activation conditions.
In this tutorial, we’ll walk you through how to use a spreadsheet to organize your Tags so you can easily apply multiple Tags to independent determining Fields.
Before We Start...
This tutorial will assume you understand the following concepts:
Let's Get Started!
In our example, we’ll expand on the example shown in our Using Tags to Hide/Show Fields tutorial; we’ll similarly use a Field named area_of_law and when a value of Compliance is selected for it, Fields a, b, and c should display. If a value of Disputes is selected, d, e, and f should display. In addition, this tutorial will include a second determining Field named matter_type. If a value of Patent is selected for this Field, we also want a Tag to be activated, which will display a new Field named z.
Note that if we only wanted one of these determining Fields in our app, we could easily do this without a List. However, UI Actions override each other so we can only use one Update Tags UI Action on an app. Since we have to account for each possible combination of determining Field inputs, you can trust us when we say it’s much easier to use a List to build out this logic than to write a single UI Action whose Liquid script would have to essentially say something like:
“If area_of_law == Compliance and matter_type == Patent, activate tags Show-ABC and Show-Z. If area_of_law == Compliance and matter_type == Other, activate tag Show-ABC. If area_of_law == Compliance and matter_type == Null then activate tags Show-ABC….”
… You get the picture, and it’s a messy one that would be hard to update down the road. Ergo, let’s create a nice clean list!
1. Create Your List
Our goal is to create a List that checks the values of each determining Field and activates one or more Tags based on some combination of values.
The formatting guidelines of a List used to manage Tags is the same as a basic List.
For help formatting basic Lists, see our Formatting, Importing, and Updating a List tutorial.
What's special about this List is that it has a column for our tags, as seen outlined in Column E below.
Let’s take a look at Row 3 and see what Tags we would expect it to activate. We can see that if Compliance is selected for area_of_law and Patent is selected for matter_type, Tags named Show-ABC and Show-Z should become active, or, in other words, should display any Fields they are applied to.
Take note that this List also accounts for situations in which our area_of_law Field is left blank (i.e., does not have a value of Compliance or Disputes) as seen in Rows 6 and 10.
Import this List as you would any other.
Need help importing a List? Check out our Formatting, Importing, and Updating a List tutorial.
2. Create Your Tags
Create your Tags in the Tags node of the Advanced Designer as you did in Step 1 of the Using Tags to Hide/Show Fields tutorial.
3. Configure an Update Tags Using List Lookup UI Action
Browse over to the UI Actions node and Add a new Update Tags Using List Lookup UI Action.
Provide this UI Action with a Name.
You may notice a section called Field Updates below the Name property. This section is where you could provide some separate UI Action for a determining Field (e.g., our area_of_law Field) while also applying this List Lookup UI Action. You'll know when you need this functionality, but for now let's skip over this section.
Next, select your List from the dropdown. Additionally, provide the fieldLabel of the column used for your Tags in your List for this UI Action's Tag Property Name. In our example, we used tags.
Above the Matching Conditions section, select the Add button. For the Atom Property, we need to provide the Label of the Field as configured in the Wizard. For the List Property Name, we'll provide the corresponding fieldLabel used in our spreadsheet.
Create a Matching Condition for each Field, as shown below:
Save your new UI Action by selecting OK.
4. Assign Tags to Your Fields
Lastly, you need to assign your Tags to each of the Fields whose display should be determined by the activation of the assigned tag. For our example, we only need to assign one tag to each Field.
For help with assigning tags, see Step 4 of our Using Tags to Hide/Show Fields tutorial.
Update your app.
Test Out Your Tags
It's time to put our Tags to the test.
For a scenario similar to our example, you'll specifically want to ensure that the input of some value in one determining Field doesn’t affect the Fields that are displayed as a result of the other determining Field’s input.
In the screen recording below, note that we can select a value for both Area of Law and Matter Type and both UI Actions will work to reveal the appropriate tagged Fields (and not cancel each other out).