Designers can script more complex show/hide functions by using the Advanced section of a control's Conditional tab. Any conditional logic to show or hide a field belongs on the object being affected. For this reason, attempting to show or hide multiple controls in a single rule is discouraged, unless the control you are looking to hide is a layout component. In the application example below, we look to only show the Spouse's Name and Spouse's Occupation controls when you would only show fields for spouse when both Marital Status is equal to "married". There may be specific reasons why you need to show/hide specific controls, but it is worthwhile to consider alternative options (like grouping all controls that should be hidden within a single layout component).
Since the visibility will be controlled by the Marital Status radio component, we will add the advanced conditional logic to this control. In the component's settings, click the conditional tab, and then click the Advanced panel group to access the advanced editor. Here you can enter any Javascript necessary to control the viewable state of your form components. For Advanced Conditionals, you should always be setting the system variable "show" to true or false. For this purpose, show will always be true.
...
| language | js |
|---|---|
| theme | Midnight |
| title | Hide Controls Rule |
| linenumbers | true |
| collapse | true |
Married" and the check box for Include Spouse On Policy is checked.
Since there are multiple form controls that will be affected, both text controls for spouse have been placed inside a Columns Layout Component. Conditional logic to show or hide will be applied to the Columns object. When writing advanced rules, it's important to make note of the controls that are part of the rule you will be writing. In this example, the Marital Status radio is named "maritalStatus" and the Include Spouse checkbox is named "includeSpouse".
Open the settings window of the Columns component that hosts the Spouse's controls and click the Conditional tab. Click the Advanced panel to open the advanced editor. In the advanced editor, you can use any Javascript code to build logic for showing and hiding components. There are two Javascript variables defined by the system that will help in this effort.
data
The data variable is an object that contains the data for every element that contains data on the form. In the example above, there is a RadioBox component with the name maritalStatus that can contain the value "single" or "married". To access the current value of the control you would reference data.maritalStatus.
show
The show variable should always be assigned a value in an Advanced Conditional rule. The value for show should always be set to true or false to control whether or not the component should be visible.
| Note |
|---|
When using show, it's important to note that the component will not be able to be interacted with if the value of show is false. If you want to hide a control, but still interact with it, it is recommended that you use component.hidden as your variable, rather then show. Do note, component.hidden does not work for all controls, but does work for most common controls such as text, select, and many others. |
For convenience, the Javascript for this rule is available here:
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
if(data.maritalStatus == 'married' && data.includeSpouse)
{
show = true;
}
else
{
show = false;
} |
Pay special attention to the Property Name on the API tab of the controls you will be working with. These names can be edited, but must be unique on the form.
The form example described is available for download here.