Listeners for multifield in aem classic ui | Adobe Higher Education
Skip to main content
M
maheswariv26797
Level 2
October 13, 2020
解決済み

Listeners for multifield in aem classic ui

  • October 13, 2020
  • 2 の返信
  • 3152 ビュー

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

このトピックへの返信は締め切られました。
ベストアンサー Anudeep_Garnepudi

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

2 の返信

Manjunath_K
Manjunath_K
Level 7
October 13, 2020

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

 

M
maheswariv26797作成者
Level 2
October 13, 2020

@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

 

Anudeep_Garnepudi
Community Advisor
Anudeep_GarnepudiCommunity Advisor回答
Community Advisor
October 24, 2020

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

AG
    契約条件Accessibility statement

    Loading footer...