| English | |||||
|---|---|---|---|---|---|
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, In this use case, multiple form field values from another form will populate a spreadsheet.
|
| Table of Contents |
|---|
How it works
Figure 1: App Composer of Cascading Drop-Down Application
Each option in the spreadsheet is a list of data from another form with an option binder configuration. Below will show the steps of configuring each form and spreadsheet.
Configuring spreadsheet cascading drop-down list
Create multiple simple forms with 'Name' text field with no Advance Options configuration to create an option data list for the spreadsheet.
In this example, we will create 'Climate' and 'Continent' forms with the same configuration.
Figure 1: Configuring Form Data Options
Create a 'Country' Form with same configuration as Figure 1, but with an addition of 'Climate' and 'Continent' select box which will be using Form Data Options Binder on the 'Continent' select box field to load data from the 'Continent' Form.
Figure 2: Configure Form Data Options BinderFigure 2: Address form from the form builder
As shown in figure 2 in the address form, , use the same configuration on 'Climate' select box. 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".
Create 'Address' Form with all the previous form as a select box with 'Continent', 'Climate' and 'Country' with same configuration in Figure 2. But with additional configuration for 'Country' select box.
Figure 3: Configure Country as Data Option Form
Country field will view the values from the Country List under the Name column grouped based on the grouping 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
with the help of 'use AJAX for Cascade Options?' checkbox.
Figure 4Figure 9: Shows the multiple dependency fields of Country Field
| Warning |
|---|
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
Create a form with Spreadsheet field and populate with form option data from 'Address' Form. 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.
| Field ID | Column Configuration |
|---|---|
| name |
|
| continent |
|
| climate |
|
| country |
|
Figure 5: Spreadsheet configuration
Spreadsheet in app Run Time
Figure below is the example data of which Country will appear based on the Climate and Continent combination.
Figure 5: Example Form Data option
In app run time we can see 'Country' column have options when the combination is Asia and Tropical and none for Asian and Seasonal.
Figure 5: Spreadsheet Form Data Options testing
Demo App
APP_kb_dx8_spreadsheet_Cascading_DropDown_List.jwaView file