Show or Hide Controls (Advanced)

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, you would only show fields for spouse when both Marital Status is "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.  

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:

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.