Listeners for multifield in aem classic ui

[maheswariv26797]

Hi,

I have a classic ui dialog which is having two fields.One is dropdown with three values another is multifield.

When i select a value in the dropdown, some particular fields should be shown in the multifield based on the selected dropdown value.

I have written listeners for this and is working fine on change of the dropdown value(used selectionchanged listener event). But on load of the dialog, irrespective of selected dropdown value, all the fields are showing up in the multifield.

I have written loadcontent listener event but no luck.

Can someone please help me on this.

Thanks,

Mahi

[Manjunath_K]

Hi @maheswariv26797 

If you have included listener method call via loadcontent listener as mentioned below, it should work. have you tried debugging this javascript in browser by adding console log/debug point to check whether required data is passed/available when loadcontent lister method is called to get expected behavior.

<listeners
    jcr:primaryType="nt:unstructured"
    loadcontent="function(selection,value){listenerMethod(selection,value);}"
    selectionchanged="function(selection,value){listenerMethod(selection,value);}"/>

[maheswariv26797]

@Manjunath_K  Yes, I have tried debugging it. Its getting hidden while debugging but at the end of the function, all the fields are showing up.

[Manjunath_K]

@maheswariv26797 

Is your listener method looks something as mentioned below?

If "yes", as you mentioned in debug mode its getting hidden as expected & getting reset back to initial state after listerner method execution completes, i suspect there is some js code which is getting executed & resetting it to initial state after your listener method execution completes. so, try to debug & find the code which is resetting this since you are already following correct listener property (loadcontent) for your use case.

If "no", please share some code snippet of listener method & dialog xml

function listenerMethod(selection,value)
{
    var dialog=selection.findParentByType('dialog');
    var title=dialog.find('name','./title')[0]; //some dialog input field with name ./title

    if((value.data.selectOption == 'some_value'){ //some dialog input field with name ./selectOption
        title.disable();
        title.hide();
    }
}

[maheswariv26797]

@Manjunath_K please find the below code snippet which im using. Please suggest if its wrong

Listener: loadcontent event

function(field){
console.log("dialog is loading");
var parent=this.findParentByType('dialog');
var f=parent.getField('./cardvalues').findByType('multifieldpanel');
if(this.getValue()=='first-dropdown-value'){
for(var i=0;i<f.length;i++){
for(var j=0;j<f[i].items.length;j++){
var k=[];
k[j]=f[i].items.items[j];
if(k[j].itemId=='buyNowText' || k[j].itemId=='buyNowCtaLink'){
k[j].hide();
}
else{
k[j].show();
}
}
}
}
}

dialog structure:

Here selection is the dropdown and card-field is the multifield.

Thanks,

Mahi

[Manjunath_K]

@maheswariv26797 

Since its in classic ui i won't be able to validate this in my local. as i told, i suspect some other js code executing & resetting it to initial mode. try to debug that or we have 2 more listener properties "beforerender" & "afterrender", check adding any one of these listner properties whether it solves the issue which you are facing.

<listeners
    jcr:primaryType="nt:unstructured"
    beforerender="function(dialog){}"
    afterrender="function(dialog){}"/>

refer this blog for afterrender listener

http://experience-aem.blogspot.com/2013/09/ 

[Anudeep_Garnepudi · Accepted solution]

Hi @maheswariv26797 

It seems you are using the exact selectionchange code snippet in dialog load as well. That won't work. You should change the code little bit onload.

1. dialog itself is the parameter to loadcontent function, no need to get dialog again
2. get ./cardvalues directly using field 
3. this.value won't work here as this function is executing on context of dialog, it will work for selection dropdown because listener is set to select
4. In place of this.value, get the select dropdown from field/dialog and getValue

function(field) {
    console.log("dialog is loading");
    var parent = this.findParentByType('dialog');  // on dialog load field parameter itself is dialog, no need to get dialog again
    var f = parent.getField('./cardvalues').findByType('multifieldpanel');  // getField directly on field
    if (this.getValue() == 'first-dropdown-value') {  // change this.value, find dropdown and do getValue then compare
        for (var i = 0; i < f.length; i++) {
            for (var j = 0; j < f[i].items.length; j++) {
                var k = [];
                k[j] = f[i].items.items[j];
               if (k[j].itemId == 'buyNowText' || k[j].itemId == 'buyNowCtaLink') {
                   k[j].hide();
              } else {
                  k[j].show();
              }
         }
      }
   }
}

Hope this works.

AG