Use show/hide conditional logic where possible to create a dynamic fact find template. That way, the template only displays fields that are relevant to the end user. This guide shows you two display options that you can use to show/hide components on a template:
Binary outcome - a simple piece of logic that shows or hides a component based on a value in another component.
Multiple outcomes - A more elegant piece of logic that can display one of many component options based on the value of a different component.
In this example, we place two components on a template page. We use a Select component (with a drop-down menu) to let the end user indicate the number of dependents (aka the independent variable). Depending on the end user's selection, BrokerEngine hides or displays a Field Set component that has text fields to enter the name and age of each dependent (aka the dependent variable).
Contents
Prerequisites
Know how to create and edit a fact find template.
Know how to create a drop-down menu with the Select component and add text fields to a Field Set component.
Configuring a binary outcome
Use this option to hide a component.
If the value in the independent variable (i.e. number of dependents) is None, then BrokerEngine hides the dependent variable (i.e. the Field Set component with name and age fields).
If the value is something other than None (e.g. 1, 2, 3, more than 3), BrokerEngine displays the dependent variable.
Go to the template and locate the dependent variable (i.e. the Field Set component). Hover the component and click the Edit icon.
Select the Conditional tab.
Set the Display field to False.
Click the form component field and select the target component (i.e. independent variable). In this example, the component name is numberOfDependents.
Enter the target value. If the value is a word, use all lowercase letters. In this example, the value is none.
Click Save and then Save again on the template page.
Click the Preview link and test the logic. In the GIF below, the template hides the Field Set component when the value in the Number of dependents field is None.
Configuring multiple outcomes
Compared to the above example, this workflow delivers a much more elegant user experience. The number of name/age rows in the Field Set matches the number of dependents. In this scenario, we create the following components on the template canvas
1 Select component with a drop-down menu (same as the above). The end user sets the number of dependents
4 Field Set components with text fields that collect dependent name and age data. Each component has a different number of rows: 1 row, 2 rows, 3 rows, and 5 rows. If, for instance, the end user sets the number of dependents to one, then the template displays the Field Set component with one row. If the number of dependents is None, then the template hides all Field Set components. And so on.
Setting the default display
The first step is to set the independent variable default display. In this case, we set the number of dependents to None.
Go to the Select component and click the Edit icon.
Click the Data tab.
Go to the Default Value field and select None.
Click Save and then save the template.
Creating logic for the dependent variables
In this example, we configure logic for the Field Set component that displays one row of name and age fields.
First, go to the first Select component and click the Edit icon. Make sure the Display tab is selected. Check the Hidden box.
Next, click the Logic tab and create the trigger.
Click the Add Logic button.
Enter a unique identifier in the Logic Name field.
Click the Type field and select Simple.
Click the When the form component field and select the independent variable (i.e. the name of the Select component that sets the number of dependents).
Enter the target value. If the end user selects this value, then the template performs a specific action (see below).
Now create the action.
Scroll down and click the Add Action button.
Enter a unique action name.
Click the Type field and select Property.
Click the Component Property field and select Hidden.
Click the Set Status field and select False.
Click separate Save buttons to keep the logic and the component.
Repeating the steps
Repeat the same steps to add the same logic to each dependent variable (i.e. Field Set component). Be sure to enter unique labels for the Logic Name and Action Name fields.
Previewing the results
On the template canvas, click Save again and then click the Preview link. The example below shows the results.
If the end user selects one dependent, the template shows the component with one row for name and age inputs
If the end user selects three dependents, the template shows the component with three rows for name and age inputs
