Ajax Dynamic Cascade Drop-Downs

Introduction

In Joget, dynamic cascading drop-down lists are a powerful feature used to update select box, radio button, or checkbox options dynamically based on the value of another field. This enables creating forms that respond in real-time, making data entry faster and more intuitive. By implementing AJAX, the dynamic cascading drop-downs become even more efficient, improving performance when dealing with large datasets or multiple field dependencies.

This article will guide you through the setup of dynamic cascading drop-down lists in Joget, the advantages of using AJAX for cascade options, and how to enable these features easily in your forms for single fields.

To see a guide on customizing dynamic cascading drop-down lists for multiple form field values, see Multiple Dynamic Cascading Drop-Down List after going through this guide.

Dynamic cascading drop-down list

Joget Form Builder allows the creation of dynamic cascade drop-down lists that change the options of a select box, radio button, or checkbox based on another form's field value. 

In the example shown below, the Category Select box is based on the type of leave designated in the Type of Leave field:

• When Paid is selected on the Type of Leave.
  
• When Unpaid is selected on the Type of Leave.
  

To configure your form as in the example above, follow the steps below:

1. Configure the Type of leave select box options.
   
2. Now, configure the Category select box options and use the Grouping field to associate them to the Type of leave form element.
   
3. In Advanced Options > Dependency, input the Field ID of the Type select box.
   
4. Apply your changes and preview your form.

5. It is also possible to populate Options through the use of Options Data Store. For example, the form table below stores all categories.
   

6. In the Category properties, go to Load Data From and choose Form Data. Then go to the Configure Form tab and choose the form as shown in the example below.
   

Enable AJAX cascading

Joget supports AJAX loading of cascade options. This helps improve the performance when you have many options and only want a few options related to your controlling field to be loaded and shown.

Dynamic Cascading for Select Box / Radio button / Checkbox

Since Version 3.0.3, Joget has added support for Dynamic Cascading for the Select Box / Radio button / Checkbox. This allows these fields to dynamically load available options based on the other field value.

How it works?

It loads all the available options at once, then shows/hides them when the value of the controlling field is changed. See the Ajax Dynamic Cascading Drop-Down List to understand this feature.

Ajax Cascading Drop-Down List

Since the Version 4.0.0 release, Joget has enhanced this feature to support Ajax loading of cascade options.

Tremendous performance improvement

This feature helps to improve the performance when you have a huge number of options and when you only want a few options shown, which is related to your controlling field being loaded and shown.

Turning on with just a flick of switch

To turn AJAX loading on, you only need one extra step from the Dynamic Cascading Drop-Down List tutorial.

Check the checkbox of "Use AJAX for cascade options?" when you are configuring the Options Data Store.

This property option is currently available in:

• Bean Shell Options Data Store
• Form Data Options
• User Options

Video tutorial

How to Dynamically Change the Options of a Select Box or Radio Button.

Related documentation

• Check Box
  
• Multi Select Box
• Radio
• Select Box