Conditional forms fields - bcgov/common-hosted-form-service GitHub Wiki

This documentation is no longer being updated. For the most up to date information please visit our techdocs

Home > CHEFS Components > Custom Components > Conditional forms fields

---

Examples

Try a working example View example

Download this example file and import it into your design example_conditional_logic_schema.json

---

Conditional forms fields (Tutorial)

You can show or hide components based on choices a user makes while filling out a form. This can be done by using simple fields or advanced JavaScript logic.

On this page

• Simple conditional logic
• Advanced conditional logic

Simple Conditional Logic

Back to top

Select List

Drag and drop a Select List component into the designer and add some values on the Data tab. Ensure one has the value "other".

Multi-line Text

Drag and drop a Multi-line Text component into the designer and go to the Conditional tab to select the following options:

Checkbox

The checkbox component will return true or false as the value.

Save and view the form

When you choose "other" from the select list, the "Other" form field will appear.

Conditional logic does not work in the form designer view, you must save the form and view it.

Advanced Conditional Logic

Back to top

JavaScript

You can place JavaScript on the Conditional tab in advanced form components to show or hide elements. Here is an example of logic to show or hide a component from choices made in 2 other form fields.

show = data.doYouWantToSeeACar && data.areYouSure == "yes";

The "data" variable is the form data object which includes all of the form fields in the design. Access form components by using the Property Name found on each component's API tab.

The checkbox component will return a true or false. There is no need to compare it to a value.

Back to top