CODEWITHSUNDEEP
aem
hbtolearn
hbtolearn

Reputation: 319

What are the various ways to implement the auto-populate the drop downs in a touch UI dialog of an AEM component?

The objective of this query is to know:

  1. What are the alternatives available to achieve a scenario where for example there are 3 drop downs in dialog say country, state and city. Upon selection of a country, the items are auto-populated into state's drop down and similarly upon selection of a state by author the items are made available in the city's drop down.
  2. What among these alternatives should be preferred and why? Thanks.

Upvotes: 0

Views: 201

Answers (1)

Ameesh Trikha
Ameesh Trikha

Reputation: 1712

There is no preferred approach towards this, the key factors to consider are -

  1. What is the source of the information? Is information available in one go or multiple calls are required?
  2. How is dropdown filtering achieved?
  3. Is the information available in source hierarchical or independent which would require association logic?

What ever be the case you would need to implement your own logic to enable related behavior of the dropdown. This will be achieved by writing your own listener on each of the dropdowns. Outside the listener logic you will have to implement the enable/disable logic i.e. First dropdown is enabled by default but the subsequent dropdowns are enabled only on the prior dropdown selection.

Case 1: The information is available via related webservice call - In this case each drop down will make a service call and the filtering may happen based on passing the selection item from the previous dropdown (usually the case with country/state/city/zip logic).

Case 2: All information is available as hierarchical JSON or XML, you could implement path based selection logic where in options for the related dropdown is available as subtree of the parent selection.

Case 3: Information is not associative - In my opinion this is the worst scenario as you will have to write down the logic to implement information association and then relate it as Case 2 option.

If you have option of storing information, i would suggest to ingest the information as hierarchical structure in nodes forming an associated tree and then implement dropdown source as path.json (parent dropdown), path/.json as the first related dropdown as so forth.

Upvotes: 1

Related Questions