Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Change dropdown values based on another dropdown

Avatar

Level 2

Hi,

I am trying to create a component which has the same implementation like Country, State, City. ie: When Country is selected from Dropdown1, only States related to that Country should be populated on the dropdown2 and similarly for City dropdown.

My project is currently in Classic UI (We are in the process of migrating to Touch UI). But want to implement this functionality in Classic UI. Any help is appreciated.

Thanks

1 Accepted Solution

Avatar

Correct answer by
Employee

I suggest the following approach

  1. Create a Generic List [1] named "country" for countries <Australia:au, India:in ...>
  2. Create state generic lists, one for each country, named (au-state / in-state), and add states in it.
  3. Create Cities generic lists, one for each state-country combination (in-hp-cities, in-rj-cities, in-up-cities)

Now in your dialog's Country dropdown, set the option value as Country generic list

<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Widget"
    fieldLabel="Target"
    name="./target"
    options="/etc/acs-commons/lists/countries/_jcr_content.list.json"
    type="select"
    xtype="selection"/>

Add a dropdown event handler [2] on the country dropdown to set the option value of the state dropdown and the same for the city dropdown.

This approach will give the capability of content editors to manage the country-state-city list.

[1] https://adobe-consulting-services.github.io/acs-aem-commons/features/generic-lists/index.html

[2] https://aemcorner.com/add-listeners-to-widgets-in-cq5/

View solution in original post

3 Replies

Avatar

Level 4

Hi

 

As you are working in Classic UI - to perform this use case, you need to write a custom xtype. In the code of the custom xtype, you can invoke the servlet. 

 

Details here on how to write a custom xtype that shows how to populate a 2nd field based on the 1st selection (in your use case, populate the 2nd with the values returned from the servlet):

 

Scott's Digital Community: Dynamically updating AEM custom xtype fields

 

Ref :https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/dynamically-populate-the-v...

 

Hope this helps....

 

Thanks

 

 

Avatar

Level 2

Hi,
Thanks for the reply. The article doesn't seems to be helping. Do you know whether listeners can be used here?

Thanks,

Avatar

Correct answer by
Employee

I suggest the following approach

  1. Create a Generic List [1] named "country" for countries <Australia:au, India:in ...>
  2. Create state generic lists, one for each country, named (au-state / in-state), and add states in it.
  3. Create Cities generic lists, one for each state-country combination (in-hp-cities, in-rj-cities, in-up-cities)

Now in your dialog's Country dropdown, set the option value as Country generic list

<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Widget"
    fieldLabel="Target"
    name="./target"
    options="/etc/acs-commons/lists/countries/_jcr_content.list.json"
    type="select"
    xtype="selection"/>

Add a dropdown event handler [2] on the country dropdown to set the option value of the state dropdown and the same for the city dropdown.

This approach will give the capability of content editors to manage the country-state-city list.

[1] https://adobe-consulting-services.github.io/acs-aem-commons/features/generic-lists/index.html

[2] https://aemcorner.com/add-listeners-to-widgets-in-cq5/