Autopopulating Dropdown Menus - bcgov/common-hosted-form-service GitHub Wiki

This documentation is no longer being updated. For the most up to date information please visit our techdocs

Home > CHEFS Components > Custom Components > Autopopulating Dropdown Menus

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.

Back to top

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

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.

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

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

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.

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

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

Custom Values JavaScript code

if (data.ministry !== "") {
  values = Promise.resolve(
    fetch('https://raw.githubusercontent.com/bcgov/ministry-org-names/main/organization-groups.json')
      .then((response) => response.json())
      .then((json) => {
          return [json.items[0].organizations[5].ministries.filter(min => min.name === data.ministry)[0].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.

"sectors": [
    {
     "sectorname": "Governance Sector"
    },
    {
     "sectorname": "Economy Sector"
     }
   ] 

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