Populating dropdown from values stored in nodes as properties

Avatar

Avatar
Validate 1
Level 2
arjitbansal
Level 2

Like

1 like

Total Posts

21 posts

Correct reply

1 solution
Top badges earned
Validate 1
Boost 1
Affirm 1
View profile

Avatar
Validate 1
Level 2
arjitbansal
Level 2

Like

1 like

Total Posts

21 posts

Correct reply

1 solution
Top badges earned
Validate 1
Boost 1
Affirm 1
View profile
arjitbansal
Level 2

06-07-2017

Hi All,

I am populating 2 dropdowns in dialog from a servlet.

Based on the selection of the first dropdown the second one will be populated.

I am fetching the values from a node (nt:unstructured) which is under apps folder (/apps/ststes-info).

Lets say the first dropdown is states and second is the cities for the selected state.

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

Please guide.

Replies

Avatar

Avatar
Give Back 5
Level 2
lasling
Level 2

Likes

9 likes

Total Posts

22 posts

Correct reply

4 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back
Boost 5
Boost 3
View profile

Avatar
Give Back 5
Level 2
lasling
Level 2

Likes

9 likes

Total Posts

22 posts

Correct reply

4 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back
Boost 5
Boost 3
View profile
lasling
Level 2

06-07-2017

You can use this Experiencing Adobe Experience Manager - Day CQ: AEM 6 SP2 - TouchUI Adding Dynamic Select Options as a guide.

I would also highly suggest you move your selection options out of the "apps" folder.  Take a look at the ACS Commons Generic List functionality, if that doesn't work for you, move your nodes under /etc

Avatar

Avatar
Establish
MVP
Veena_Vikram
MVP

Likes

484 likes

Total Posts

1,048 posts

Correct reply

121 solutions
Top badges earned
Establish
Coach
Contributor 2
Seeker
Ignite 5
View profile

Avatar
Establish
MVP
Veena_Vikram
MVP

Likes

484 likes

Total Posts

1,048 posts

Correct reply

121 solutions
Top badges earned
Establish
Coach
Contributor 2
Seeker
Ignite 5
View profile
Veena_Vikram
MVP

06-07-2017

Which version of AEM ? Which UI Classic or Touch ?

Avatar

Avatar
Validate 1
Level 2
arjitbansal
Level 2

Like

1 like

Total Posts

21 posts

Correct reply

1 solution
Top badges earned
Validate 1
Boost 1
Affirm 1
View profile

Avatar
Validate 1
Level 2
arjitbansal
Level 2

Like

1 like

Total Posts

21 posts

Correct reply

1 solution
Top badges earned
Validate 1
Boost 1
Affirm 1
View profile
arjitbansal
Level 2

06-07-2017

I think i was not that clear before.

Let me explain it again.

So, as shown in the image, i have a component by the name  dropdown which has a dialog (this is a classic dialog), where i have 2 selection widgets, both are getting their options from the same servlet (returning data in json format). The functionality should be: If i select a state in the first dropdown, the corresponding cities should get populated in the 2nd dropdown. The servlet code handles the formation of json response for the options property of the cities dropdown if there is a request parameter( having the name of state passed to it). I need a way of getting this done. As this has to happen at the dialog level. Both for classic and touch ui.

retrieving-node-structure.PNGdropdown-dialog-structure.PNG

As seen in the dropdown dialog, the state node has the options property set to the servlet path. i had set the same thing for city as well but i dont know how to dynamically update it.

Avatar

Avatar
Give Back 5
Level 2
user2062153
Level 2

Likes

2 likes

Total Posts

18 posts

Correct reply

2 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back
Boost 1
Affirm 1
View profile

Avatar
Give Back 5
Level 2
user2062153
Level 2

Likes

2 likes

Total Posts

18 posts

Correct reply

2 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back
Boost 1
Affirm 1
View profile
user2062153
Level 2

13-07-2017

Above mentioned use cases is already document, please check  AEM 6.0 Forms Help | Dynamically populating drop-down lists

Avatar

Avatar
Establish
MVP
Veena_Vikram
MVP

Likes

484 likes

Total Posts

1,048 posts

Correct reply

121 solutions
Top badges earned
Establish
Coach
Contributor 2
Seeker
Ignite 5
View profile

Avatar
Establish
MVP
Veena_Vikram
MVP

Likes

484 likes

Total Posts

1,048 posts

Correct reply

121 solutions
Top badges earned
Establish
Coach
Contributor 2
Seeker
Ignite 5
View profile
Veena_Vikram
MVP

13-07-2017

One solution I can think of here is. 

  • Put a listener on the state widget for selectionchanged
  • On Selection Change of State drop-down ; call the servlet with the value from state dropdown as parameter
  • Get the response as JSON and load it to the value field of the next city widget.

This can be achieved by using cq:listeners.  Let me know if this is not something feasible or working for you ? ( Then I will try this and tell you as I cannot commit to try this now because of my tight schedule)

If you already got a better solution, please reply to this forum so that others will get benefited by the same

Thanks

Veena