Adaptive form dynamic Drop-down funtionality

Avatar

Subba560-Gfg7y8

04-02-2018

Hi All,

I am New to Adaptive forms, I want to implement cascading drop-down functionality (3 levels ex: country, sate, city)

Lets say the first dropdown is county and second is the states for the selected country.

so how can i get the states based on the selected Country i.e based on the first dropdown how to fetch 2nd dropdown data.

similar 3rd drop-down based on second one


I have implemented it in xdp and it works, I have used xdp reference and developed adaptive form but the functionality doesn't work. adaptive is not reading the xml values(non binded after initialize).

Please guide the steps which I can implement cascading drop-down functionality in adaptive form.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

DarrenBiz

05-02-2018

There are a few ways to approach this, but I will share one that I have used before:

First, I create a hidden text field on the form and initialise that field with a JSON string that contains my Country/State/City objects. This could be fetched from a datasource, pre-populated or just be static when the form initialises.  I then created a javascript object to behave as a dictionary and used the HTML5 localstorage to persist this dictionary, so I could look it up from each of the dropdown lists without re-parsing the JSON every time. AEM Forms has a few libraries available to it to process the JSON string (Underscore.js, jQuery, etc) so you dont need to write all the collection manipulation routines.

Second, I would populate the First dropdown list using the first-level country object names. e.g. on initialise, get the list of names from the localstorage object, sort your list (if required) then assign this.items=[your array of country names].

When the First list is selected, in the Country list event change handler, I look up the dictionary for the Country item that was selected and populate the objects in the second list. Same goes for the third list.  Setting up your objects from the JSON string you parsed is key to this so these lookups are fast. Its not a big dataset so it should be fairly quick.

hope this helps.

Adaptive Forms Class: GuideDropDownList

Underscore.js

http://api.jquery.com/jquery.parsejson/

javascript - Storing Objects in HTML5 localStorage - Stack Overflow

Answers (4)

Answers (4)

Avatar

jhansi_lakshmik

12-07-2019

Hi Mayank Gandhi,

Thanks for the response, my use case  is to achieve 3 drop downs fields that dynamically populates list of countries, states,cities based on the selection of country the second drop down should populate list of states in the  that particular country and on select of particular state the third drop down should populate the list of cities in that particular state,  kindly let me know the ways of achieving this

Thanks in advance