Simple dependent field example

From pmusers
Jump to: navigation, search

This example Dynaform shows how to implement Dependent Fields in three dropdown boxes which are used to select the country, region and location. This example uses the ProcessMaker database tables ISO_COUNTRY, ISO_SUBDIVISION and ISO_LOCATION, but the same concept works with PM Tables and external databases.


Dynaform: Select Location.json (right click and select Save Link As)
Author: Amos Batto <amos[at]processmaker.com>
Version: 1.0 (2019-05-21)
Tested in: PM 3.3.8 Community in Debian 9.5 with Firefox 60.5


Create the following Dynaform for the user to select the country, region and location in 3 different dropdown boxes:

DependentFieldsInDesigner.png

This Dynaform contains the following fields:

  • Dropdown with the ID and associated variable "selectCountry", which is populated with the following SQL query:
    SELECT IC_UID, IC_NAME FROM ISO_COUNTRY
    
  • Dropdown with the ID and associated variable "selectRegion", which is populated with the following SQL query:
    SELECT IS_UID, IS_NAME FROM ISO_SUBDIVISION
    WHERE IC_UID = @@selectCountry ORDER BY IS_NAME
    
  • Dropdown with the ID and associated variable "selectLocation", which is populated with the following SQL query:
    SELECT IL_UID, IL_NAME FROM ISO_LOCATION
    WHERE IC_UID = @@selectCountry AND IS_UID = @@selectRegion
    
  • An submit button

In order for Dependent Fields to work correctly, the ID and associated variable for the independent field should be the same. Also remember that the field's variable in the SQL query is case-sensitive. If a field doesn't have an associated variable, then dependent fields don't work. Also, hidden fields can NOT be used as independent fields.

When this Dynaform is used in a case, the list of regions in the "selectRegion" dropdown will change depending on the country selected in the "selectCountry" dropdown. Likewise, the list of available options in the "selectLocation" dropdown will be filtered according to the country and region selected in the other dropdown boxes.

DependentFields FillForm.png