Conditional Settings

Overview

The Form Designer's Conditional tab allows for component visibility based on conditions. Conditions offer form designers greater power and flexibility, resulting in a more personalized and structured experience for end users when filling out forms.

There are two sections in the Conditional tab:

• Simple
• Advanced Conditions

Simple

The Conditional tab's Simple section enables hiding or displaying components based on other component values. When setting up a Simple condition, you can trigger it based on the data input of a single field on a form with three configurable settings.

• This component should Display: Select whether you want the field to Show (true) or Hide (false) True If you want to specify the conditions for displaying the component. False if you want to condition when the component hides.
• When the form component: Select the field that will trigger the condition.
• Has the value: Provide the value needed to activate the condition based on the selected field.

info

When setting up a condition based on value selection fields such as Radio, Select, and Select Box, use the actual value, not just the Label.

Advanced Conditions

In the Advanced Conditions section, you can use JavaScript code to create combinations of conditions, giving you more freedom and flexibility. This feature helps create a conditional workflow based on multiple fields on the form. You can write complex conditions according to your preferences. Before writing your Javascript, it's important to note the available variables:

Variables	Description
form	It is the complete JSON object.
submission	The complete submission object.
data	The complete submission data object.
row	This data is unique to a given row, and you can use it in components like DataGrid, EditGrid, and Container.
component	The current component JSON
instance	The current component instance.
value	The current value of the component.
moment	The moment.js library for date manipulation.
-	An instance of Lodash.
utils	An instance of the FormioUtils object.
util	An alias for "utils".