Logic & Conditions

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.

Conditional Show and Hide

As of server release 8.1.0, Form.io has released a code-free Conditional Show/Hide UI using simple dropdown fields. This removes the need to write custom JavaScript when the Show/Hide workflow is dependent on multiple fields or values.

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 - 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. When the +Add Condition button is clicked, the following fields are available to configure the condition:

  • 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.

  • 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.

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.

Use Cases

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.

Example Form

Watch Video

Copy Form

Import the Simple Conditional form into your project using the following Embed URL:

https://kiajjsgmjcrqziu.form.io/simpleconditional

Guidance

Use the Simple method when setting up a condition that is dependent on one field.

• 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.

• Additional Documentation and Examples

Advanced Conditions

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
_	An instance of Lodash
utils	An instance of the FormioUtils object
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':

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 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 Values when referencing selection data inside your code

JSON Logic

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

Form Example

Watch Video

Copy Form

Import the Advanced Conditional form into your project using the following Embed URL:

https://kiajjsgmjcrqziu.form.io/advancedconditions

Guidance

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.

• Additional Documentation and Examples
• JavaScript Documentation
• JSON Logic Documentation

Logic

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.

Triggers

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.

Actions

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

Copy Form

Import the Logic form into your project using the following Embed URL:

https://kiajjsgmjcrqziu.form.io/logic

Guidance

Custom Validation

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.

Review the Advanced Conditions documentation to reference the available Javascript variables.

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

Import the Custom Validation form into your project using the following Embed URL:

https://kiajjsgmjcrqziu.form.io/customvalidation

Guidance

-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

Calculated Values

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

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

Import the Calculated Value form into your project using the following Embed URL:

https://kiajjsgmjcrqziu.form.io/customvalidation

Guidance

-Setup a workflow to interpolate data from one field to another

-Merge Strings into a single field

-Setup mathematical calculations between numeric fields