Expand my Community achievements bar.

SOLVED

trying to implement country/state dropdown on developing a component

Avatar

Level 5

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 rightCapture2.PNG

 

1 Accepted Solution

Avatar

Correct answer by
Level 5

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 = "";

View solution in original post

7 Replies

Avatar

Employee

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

Avatar

Correct answer by
Level 5

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 = "";

Avatar

Employee

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

i will send you that one soon

 

Avatar

Employee Advisor

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