Selection Dropdown values dynamically.

[Mani_kumar_]

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

[edubey]

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

[Mani_kumar_]

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

[smacdonald2008]

We are working on Touch UI use case too. 

http://scottsdigitalcommunity.blogspot.ca/2016/03/dynamically-updating-aem-touchui-select.html

[edubey]

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.

[Mani_kumar_]

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

[Mani_kumar_]

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

[edubey]

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

[Mani_kumar_ · Accepted solution]

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);
                        });
 }

[edubey]

Great!!...

[divyak62111989]

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​

[vidyab9364493]

Hi Mani,

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

Regards,

Vidya AV