Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

Dynamic Dropdown allowBlank value change

Avatar

Level 2

Hi,

I have 2 dropdowns named Page Type and Brand Details in my dialog. The first dropdown Page Type has certain values and by default the Brand Details dropdown is not mandatory but i need to make it mandatory(allowBlank=false) if the Page Type dropdown value is 'product_listing'. I've a listener to which i've given the below value for the selectionchanged property of Page Type dropdown. But it is not working fine.. Could you please tell me why it is not working?

function(){
if(this.findParentByType('dialog').getField('./pageType').getValue()=='product_listing') {    
        this.findParentByType('dialog').getField('./brandDetail').allowBlank=false;                
    }
}

6 Replies

Avatar

Level 2

Hi  Karthick,

Have you found any solution for the above mentioned problem ?

because I am also facing the similar type of issue.

Avatar

Level 7

Can you share sample package with this issue being reproducible... I think this doesnt work as all the listeners and properties are loaded when you open the dialog.. Changing the property at runtime is not causing re-render and hence the issue. If you can share the code package, would be easier...

Avatar

Level 2

Hi vivek ,

I have Radio Button and Dropdown ,

My requirement is ,If I modify radio button  to "Yes" then the  dropdown should become mandatory,

If I modify radio button  to "No" then  not rquired  dropdown to become mandatory.

Please find the code sample .....

    @DialogField(  name ="",

                    fieldLabel = "Radio Buttons",

                    defaultValue = "on",

                    listeners ={

                              @Listener(name = "selectionchanged",

                                                  value = "function(field,value){" +

                                                                 " return ToggleRequiredFields(field);" +

                                                                 "}")

                                        })

    @Selection(type = "radio",

                       options ={ @Option(text = "Yes", value = "on"), @Option(text = "No", value = "off"),})

    public final String radioButtonField;

@DialogField(  name = "",

                       fieldLabel = "Drop down",

                      listeners = {

                                 @Listener(name = "loadcontent",

                                                   value = "function(field,rec,path){" +

                                                  " return ToggleRequiredFields(field);" +

                                            "}")

                                  })

    @Selection(type = "select"

                    optionsProvider = " value fetching dynamically",

                    dataSource = "data source path")

    public final String selectionField Value;

Java Script code:

function ToggleRequiredFields(field) {

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

    if (dialog.getField('./radioButtonDialog')) {

              var radioButtonValue = dialog.getField('./radioButtonDialog').getValue();

              var dropdownfield = dialog.getField('./dropdownDialog');

              if (radioButtonValue == "on" && dropdownfield.getValue().length == 0) {

                      dropdownfield.allowBlank=false;

              } else {

                   dropdownfield.allowBlank=true;

             }

       }

  }

Insted of dropdown I used text field ,its worked fine for me .But not working for dropdown.Can you please help me in this?

Avatar

Level 2

Vivek I will share you the code package soon .

Avatar

Level 2

Hi  All,

Figured out the solution for the above mentioned issue .

I added ValidateFields method from within the  2 listeners (FIELD_LISTENER_LOAD_CONTENT and FIELD_LISTENER_SELECTION_CHANGED)

function ValidateFields(dialog) {

dialog.on("beforesubmit", function(e) {

   if(<condtion failed>)

    CQ.Ext.Msg.alert(CQ.I18n.getMessage("Error"), CQ.I18n.getMessage("<error message>"));

    return false;

   } else {

    return true;

   }

}, this);

}

Hope this solution solves your problem.

Avatar

Level 2

you can user the extraClientlibs property of cd:dialog. This will load the js file on the dialog open event. and using js/jquery you can write the DOM manipulation logic.

AEM Components for the Touch-Optimized UI