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
Value Property	can be name or acronym	name
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	unchecked
Data Path		items[1].sectors
Storage Type	your choice	Autotype
Value Property		sectorname
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 auto populate 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 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 the JSON data can referenced and assigned to the value of this field by one these three statements

Ministry Name: value = data.ministry.name;
Ministry Acronym: value = data.ministry.acronym;
Sector Name: value = data.ministry.sectors[0].sectorname;

Option 4 - Auto populate 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
Storage Type		Autotype
Item Template	clear this field
Refresh Option On		Sector
Clear Value On Refresh Options		checked
Enable Static Search	your choice	unchecked
Custom Values	javascript code	see below

Custom Values JavaScript code

if (data.sector !== "") {
  values = Promise.resolve(
    fetch('https://raw.githubusercontent.com/bcgov/ministry-org-names/main/organization-groups.json')
      .then((response) => response.json())
      .then((json) => {
          const ministries = json.items[1].sectors.filter(sector => sector.sectorname === data.sector)[0].ministries;
          return ministries.map(m => m.name);
      })
    );
}

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.

**TLDR** Explanation of the **Custom Values** JavaScript

```data.sector``` contains the value that was selected for the question named "sector". The value contains a JSON Object that consisting of the sectorname as well as a list of ministries.

Example for the Natural Resource Sector:

    {
      "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"}
          ]
        }
      ]
    }  

The block of JavaScript fetches the full list of all sectors and ministries and uses the data.sector value to filter the list of values that it will display as the options in this Select component.

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