Conditional or branching logic can be used to hide and show components based on the response to previous questions. The condition can be as simple as only showing a question when something is true or as complex as using a Javascript expression that that checks multiple fields!
Simple Conditional
Conditional logic is available on the conditional tab settings of every component. The easiest way to create conditional logic is using the "simple" options. In this
ℹ️ When configuring a condition based on value selection fields (Radio, Select, Select Box and SharePoint data), ensure you are using the Value and not the Label when setting the value inside your condition.
Advanced Conditional
Advanced conditional logic can be used to hide and show components based on multiple conditions. Instead of a dropdown UI, the Advanced method utilizes JavaScript. This provides power users with the freedom and flexibility to write complex conditions to fit any use case.
Before writing your Javascript it's important to understand the available variables:
Variable / Function | Description |
form | form The complete form JSON object |
submission | The complete submission object. |
data | The complete submission data object. |
row | Contextual "row" data, used within DataGrid, EditGrid, and Container components |
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. |
TF_DATASOURCE(id) | Returns a promise containing all values from a data source |
TF_USER() | Returns the logged-in user object |
TF_TEAM_ID() | Returns the Id of the current team |
TF_RESPONSE_ID() | Returns the response Id of the current form |
Use the show function to start your line of javascript when conditionally showing or hiding. In the following example, this conditional field will display when the Currency field has a value less than $45,000 and the Radio field has the value 'single' or 'widowed':
show = (data.income < 45000) & (data.maritalStatus == 'single' || data.maritalStatus == 'widowed');
The data variable is being used here to reference the input data from a number and radio field. When referencing fields, ensure you are using the Property Name and not the label. The Property Name can be found within the API Tab of the component settings.
When referencing a value selection, ensure you are using the Value and not the Label inside your Javascript code. Component values can be found in the Data Tab of the component settings. This applies to the Radio, Select, Select Box and SharePoint Data components.
The SharePoint data component will store all columns associated with the selected value. Therefore to reference a SharePoint data component response in a advance conditional please be sure to reference down the column e.g.
show = data.sharePointDropDown.ColumnName
