trying to implement country/state dropdown on developing a component | Community
Skip to main content
R
rahul234dabas
New Participant
February 11, 2022
Solved

trying to implement country/state dropdown on developing a component

  • February 11, 2022
  • 5 replies
  • 3602 views

while developing a component I am stuck at making dynamic dropdown based on country

for example : 

           I have one "granite/ui/components/coral/foundation/form/select" from where we can select countries

           in the second dropdown I want the states to be showed according to the selected country on first dropdown

           e.g. if US is selected in first dropdown , I want the second dropdown to have only US states

 

here is the attached screenshot of the design of component.

please guide me how may I proceed to get the approach right

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by MHWinter

I recommend you check this tutorial by True Tech troubleshooting https://www.youtube.com/watch?v=8G7ORv0Sijw

 

I have used a different script that I adapted from one found online,... can't find out where... to populate the State or Provinces for the US Australia, Canada, Brazil, Japan, or leave it open if it's any other country. 

 

In a script object:

form1.#variables[0].StateProvinceDropDownScript - (JavaScript, client)
// This script object controls the interaction between the Country field and State/Province Drop-down lists.

// The array contains the Countries for which a list of State/Province is enforced (AU/BR/CA/JP/US) and the corresponding list of State/Province.

var myStateProvince = new Array(new Array(5), new Array(8), new Array(27), new Array(13), new Array(47), new Array(51)); // Create a two-dimensional array.
// For each country, add a 'new Array(number of Provinces +1)'.

// Define the Countries and the corresponding States/Provinces.
// The array syntax is arrayName[index][index].
// The first index number represents the country,
// the second index number is the actual data value (State Province).

myStateProvince[0][0] = " ";
myStateProvince[0][1] = " ";
myStateProvince[1][0] = "Australia";
myStateProvince[1][1] = "Australian Capital Territory";
myStateProvince[1][2] = "New South Wales";
myStateProvince[1][3] = "Northern Territory";
myStateProvince[1][4] = "Queensland";
myStateProvince[1][5] = "South Australia";
myStateProvince[1][6] = "Tasmania";
myStateProvince[1][7] = "Victoria ";
myStateProvince[1][8] = "Western Australia";
myStateProvince[2][0] = "Brazil";
myStateProvince[2][1] = "Acre";
myStateProvince[2][2] = "Alagoas";
myStateProvince[2][3] = "Amapá";
myStateProvince[2][4] = "Amazonas";
myStateProvince[2][5] = "Bahía";
myStateProvince[2][6] = "Ceará";
myStateProvince[2][7] = "Distrito Federal";
myStateProvince[2][8] = "Espirito Santo";
myStateProvince[2][9] = "Goiás";
myStateProvince[2][10] = "Maranhão";
myStateProvince[2][11] = "Mato Grosso";
myStateProvince[2][12] = "Mato Grosso do Sul";
myStateProvince[2][13] = "Minas Geraís";
myStateProvince[2][14] = "Pará";
myStateProvince[2][15] = "Paraíba";
myStateProvince[2][16] = "Paraná";
myStateProvince[2][17] = "Pernambuco";
myStateProvince[2][18] = "Piauí";
myStateProvince[2][19] = "Rio de Janeiro";
myStateProvince[2][20] = "Rio Grande do Norte";
myStateProvince[2][21] = "Rio Grande do Sul";
myStateProvince[2][22] = "Rondônia";
myStateProvince[2][23] = "Roraima";
myStateProvince[2][24] = "Santa Catarina";
myStateProvince[2][25] = "São Paulo";
myStateProvince[2][26] = "Sergipe";
myStateProvince[2][27] = "Tocantins";
myStateProvince[3][0] = "Canada";
myStateProvince[3][1] = "Alberta";
myStateProvince[3][2] = "British Columbia";
myStateProvince[3][3] = "Manitoba";
myStateProvince[3][4] = "New Brunswick";
myStateProvince[3][5] = "Newfoundland and Labrador";
myStateProvince[3][6] = "Northwest Territories";
myStateProvince[3][7] = "Nova Scotia";
myStateProvince[3][8] = "Nunavut";
myStateProvince[3][9] = "Ontario";
myStateProvince[3][10] = "Prince Edward Island";
myStateProvince[3][11] = "Québec";
myStateProvince[3][12] = "Saskatchewan";
myStateProvince[3][13] = "Yukon";
myStateProvince[4][0] = "Japan";
myStateProvince[4][1] = " Aichi";
myStateProvince[4][2] = " Akita";
myStateProvince[4][3] = " Aomori";
myStateProvince[4][4] = " Chiba";
myStateProvince[4][5] = " Ehime";
myStateProvince[4][6] = " Fukui";
myStateProvince[4][7] = " Fukuoka";
myStateProvince[4][8] = " Fukushima";
myStateProvince[4][9] = " Gifu";
myStateProvince[4][10] = " Gunma";
myStateProvince[4][11] = " Hiroshima";
myStateProvince[4][12] = " Hokkaido";
myStateProvince[4][13] = " Hyōgo";
myStateProvince[4][14] = " Ibaraki";
myStateProvince[4][15] = " Ishikawa";
myStateProvince[4][16] = " Iwate";
myStateProvince[4][17] = " Kagawa";
myStateProvince[4][18] = " Kagoshima";
myStateProvince[4][19] = " Kanagawa";
myStateProvince[4][20] = " Kōchi";
myStateProvince[4][21] = " Kumamoto";
myStateProvince[4][22] = " Kyoto";
myStateProvince[4][23] = " Mie";
myStateProvince[4][24] = " Miyagi";
myStateProvince[4][25] = " Miyazaki";
myStateProvince[4][26] = " Nagano";
myStateProvince[4][27] = " Nagasaki";
myStateProvince[4][28] = " Nara";
myStateProvince[4][29] = " Niigata";
myStateProvince[4][30] = " Ōita";
myStateProvince[4][31] = " Okayama";
myStateProvince[4][32] = " Okinawa";
myStateProvince[4][33] = " Osaka";
myStateProvince[4][34] = " Saga";
myStateProvince[4][35] = " Saitama";
myStateProvince[4][36] = " Shiga";
myStateProvince[4][37] = " Shimane";
myStateProvince[4][38] = " Shizuoka";
myStateProvince[4][39] = " Tochigi";
myStateProvince[4][40] = " Tokushima";
myStateProvince[4][41] = " Tokyo";
myStateProvince[4][42] = " Tottori";
myStateProvince[4][43] = " Toyama";
myStateProvince[4][44] = " Wakayama";
myStateProvince[4][45] = " Yamagata";
myStateProvince[4][46] = " Yamaguchi";
myStateProvince[4][47] = " Yamanashi";
myStateProvince[5][0] = "United States of America";
myStateProvince[5][1] = "Alabama";
myStateProvince[5][2] = "Alaska";
myStateProvince[5][3] = "Arizona";
myStateProvince[5][4] = "Arkansas";
myStateProvince[5][5] = "California";
myStateProvince[5][6] = "Colorado";
myStateProvince[5][7] = "Connecticut";
myStateProvince[5][8] = "Delaware";
myStateProvince[5][9] = "District of Columbia";
myStateProvince[5][10] = "Florida";
myStateProvince[5][11] = "Georgia";
myStateProvince[5][12] = "Hawaii";
myStateProvince[5][13] = "Idaho";
myStateProvince[5][14] = "Illinois";
myStateProvince[5][15] = "Indiana";
myStateProvince[5][16] = "Iowa";
myStateProvince[5][17] = "Kansas";
myStateProvince[5][18] = "Kentucky";
myStateProvince[5][19] = "Louisiana";
myStateProvince[5][20] = "Maine";
myStateProvince[5][21] = "Maryland";
myStateProvince[5][22] = "Massachusetts";
myStateProvince[5][23] = "Michigan";
myStateProvince[5][24] = "Minnesota";
myStateProvince[5][25] = "Mississippi";
myStateProvince[5][26] = "Missouri";
myStateProvince[5][27] = "Montana";
myStateProvince[5][28] = "Nebraska";
myStateProvince[5][29] = "Nevada";
myStateProvince[5][30] = "New Hampshire";
myStateProvince[5][31] = "New Jersey";
myStateProvince[5][32] = "New Mexico";
myStateProvince[5][33] = "New York";
myStateProvince[5][34] = "North Carolina";
myStateProvince[5][35] = "North Dakota";
myStateProvince[5][36] = "Ohio";
myStateProvince[5][37] = "Oklahoma";
myStateProvince[5][38] = "Oregon";
myStateProvince[5][39] = "Pennsylvania";
myStateProvince[5][40] = "Rhode Island";
myStateProvince[5][41] = "South Carolina";
myStateProvince[5][42] = "South Dakota";
myStateProvince[5][43] = "Tennessee";
myStateProvince[5][44] = "Texas";
myStateProvince[5][45] = "Utah";
myStateProvince[5][46] = "Vermont";
myStateProvince[5][47] = "Virginia";
myStateProvince[5][48] = "Washington";
myStateProvince[5][49] = "West Virginia";
myStateProvince[5][50] = "Wisconsin";
myStateProvince[5][51] = "Wyoming";

 


// This function will populate the State/Provinces Drop-down List for the change event.
// This function is called by the change event of the Country dropdown list.
// The first parameter is simply a pointer to the xfa object model.

function changeStateProvince(CountryWithStateString, StateProvinceField)
{
StateProvinceField.access = "open"; // enables to specify/select a state or province only after a Country was selected.
StateProvinceField.clearItems(); // Clear the items of the Drop-down list.
for (var i=0; i < myStateProvince.length; i++) // Look through all the version until we find the one that matches the country selected.
if(myStateProvince[i][0] == CountryWithStateString) // Check to see if they match. Note: we have to use the event.newText in this case because
{ // the change hasn't been committed yet.
for (var j=1; j < myStateProvince[i].length; j++){ // When they match, add the State/Province to the Drop-down List.
StateProvinceField.addItem(myStateProvince[i][j]); }
}
if(CountryWithStateString==0){
StateProvinceField.resolveNode("ui.#choiceList").textEntry = "1"; // this enables typing a custom entry
} else {
StateProvinceField.resolveNode("ui.#choiceList").textEntry = "0"; // this prevents typing a custom entry.
}
}

 

 

 

And then in the first dropdown list object -  on change event

 

// Update the Country/Province dropdown list field when a different Country is selected.
var sCountry = xfa.event.newText;
if (sCountry!= "Australia" & sCountry!= "Brazil" & sCountry!= "Canada" & sCountry!= "Japan" & sCountry!= "United States of America"){
sCountry = "";
}
StateProvinceDropDownScript.changeStateProvince (sCountry, AuditeeState);
AuditeeState.rawValue = "";

5 replies

W
workflowuser
Employee
February 11, 2022

I have form data model that fetches countries/ states from external web site

i will send you that one soon

 

    W
    workflowuser
    Employee
    February 12, 2022

    Here are the assets related to this solution

    Giving you Form Data Model's which fetch Country/Sate/cities info from api.geonames.org

    Adaptive Form which populates the drop down lists

    The Country drop down list is populated when the form is rendered

    The state/province list is populated based on the selection of the country

    Please create an account with https://www.geonames.org/login and use that username in making the FDM calls

    Downloaded these two packages

    Package 1

    Package 2

    Modify the Rule associated with the drop down lists to provide your username with the api.geonames account

    Preview the form

      MHWinter
      MHWinterAccepted solution
      New Participant
      February 11, 2022

      I recommend you check this tutorial by True Tech troubleshooting https://www.youtube.com/watch?v=8G7ORv0Sijw

       

      I have used a different script that I adapted from one found online,... can't find out where... to populate the State or Provinces for the US Australia, Canada, Brazil, Japan, or leave it open if it's any other country. 

       

      In a script object:

      form1.#variables[0].StateProvinceDropDownScript - (JavaScript, client)
      // This script object controls the interaction between the Country field and State/Province Drop-down lists.

      // The array contains the Countries for which a list of State/Province is enforced (AU/BR/CA/JP/US) and the corresponding list of State/Province.

      var myStateProvince = new Array(new Array(5), new Array(8), new Array(27), new Array(13), new Array(47), new Array(51)); // Create a two-dimensional array.
      // For each country, add a 'new Array(number of Provinces +1)'.

      // Define the Countries and the corresponding States/Provinces.
      // The array syntax is arrayName[index][index].
      // The first index number represents the country,
      // the second index number is the actual data value (State Province).

      myStateProvince[0][0] = " ";
      myStateProvince[0][1] = " ";
      myStateProvince[1][0] = "Australia";
      myStateProvince[1][1] = "Australian Capital Territory";
      myStateProvince[1][2] = "New South Wales";
      myStateProvince[1][3] = "Northern Territory";
      myStateProvince[1][4] = "Queensland";
      myStateProvince[1][5] = "South Australia";
      myStateProvince[1][6] = "Tasmania";
      myStateProvince[1][7] = "Victoria ";
      myStateProvince[1][8] = "Western Australia";
      myStateProvince[2][0] = "Brazil";
      myStateProvince[2][1] = "Acre";
      myStateProvince[2][2] = "Alagoas";
      myStateProvince[2][3] = "Amapá";
      myStateProvince[2][4] = "Amazonas";
      myStateProvince[2][5] = "Bahía";
      myStateProvince[2][6] = "Ceará";
      myStateProvince[2][7] = "Distrito Federal";
      myStateProvince[2][8] = "Espirito Santo";
      myStateProvince[2][9] = "Goiás";
      myStateProvince[2][10] = "Maranhão";
      myStateProvince[2][11] = "Mato Grosso";
      myStateProvince[2][12] = "Mato Grosso do Sul";
      myStateProvince[2][13] = "Minas Geraís";
      myStateProvince[2][14] = "Pará";
      myStateProvince[2][15] = "Paraíba";
      myStateProvince[2][16] = "Paraná";
      myStateProvince[2][17] = "Pernambuco";
      myStateProvince[2][18] = "Piauí";
      myStateProvince[2][19] = "Rio de Janeiro";
      myStateProvince[2][20] = "Rio Grande do Norte";
      myStateProvince[2][21] = "Rio Grande do Sul";
      myStateProvince[2][22] = "Rondônia";
      myStateProvince[2][23] = "Roraima";
      myStateProvince[2][24] = "Santa Catarina";
      myStateProvince[2][25] = "São Paulo";
      myStateProvince[2][26] = "Sergipe";
      myStateProvince[2][27] = "Tocantins";
      myStateProvince[3][0] = "Canada";
      myStateProvince[3][1] = "Alberta";
      myStateProvince[3][2] = "British Columbia";
      myStateProvince[3][3] = "Manitoba";
      myStateProvince[3][4] = "New Brunswick";
      myStateProvince[3][5] = "Newfoundland and Labrador";
      myStateProvince[3][6] = "Northwest Territories";
      myStateProvince[3][7] = "Nova Scotia";
      myStateProvince[3][8] = "Nunavut";
      myStateProvince[3][9] = "Ontario";
      myStateProvince[3][10] = "Prince Edward Island";
      myStateProvince[3][11] = "Québec";
      myStateProvince[3][12] = "Saskatchewan";
      myStateProvince[3][13] = "Yukon";
      myStateProvince[4][0] = "Japan";
      myStateProvince[4][1] = " Aichi";
      myStateProvince[4][2] = " Akita";
      myStateProvince[4][3] = " Aomori";
      myStateProvince[4][4] = " Chiba";
      myStateProvince[4][5] = " Ehime";
      myStateProvince[4][6] = " Fukui";
      myStateProvince[4][7] = " Fukuoka";
      myStateProvince[4][8] = " Fukushima";
      myStateProvince[4][9] = " Gifu";
      myStateProvince[4][10] = " Gunma";
      myStateProvince[4][11] = " Hiroshima";
      myStateProvince[4][12] = " Hokkaido";
      myStateProvince[4][13] = " Hyōgo";
      myStateProvince[4][14] = " Ibaraki";
      myStateProvince[4][15] = " Ishikawa";
      myStateProvince[4][16] = " Iwate";
      myStateProvince[4][17] = " Kagawa";
      myStateProvince[4][18] = " Kagoshima";
      myStateProvince[4][19] = " Kanagawa";
      myStateProvince[4][20] = " Kōchi";
      myStateProvince[4][21] = " Kumamoto";
      myStateProvince[4][22] = " Kyoto";
      myStateProvince[4][23] = " Mie";
      myStateProvince[4][24] = " Miyagi";
      myStateProvince[4][25] = " Miyazaki";
      myStateProvince[4][26] = " Nagano";
      myStateProvince[4][27] = " Nagasaki";
      myStateProvince[4][28] = " Nara";
      myStateProvince[4][29] = " Niigata";
      myStateProvince[4][30] = " Ōita";
      myStateProvince[4][31] = " Okayama";
      myStateProvince[4][32] = " Okinawa";
      myStateProvince[4][33] = " Osaka";
      myStateProvince[4][34] = " Saga";
      myStateProvince[4][35] = " Saitama";
      myStateProvince[4][36] = " Shiga";
      myStateProvince[4][37] = " Shimane";
      myStateProvince[4][38] = " Shizuoka";
      myStateProvince[4][39] = " Tochigi";
      myStateProvince[4][40] = " Tokushima";
      myStateProvince[4][41] = " Tokyo";
      myStateProvince[4][42] = " Tottori";
      myStateProvince[4][43] = " Toyama";
      myStateProvince[4][44] = " Wakayama";
      myStateProvince[4][45] = " Yamagata";
      myStateProvince[4][46] = " Yamaguchi";
      myStateProvince[4][47] = " Yamanashi";
      myStateProvince[5][0] = "United States of America";
      myStateProvince[5][1] = "Alabama";
      myStateProvince[5][2] = "Alaska";
      myStateProvince[5][3] = "Arizona";
      myStateProvince[5][4] = "Arkansas";
      myStateProvince[5][5] = "California";
      myStateProvince[5][6] = "Colorado";
      myStateProvince[5][7] = "Connecticut";
      myStateProvince[5][8] = "Delaware";
      myStateProvince[5][9] = "District of Columbia";
      myStateProvince[5][10] = "Florida";
      myStateProvince[5][11] = "Georgia";
      myStateProvince[5][12] = "Hawaii";
      myStateProvince[5][13] = "Idaho";
      myStateProvince[5][14] = "Illinois";
      myStateProvince[5][15] = "Indiana";
      myStateProvince[5][16] = "Iowa";
      myStateProvince[5][17] = "Kansas";
      myStateProvince[5][18] = "Kentucky";
      myStateProvince[5][19] = "Louisiana";
      myStateProvince[5][20] = "Maine";
      myStateProvince[5][21] = "Maryland";
      myStateProvince[5][22] = "Massachusetts";
      myStateProvince[5][23] = "Michigan";
      myStateProvince[5][24] = "Minnesota";
      myStateProvince[5][25] = "Mississippi";
      myStateProvince[5][26] = "Missouri";
      myStateProvince[5][27] = "Montana";
      myStateProvince[5][28] = "Nebraska";
      myStateProvince[5][29] = "Nevada";
      myStateProvince[5][30] = "New Hampshire";
      myStateProvince[5][31] = "New Jersey";
      myStateProvince[5][32] = "New Mexico";
      myStateProvince[5][33] = "New York";
      myStateProvince[5][34] = "North Carolina";
      myStateProvince[5][35] = "North Dakota";
      myStateProvince[5][36] = "Ohio";
      myStateProvince[5][37] = "Oklahoma";
      myStateProvince[5][38] = "Oregon";
      myStateProvince[5][39] = "Pennsylvania";
      myStateProvince[5][40] = "Rhode Island";
      myStateProvince[5][41] = "South Carolina";
      myStateProvince[5][42] = "South Dakota";
      myStateProvince[5][43] = "Tennessee";
      myStateProvince[5][44] = "Texas";
      myStateProvince[5][45] = "Utah";
      myStateProvince[5][46] = "Vermont";
      myStateProvince[5][47] = "Virginia";
      myStateProvince[5][48] = "Washington";
      myStateProvince[5][49] = "West Virginia";
      myStateProvince[5][50] = "Wisconsin";
      myStateProvince[5][51] = "Wyoming";

       


      // This function will populate the State/Provinces Drop-down List for the change event.
      // This function is called by the change event of the Country dropdown list.
      // The first parameter is simply a pointer to the xfa object model.

      function changeStateProvince(CountryWithStateString, StateProvinceField)
      {
      StateProvinceField.access = "open"; // enables to specify/select a state or province only after a Country was selected.
      StateProvinceField.clearItems(); // Clear the items of the Drop-down list.
      for (var i=0; i < myStateProvince.length; i++) // Look through all the version until we find the one that matches the country selected.
      if(myStateProvince[i][0] == CountryWithStateString) // Check to see if they match. Note: we have to use the event.newText in this case because
      { // the change hasn't been committed yet.
      for (var j=1; j < myStateProvince[i].length; j++){ // When they match, add the State/Province to the Drop-down List.
      StateProvinceField.addItem(myStateProvince[i][j]); }
      }
      if(CountryWithStateString==0){
      StateProvinceField.resolveNode("ui.#choiceList").textEntry = "1"; // this enables typing a custom entry
      } else {
      StateProvinceField.resolveNode("ui.#choiceList").textEntry = "0"; // this prevents typing a custom entry.
      }
      }

       

       

       

      And then in the first dropdown list object -  on change event

       

      // Update the Country/Province dropdown list field when a different Country is selected.
      var sCountry = xfa.event.newText;
      if (sCountry!= "Australia" & sCountry!= "Brazil" & sCountry!= "Canada" & sCountry!= "Japan" & sCountry!= "United States of America"){
      sCountry = "";
      }
      StateProvinceDropDownScript.changeStateProvince (sCountry, AuditeeState);
      AuditeeState.rawValue = "";

        W
        workflowuser
        Employee
        February 11, 2022

        i uploaded a demo of my sample

        https://youtu.be/7czI_DJNLXI

        if this is what you are looking for, I can send you the package

          Mayank_Tiwari
          Mayank_Tiwari
          Employee
          February 11, 2022

          You may refer to the following sample for the same:

          https://experienceleague.adobe.com/docs/experience-manager-65/forms/customize-aem-forms/dynamically-populate-dropdowns.html?lang=en

           

            W
            workflowuser
            Employee
            February 11, 2022

            Let me find a sample for you 

              R
              rahul234dabasAuthor
              New Participant
              February 11, 2022

              thank you a thorogh sample would be a great help

                Terms & ConditionsAccessibility statement

                Loading footer...