Autopopulating Dropdown Menus

Home > CHEFS Components > Custom Components > Autopopulating Dropdown Menus

---

Examples

Try a working example
View example

Download this example file and import it into a new form to try it out
example__autopopulating_dropdown_menus_schema.json
When you are ready to implement it into your existing form you can follow these instructions to recreate it.

(Experimental Feature) Autopopulates the values of select list drop-downs with some advanced settings. For instance, the list of ministry names, or the list of ministry sectors.
Demonstrates how to implement the cascading dropdown menu effect, where the selected value of one dropdown populates the values of another select list.

---

Autopopulate values of the Select component (Tutorial)

Back to top

Option 1 - Autopopulate a "Ministry Name" Select field with the full list of ministries

Using a URL to a raw JSON file as the source for your "select" component dropdown menu values

This example uses JSON data from a BCGov github repo called Ministry Org Names.

1. Drag on a new Select field from the Advanced Fields section
2. Give it a label "Ministry"
3. check the API tab that the Property Value shows as "ministry"
4. On the Data tab use the following configuration for each of the required fields in the table below

Configuration Field	Comments	Value to Enter.
Data Source Type		URL
Data Source URL		https://raw.githubusercontent.com/bcgov/ministry-org-names/main/organization-groups.json
Lazy Load Data	your choice	checked
Data Path		items[0].organizations[5].ministries
Storage Type	your choice	Autotype
Item Template		<span>{{ item.name }}</span>
Enable Static Search	your choice	checked

For all other values use the defaults. If done correctly, the preview window will now show the JSON data in the select list drop-down.

Option 2 - Autopopulate a "Sector Name" Select field with the full list of sectors

Using a URL to a raw JSON file as the source for your "select" component dropdown menu values

This example uses JSON data from a BCGov github repo called Ministry Org Names.

1. Drag on a new Select field from the Advanced Fields section
2. Give it a label "Sector"
3. check the API tab that the Property Value shows as "sector"
4. On the Data tab use the following configuration for each of the required fields in the table below

Configuration Field	Comments	Value to Enter.
Data Source Type		URL
Data Source URL		https://raw.githubusercontent.com/bcgov/ministry-org-names/main/organization-groups.json
Lazy Load Data	your choice	checked
Data Path		items[1].sectors
Storage Type	your choice	Autotype
Item Template		<span>{{ item.sectorname }}</span>
Enable Static Search	your choice	checked

Option 3 - Autopopulate a "Primary Sector" Text Field component based on the selected Ministry name

Uses the selected value (a JSON object) of Option 1 as the source for your "select" component dropdown menu values

1. Drag on a new Select field from the Advanced Fields section
2. Give it a label "Primary Sector"
3. On the Data tab use the following configuration for each of the required fields in the table below

Configuration Field	Comments	Value to Enter or Select
Redraw On		Ministry
Clear Value When Hidden		checked
Calculated Value > JavaScript		value = data.ministry.sectors[0].sectorname;

For all other values use the defaults.
If done correctly, selecting a value for Sector will autopopulate the values of this select list drop-down.
NOTE THIS FEATURE MUST BE TESTED BY SAVING THE FORM AND LAUNCHING A PREVIEW

TLDR (explaining the Javascript code) Ministry is the property value from the API tab of the field being referenced. data.ministry contains a JSON object with the following

• ministry name
• ministry acronym
• a list of sectors that the ministry is part of for example:

           {
              "name": "Finance",
              "acronym": "FIN",
              "sectors": [
                {
                  "sectorname": "Governance Sector"
                },
                {
                  "sectorname": "Economy Sector"                  
                }
              ]
            }

items in this list can referenced and assigned to the value of this field by one these three statements

// three options:  
// value = data.ministry.name;
// value = data.ministry.acronym;
// value = data.ministry.sectors[0].sectorname; shows the first sector in the list  
// value = data.ministry.sectors[1].sectorname; shows the second sector in the list  

value = data.ministry.sectors[0].sectorname;  

Option 4 - Autopopulate the values of a "Ministry" Select component based on the selected Sector name

Uses the selected value (a JSON object) of Option 2 as the source for your "Text Field" component value

1. Drag on a new Text Field from the Advanced Fields section
2. Give it a label "Sector Ministry"
3. For the Placeholder, type To begin, first select a Sector
4. On the Data tab use the following configuration for each of the required fields in the table below

Configuration Field	Comments	Value to Enter or Select
Data Source Type		Custom
Custom Values		values = data.sector.ministries;
Item Template		<span>{{ item.name }}</span>
Refresh Option On		Sector
Clear Value On Refresh Options		checked
Enable Static Search	your choice	unchecked

For all other values use the defaults.
If done correctly, selecting a value for Sector will autopopulate the values of this select list drop-down.
NOTE THIS FEATURE MUST BE TESTED BY SAVING THE FORM AND LAUNCHING A PREVIEW

TLDR Explanation of the Custom Value JavaScript and Item Template
data.sector contains the value that was selected for the question named "sector".
The value is actually a JSON Object that contain the sectorname as well as a list of ministries

    {
      "sectors": [
        {
          "sectorname": "Natural Resource Sector",
          "ministries": [
            {"name": "Agriculture and Food", "acronym": "AF"},
            {"name": "Energy, Mines and Low Carbon Innovation", "acronym": "EMLI"},
            {"name": "Environment and Climate Change Strategy", "acronym": "ENV"},
            {"name": "Forests", "acronym": "FOR"},
            {"name": "Indigenous Relations & Reconciliation", "acronym": "IRR"},
            {"name": "Water, Land and Resource Stewardship", "acronym": "WLRS"}
          ]
        }
      ]
    }  

In the Item Template settings field we specific which attribute of the list of "items" we want to show up in the select list
we have specified item.name but if we had entered item.acronym then

Conditional logic

Show and hide form fields with conditional logic. In the provided example for this page we used a Simple Conditional for the "Secondary Sector" field which hides itself when "Primary Sector" has an empty value. To express an empty value or a field that has nothing entered, just leave the "Has the value:" field blank.

Back to top