Spreadsheet Cascading Drop-Down List

Introduction

Joget Form Builder allows you to dynamically change the options/selections of a select box, radio button, or drop-down list. In this example, multiple form field values from another form will populate a spreadsheet.

How does it work?

Each option in the spreadsheet is a list of data from another form with an option Data Store configuration.

Configure spreadsheet cascading drop-down list

The steps below outline how to configure each form and spreadsheet for cascading drop-down lists.

1. Create multiple simple forms with a Name text field and no advanced options. These forms will provide the option data list for the spreadsheet. In this example, the Climate and Continent forms are created with a single Name text field.
   
   
   
2. Create a Country form with Climate and Continent select boxes.
   
   
   
   
   
3. Use the Form Data Options Data Store on the Continent and Climate select box fields to load data from their respective forms. The Continent field will view values from the Continent List, and the Climate field will view values from the Climate List, both containing only one column Name.
   
4. Create an Address form with select boxes for Continent, Climate, and Country using the same configuration as above.
   
5. Configure the Country select box to load values based on the selected Climate and Continent.
    
6. Enable the use AJAX for Cascade Options? checkbox. The Country field will display values from the Country List under the Name column, grouped by Continent and Climate.
   
7. Ensure the Field ID to control available options is in the same order as the Grouping Column.
8. Click on the Field IDs rather than typing them. You should only be typing the ';' symbol.
   
9. Create a form with a Spreadsheet field and populate it with form option data from the Address form.
10. Define the spreadsheet columns:

• • Field ID: Field ID of the column.
  • Label: Column header title/label.
  • Format Type: Use Dropdown for Continent, Climate, and Country columns.
  • Format: Key in the Form Def ID that contains the equivalent dropdown element (e.g., address).
    

Spreadsheet in app run time

The Country column will show options based on the combination of Climate and Continent.

In the app run time, you can see the Country column has options when the combination is, for example, Asia and Tropical, but none for Asia and Seasonal.


By following these steps, you can efficiently set up cascading drop-down lists in your Joget forms, enhancing the interactivity and functionality of your applications.

Download sample app