Joget DX 8 Stable Released
The stable release for Joget DX 8 is now available, with a focus on UX and Governance.
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 field values within the same form.
|
Table of Contents |
---|
Figure 1: App Composer of Cascading Drop-Down Application
Figure 2: Address form from the form builder
Each option is a list of data from another form with an option binder configuration. Below will show the steps of configuring each form.
Create multiple simple forms with a 'Name' text field with no Advance Options configuration to create an option data list.
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 the same configuration as Figure 1 but with an addition of the 'Climate' and 'Continent' select boxes which will be using the Form Data Options Binder on the 'Continent' select box field to load data from the 'Continent' Form.
Figure 2: Configure Form Data Options Binder
As shown in Figure 2, use the same configuration on the 'Climate' select box. Using Form Data Options Binder, the 'Continent' 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", and the Climate field will view the values from the Climate List that contains only one column "Name".
Create 'Address' Form with all the previous forms as a select box with 'Continent', 'Climate', and 'Country' with the same configuration in Figure 2. But with additional configuration for the 'Country' select box.
Figure 3: Configure Country as Data Option Form
The 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: Climate List
Figure 4: Continent List
Figure 5: Country List
Figure 6: Country Field Properties
with the help of the 'use AJAX for Cascade Options?' checkbox.
Figure 4: Figure 7: Shows the multiple dependency fields of Country Field
Warning |
---|
The Field Id ID to Control Available Options Based on Grouping the Grouping Field (figure 74) must be in the same order as the order in the Grouping Column (figure 63). Make sure to click on the Field Ids IDs rather than type them. You should only be typing the ';' symbol. |
Figure 8: Country field is empty
The country field is empty as there is no Country in Asia where the Climate is Seasonal.
Figure 9: Country field shows values depending on the Continent Field and the Climate Field
Figure 10: Country field shows values depending on the Continent Field and the Climate Field (Europe + Tropical)
Figure 11: Country field shows values depending on the Continent Field and the Climate Field (Europe + Seasonal )
Figure 12: Country field shows values depending on the Continent Field and the Climate Field (North America+ Seasonal )
Figure 13: Country field is empty
The 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 the app run time, we can see the 'Country' column has different based on the 'Climate' and 'Continent' column as was set in Figure 5.
Figure 6: Multiple Form Data option testingThe country field is empty as there is no Country in North America where the Climate is Tropical.
View file | ||||
---|---|---|---|---|
|
...