Comment on page
Logic & Conditions
Create intelligent workflows using Form.io's Conditions and Logic system. Show or hide your fields, merge component JSON schema, conditionally set field settings, and more, all based on user interaction on your forms. Conditions and Logic provide more power and flexibility to the form designers. This gives end users a more personalized and structured experience when filling out a form.
The Conditional Show and Hide feature allows the form designer to apply conditional logic to a field. Using conditional Show and Hide, you can control what fields will display based on the user input on other fields.
Conditions are set on a per-field basis. To configure a show/hide condition, open the component field settings you wish to apply the conditions and click the Conditional tab.
There are two different methods to write your conditions, Simple and Advanced.
Example Form
Watch Video
Copy Form
Guidance
Import the Simple Conditional form into your project using the following Embed URL:
https://kiajjsgmjcrqziu.form.io/simpleconditional
Use the Simple method when setting up a condition that is dependent on one field.
- Ensure you are using the Value, not the Label, of the trigger field when setting up your condition.
- Save form space by showing relevant fields based on user input
- Create a cohesive and personalized experience for your form users
- Design a 'Choose your own adventure' form workflow with branching fields
- Save time setting conditionals on multiple fields by including those fields inside a Layout component and applying the condition to the Layout component.
As of server release 8.1.0, Form.io has released a code-free Conditional Show/Hide UI using simple dropdown fields. This update relieves the need to write custom Javascript when the Show/Hide workflow is dependent on multiple fields or values.
How Does It Work?
The new Conditional tab revamps the current setting fields, adding additional functionality and flexibility to the workflow. Let's review each field and what they do before we get into workflow options.
Show or Hide this field: Select whether you would like to Show the field or Hide the field when the conditions are met.
When: Select whether you want to show or hide the field when One or All conditions are met.
Conditions: The Condition section is the workflow that will execute the settings mentioned above. When the +Add Condition button is clicked, the following fields will be available to configure the condition:
- When: Dropdown to Select what component in your form will execute the condition.
- Is: Operator settings that determine what the status of the field value should be before the condition is executed.
- Value: The data entry of the field to execute the condition. When the conditional field has static values, like the Radio or Select components, those options will be available within a dropdown field to select as the Value.
Use multiple Conditions in conjunctions with the When setting to facilitate advanced conditional workflows.
This logic interface is completely code-free and gives the user the ability to create advanced if/then statements for showing or hiding a component based on the interaction or response of 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. We have added two conditions, one for the checkbox and one for the Radio, to trigger the workflow when both conditions are met.
Unlock the power of JavaScript or JSON by writing custom conditional code. Use this option when more complicated or specific conditions are required in the workflow, like when the conditional relies on a sub-function within the Javascript code comparing different values. This provides the user with the freedom and flexibility to write complex conditions as they see fit.
Before writing your Javascript it's important to note the available variables:
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. |
_ | |
utils | |
util | An alias for "utils". |
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. 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':
show = (data.income < 45000) & (data.maritalStatus == 'single' || data.maritalStatus == 'widowed');
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 Property Name of the trigger component inside your Javascript. The Property Name can be found within the API Tab of the component settings.
Use the Property Name when referencing a component inside your code
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, and Select Box components.
Use Values when referencing selection data inside your code
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.
Form Example
Watch Video
Copy Form
Guidance
Import the Advanced Conditional form into your project using the following Embed URL:
Use the Advanced method when setting up a condition based on data input from multiple fields on the form.
- Ensure you are using the fields Property Name and Value of the trigger field when setting up your condition.
- Save form space by showing relevant fields based on user input
- Create a cohesive and personalized experience for your form users
- Design a 'Choose your own adventure' form workflow with branching fields
- Save time setting conditionals on multiple fields by including those fields inside a Layout component and applying the condition to the Layout component.
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 condition 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:
Simple: The Simple Trigger type utilizes the same UI and configuration methods found in the Conditional tab. Refer to the Simple Conditional Documentation 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 Advanced Conditions Documentation for more information.
JSON Logic: Use JSON Logic as an alternative to Javascript when writing Logic Conditions. Refer to the JSON Logic Documentation for more information.
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.
Add multiple actions to a single Logic instance or add multiple Logic instances to your conditional field to facilitate more complex workflows
Example Form
Watch Video
Copy Form
Guidance
Import the Logic form into your project using the following Embed URL:
What are Custom Validations?
Custom Validations allow form designers to write their own custom code to satisfy complex logic validations and rules on a per-field basis within the Validation tab of the component settings.
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, you will need to customize your own set of validation rules in your form to satisfy rules and requirements unique to your project. Form.io allows you to write these custom rules using Javascript or JSON.
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.
valid = (input === data.email) ? true: 'Emails must match';
When referencing another field, use the Property Name of the referenced field in your code. The Property Name is found in the API tab of the component settings.
Example Form
Copy Form
Guidance
Import the Custom Validation form into your project using the following Embed URL:
https://kiajjsgmjcrqziu.form.io/customvalidation
-Use Custom Validation to validate matching fields like email or passwords
-Setup complex password requirements
-Use Validate On options in the Validation settings to determine when the Validation will be triggered
What are Calculated Values?
Calculated Values allows form designers to write custom javascript to facilitate the calculation of data input between 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 and click the Calculated Value panel and add your Javascript code.
Review the Advanced Conditions documentation to reference the available Javascript variables and functions.
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.
value = data.fieldA + data.fieldB
When referencing a field, use the Property Name of the referenced field in your code. The Property Name is found in the API tab of the component settings.
Example Form
Copy Form
Guidance
Import the Calculated Value form into your project using the following Embed URL:
https://kiajjsgmjcrqziu.form.io/customvalidation
-Merge strings of data together into one field
EX Merging First Name and Last Name field into a Full Name field
-Setup a workflow to copy and paste data from one field to another
EX Copying Address fields into Mailing Address fields by ticking a checkbox
Last modified 1mo ago