Cascade Select and Radio FieldsPRO

Cascading select, checkbox and radio fields allow you to create choices that change based upon the value of another field on your form. For example, you could create a vehicle make and model selector using this feature.

In the example below, you can see how the selection of a vehicle make filters the vehicle model options. Likewise selecting a vehicle model filters the vehicle year options.

Demo

Select, checkbox and radio fields are configured using a data grid. Data grids are much like a spreadsheet and allow you to easily manage select options, checkboxes or radios. You can even use data sources to rapid build data grids.

The diagram below illustrates how the example above works for the Make and Model fields.

WS Form - Cascading Select and Radio Fields

Cascading works as follows:

  1. Choose a Filter Value. This is the field on your form that WS Form will use to filter your options by. In the example above we choose the ‘Make’ radio field as the filter value. This will have the value ‘Toyota’, ‘Ford’ or ‘Honda’.
  2. Choose a Filter Column. This is the column you want to filter values by in your data grid. So, if ‘Toyota’ was selected in the ‘Make’ radio field, then this data grid would be filtered to only show the rows where the ‘Make’ column is equal to ‘Toyota’. The values in this field should precisely match the values in your Filter Column.
  3. WS Form automatically renders the select field using the filtered options.

You can also daisy chain cascaded select and radio fields as in the example above.

Enabling Cascade

To enable cascading on a field:

  1. Click the settings icon on a select, checkbox or radio field to open the settings sidebar.
  2. Click the ‘Options’, ‘Checkboxes’ or ‘Radios’ tab to view the data grid for that field.
  3. Check the ‘Cascade’ checkbox.
  4. Select the ‘Filter Column’. This is the column in your data grid you want to filter.
  5. Select the ‘Filter Value’. This is a select or radio field on your form you want to filter by.
  6. For larger datasets using select fields, you may wish to enable the ‘Use AJAX’ option to improve form performance.
  7. Click ‘Save & Close’.