Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.
SOLVED

Best way to implement Country-State Dropdown

Avatar

Former Community Member

What would be the best way to do the following:

1. A drop-down list with COUNTRYies. The list of countries are in json format, retrieved from a web service.

2. Show or pre-fill the STATE dropdown based on Country selection. 

This looks to be a standard requirement but was not able to find a proper solution. 

What we have done as of now if using Sightly, make a call to get the Country list in a json and populate, and based on selection show STATES(for USA) or PROVINCES(for Canada) and doing Show/Hide. But was looking for better alternatives.

<!-- COUNTRY --> <select class="myContactFieldSelect" id="companyCountry" tabindex="22" name="countryID"> <option value="">Please Select</option> <div data-sly-list.country="${jHelper.pJSON.countryList}" data-sly-unwrap> <option value="${jHelper.pJSON.countryList[country].countryID @ context='html'}"> ${jHelper.pJSON.countryList[country].countryLongName @ context='html'} </option> </div> </select> <!-- STATES or PROVINCES --> <select class="myContactFieldSelect" id="companyState" tabindex="20" name="stateLongName" style="display: none;"> <option selected="selected" value="">Please Select</option> <div data-sly-list.state="${jHelper.pJSON.stateListUS}" data-sly-unwrap> <option>${jHelper.pJSON.stateListUS[state].stateLongName @ context='html'}</option> </div> </select> <!-- OR --> <select class="myContactFieldSelect" id="companyProvince" tabindex="21" name="provinceLongName" style="display: none;"> <option selected="selected" value="">Please Select</option> <div data-sly-list.province="${jHelper.pJSON.stateListCA}" data-sly-unwrap> <option>${jHelper.pJSON.stateListCA[province].stateLongName @ context='html'}</option> </div> </select>
1 Accepted Solution

Avatar

Correct answer by
Level 10

Your web service calls needs to be in the backend within an OSGi bundle. Then return the data to the front end and populate a control - such as a dropdown. 

Here is a community article that shows invokgin a web service from an OSGi bundle and returning the data to a front end - where it is displayed:

https://helpx.adobe.com/experience-manager/using/using-jsonwriter-objects-display-cq.html

View solution in original post

5 Replies

Avatar

Level 10

Hi,

One approach I would suggest is you can also fill these drop down via JS call to web service as well, It will be an ajax request. If data you received from web service does changes too frequently you can store these value in browser localstorage.

Call to webservice will be made only 1st time, on subsequent page load, data can retrieved from localstorage. It all depends of frequency of data changes.

But above code seems to definitely call your webservice every time user reloads the page.

Let me know what do you think......

Avatar

Former Community Member

Thanks.

How do we make this call (Fill drop down via JS call to web service.. ajax request) ? Can you help me with a code-example.. 

I think i saw an example here [ https://helpx.adobe.com/aem-forms/6/dynamically-populate-dropdowns.html ] but was not complete.

And yes, our requirement is to load to Country/State everytime.. client sells Products to Consumers in different regions, and the drop downs chnages based on product availability in that region.

Avatar

Correct answer by
Level 10

Your web service calls needs to be in the backend within an OSGi bundle. Then return the data to the front end and populate a control - such as a dropdown. 

Here is a community article that shows invokgin a web service from an OSGi bundle and returning the data to a front end - where it is displayed:

https://helpx.adobe.com/experience-manager/using/using-jsonwriter-objects-display-cq.html

Avatar

Former Community Member

Yes i agree.. using the OSGI/java alidation route would be simple. But our requirement was to do this on the form/client-side. I was looking into Adaptive Forms and the "GuideDropdownList" component. Will udpdate the post if i can solve this using adaptive forms.