Logic & Conditions
Last updated
Was this helpful?
Last updated
Was this helpful?
Create intelligent workflows using Form.io's Conditions and Logic system. Show or hide fields, merge component JSON schema, conditionally set field settings, and more based on user interaction with the forms. Conditions and Logic provide more power and flexibility to the form builders. This gives end users a more personalized and structured experience when filling out a form.
Conditions are set on a per-field basis. To configure a show/hide condition, open the component field settings and click the Conditional tab.
There are two different methods to write conditions, Simple and Advanced.
How Does It Work?
The Simple Conditional tab allows the user to show or hide fields based on user input, or value selection of other fields on the form. These conditions are configured using a code-free UI. The following settings are available to configure conditionals.
Show or Hide this field - Select whether to Show the field or Hide the field when the conditions are met.
When - Multiple conditions can be configured on a per-component basis. Select whether to show or hide the field when One or All conditions are met.
Conditions - The Condition section is the criteria that will execute the workflow. Multiple conditions can be added to create complex workflows using an easy-to-use UI. method. Click the +Add Condition button to configure a new conditional.
When - Select what component within the form will execute the condition.
Is - Comparison Operator that evaluates and compares the value of the selected field before the condition is executed. The type of field set for the condition will dictate the available operators the user can select.
Value - The string value the field needs to contain for the condition to activate. If the conditional field uses static values—such as those from a Radio or Select component—the predefined options will be displayed in the Value dropdown as the trigger value for the condition
The combination of all of these settings will determine when the condition is executed on the form. Multiple conditions can be applied to the same component to create advanced conditional workflows
When a condition has been added, all parts of the condition must be entered in order to save the component.
This logic interface is completely code-free and gives the form builder the ability to create advanced if/then statements for showing or hiding a component based on the form user's interaction or response on one or many components.
In the example below, there's an email field that should only display when a Checkbox is ticked and a certain value of a Radio component is selected. Two conditions, one for the checkbox and one for the Radio, are used to trigger the workflow when both conditions are met.
More advanced conditions using JavaScript or JSON custom code can conditionally show or hide fields on the form, when more complex or specific conditions are required in the workflow. This can be useful if the conditional relies on a sub-function within the JavaScript code comparing different values. This provides the form builder with the freedom and flexibility to write complex conditions as they see fit.
Before writing JavaScript it's important to note the available variables:
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
_
utils
util
An alias for "utils"
Use the show function to start the 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. There's also a sub-function that will show the field when the previous condition is met and the Radio field has the value 'single' or 'widowed':
When referencing a value selection, ensure it uses the Value and not the Label inside the JavaScript code. Component values can be found in the Data Tab of the component settings. This applies to the Radio, Select, and Select Box components.
Use JSON Logic as an alternative to JavaScript when writing Advanced Conditions. The same concepts detailed in the Advanced Conditions section still apply. Replace the Javascript variables and operators with JSON Logic.
Follow this link for JSON Logic examples and documentation
What is the Logic feature?
The Logic feature provides a more robust rules engine to conditionally control and manipulate field settings, JSON schema, data values, and custom events. The Logic feature is applied on a per-field basis with the ability to add multiple Logic instances to the field if needed.
Why should I use Logic?
Use the Logic feature when complex conditions are required and you need to conditionally control things like field settings, schema, or data values. The Logic system also allows the user to set multiple triggers and different branches of conditional actions on a single field. Whether you're setting up simple one-to-one conditions or creating complex workflows, the Logic feature is available to meet those needs.
How do I use Logic?
To access the Logic feature, open the components settings of the conditional field and click the Logic tab. Click the +Add Logic button to create a new logic instance. Give the Logic instance a name that is easily identifiable in the future.
Set the Trigger Type to determine how the condition is structured and triggered. Configuring the Trigger will depend on what type of Trigger Type is selected. The Trigger Types are listed below:
Event: Use the Event option when creating your own custom events on your form.
Now that our Trigger is set, add an action that will execute when the condition is triggered. Click the +Add Action button, give the Action a name, and select an action Type. This will dictate what type of action will execute when the condition is triggered.
There are four Action Types you can choose from:
Property: Conditionally change field settings such as Required, Label, Disabled, and more! Depending on the selected Component Property, configure the Set State to True or False (EX setting a required flag) or input the conditional property Text (EX changing the Label property).
Value: Change or populate data values in the conditional field using Javascript. The following variables are available to use in your Javascript code:
"row", "data", "component", and "result"
Merge Component Schema: Not all field settings and configurations are offered with the Property action type. Directly update the field Schema Definition to configure additional settings using Logic conditions, dynamically change labels or value selections, and populate interpolated data from other fields.
Custom Action Execute a custom event workflow. Typically coincides with other fields such as the Hidden Field, Data Source, and Button components.
What are Custom Validations?
Write custom Javascript or JSON code to satisfy complex validation rules and workflows on a per-field basis.
Why should I use Custom Validations?
While Form.io offers pre-defined validation rules such as required fields, min/max input values, and unique data submissions, at times, custom validation rules may be needed to satisfy rules and requirements unique to an application. This ensures that the data a user enters in a field meets the standards specified by the form designer before the user can submit the form.
These custom rules provide a unique form experience for end users, allowing form designers to create customized validations specific to their application and form needs.
How do I use Custom Validations?
Open the components settings of the field you want to apply the validation rule to and click the Validation tab. Open the Custom Validation panel and write Javascript or open the JSON Logic Validation panel to write custom JSON.
Example
In the following example, I need to validate that the data of the 'Confirm Email' field matches the 'Primary Email' field data using Javascript.
Use the valid function to start the line of code. Add the input variable to reference the data from the Primary Email field. Use the ? true: variable to input the custom message when the validation is triggered.
What are Calculated Values?
Calculated Values allow form designers to write custom Javascript or JSON code to facilitate data calculation between different fields on a form.
Why should I use Calculated Values?
A common requirement for modern web forms is business-based calculations between fields on your form. Whether you're creating order forms, quote request forms, payroll forms, and the like, Form.io equips you to satisfy complex calculation requirements for modern web forms necessary in today's industries.
How do I use Calculated Values?
To apply field calculations, open the component settings and click the Data tab. Scroll down the settings window, click the Calculated Value panel, and add your Javascript code to the code block
Example
In the following example, we are going to set up Javascript calculation between two fields and populate that data into a 'Total' field
Use the value function to start the line of code. Next, add the data variable and reference the Property Name of the fields you wish to calculate.
An instance of
An instance of the object
The data variable is being used here to reference the input data from the 'Enter your annual income' and the value selection from the 'Select your marital status' field. When referencing fields, ensure you are using the of the trigger component inside your Javascript. The Property Name can be found within the API Tab of the component settings.
Simple: The Simple Trigger type utilizes the same UI and configuration methods found in the Conditional tab. Refer to the for more information.
Javascript: Write your own custom conditionals using Javascript code. The Javascript Trigger type utilizes the same UI and configuration methods used for Advanced Conditionals. Refer to the for more information.
JSON Logic: Use JSON Logic as an alternative to Javascript when writing Logic Conditions. Refer to the for more information.
Review the documentation to reference the available Javascript variables.
Review the documentation to reference the available Javascript variables and functions.
