Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Selection Dropdown values dynamically.

Avatar

Community Advisor

Hi All,

We have requirement where we need configure the pagepath in dialog and display list of component names in selection dropdown.

attaching screenshot.

Thanks,

Mani Kumar K

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi All,

Got the solution please find below code snippet

function(){ 
var dialog = this.findParentByType('dialog');
var selectBox = dialog.findByType('selection')[0];
        $.getJSON('/libs/dropdown?Path=' + this.value, 
            function(jsonData){
                        selectBox.setOptions(jsonData);
                        });
 }

View solution in original post

11 Replies

Avatar

Level 10

1. Have a simple widget listener on pathfield, which will call a servlet.

2. have a servlet which returns all component used in this page and populate drop down with the data returned via servlet [1]

[1] https://helpx.adobe.com/experience-manager/using/dialog_fields_servlets.html

Avatar

Community Advisor
Hi praveen, Ya i tried that solution but the issue here is how can i add values to the selection xtype from listener

Avatar

Level 10

1. In listener you will make call to your servlet

2. Get the values from servlet and form an array

3. Make use of optionsProvider  property available in selction xtype.

Avatar

Community Advisor

edubey wrote...

1. In listener you will make call to your servlet

2. Get the values from servlet and form an array

3. Make use of optionsProvider  property available in selction xtype.

 

Hi Praveen,

I will try and come back to you

Thanks,

Mani Kumar

Avatar

Community Advisor

edubey wrote...

1. In listener you will make call to your servlet

2. Get the values from servlet and form an array

3. Make use of optionsProvider  property available in selction xtype.

 

Hi Praveen,

I trying it and had this property in this way

Property OptionsProvider:

Value:

function(){ var servletPath = '/libs/dropdown?Path=$PATH';
return CQ.Util.eval(servletPath); }

but how can i add this from a listener.

Thanks,

Mani Kumar K

Avatar

Level 10

Whatever you are doing here 

function(){ var servletPath = '/libs/dropdown?Path=$PATH';
return CQ.Util.eval(servletPath); }

will be done by function called by listener

Add a dialogClose listener on your pathfield. with value a function A(). When ever you will close dialog of pathfield. function A() will get called.

In function A() you will write above code.

make sure in function A(), once you have created the array from servlet data do not return array , rather set that array as a value for optionProvider

Avatar

Correct answer by
Community Advisor

Hi All,

Got the solution please find below code snippet

function(){ 
var dialog = this.findParentByType('dialog');
var selectBox = dialog.findByType('selection')[0];
        $.getJSON('/libs/dropdown?Path=' + this.value, 
            function(jsonData){
                        selectBox.setOptions(jsonData);
                        });
 }

Avatar

Level 2

Hi,

I have a similar question.
I have 2 dropdowns and i need selectionchanged event to populate the values of the 2nd dropdown.

I was fetching both dropdown values from a servlet whose path i am giving in options property. I later tried using the listener to populate the values for the 2nd dropdown. 1st dropdown still uses the options property.

Please refer the link below, the usecase is explained here:

https://forums.adobe.com/message/9688569#9688569

I have also tried with the solution provided in this thread but its not working:

function(){

var dialog = this.findParentByType('dialog');

var selectBox = dialog.findByType('selection')[1];   /*what i understood is that it is the index of the selection widget so i gave 1 which                                                                                      means 2nd selection node i.e city in my case */

        $.getJSON('/bin/dialog/states?name=' + this.value,

            function(jsonData){

                        selectBox.setOptions(jsonData);

                        });

}

Please suggest the changes.

edubey

Manikumar

Avatar

Level 1

Hi Mani,

Same doesn't seem to work for 2 dropdowns, any idea how to make it work for dynamic dropdowns

Regards,

Vidya AV