You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

Joget Form Builder allows you to dynamically change the options/selections of a select box/radio button/radio based on multiple form fields value within the same form.

Tips

Dynamic Cascading Drop-Down List is also supported in List Filters too.

How it works


Figure 1: App Composer of Cascading Drop-Down Application


Figure 2: Address form from the form builder

As shown in figure 2 in the address form, Using Form Data Options Binder, Continent field will view the values from the Continent List that contains only one column "Name", Climate field will view the values from the Climate List that contains only one column "Name", Country field will view the values from the Country List under the Name column grouped by the other 2 columns "Continent ", and "Climate".


Figure 3: Spreadsheet form from the form builder


Figure 4: Spreadsheet Configuration

In figure 4, it is important for 'Country', 'Continent' and 'Climate' formatted as 'address' which contains the dropdown format containing the equivalent data. For more information on Spreadsheet Properties.


Figure 5: Climate List


Figure 6: Continent List


 

Figure 7: Country List


Figure 8: Country Field Properties


Figure 9: Shows the multiple dependency fields of Country Field 

The Field Id to Control Available Options Based on Grouping Field (figure 9)  must be in the same order as the order in Grouping Column (figure 8).


Make sure to click on the Field Ids rather than type them. You should only be typing the ';' symbol.


Figure 10: Shows the saved spreadsheet data


Figure 11: Country field is empty

The country field is empty as there is no Country in Asia where the Climate is Seasonal.


Figure 12: Country field shows values depending on the Continent Field and the Climate Field 


More Examples

Figure 13: Country field shows values depending on the Continent Field and the Climate Field (Europe + Tropical)


Figure 14: Country field shows values depending on the Continent Field and the Climate Field (Europe + Seasonal )


Figure 15: Country field shows values depending on the Continent Field and the Climate Field (North America+ Seasonal )


Figure 16: Country field is empty as there is no Country in North America where the Climate is Tropical.


Demo App

APP_cascadingDropDown_kb_dx8_20240112143206.jwa





  • No labels