Listeners for multifield in aem classic ui | Community
Skip to main content
M
maheswariv26797
Level 2
October 13, 2020
Solved

Listeners for multifield in aem classic ui

  • October 13, 2020
  • 2 replies
  • 3147 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by 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 replies

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
maheswariv26797Author
Level 2
October 13, 2020

@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.

Anudeep_Garnepudi
Community Advisor
Anudeep_GarnepudiCommunity AdvisorAccepted solution
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

    Terms & ConditionsAccessibility statement

    Loading footer...