Dynamic Dropdown allowBlank value change

Avatar

Avatar

cprogramkarthic

Avatar

cprogramkarthic

cprogramkarthic

20-04-2016

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

Replies

Avatar

Avatar

dhanu010

Avatar

dhanu010

dhanu010

30-08-2017

Hi  Karthick,

Have you found any solution for the above mentioned problem ?

because I am also facing the similar type of issue.

Avatar

Avatar

viveksachdeva

Avatar

viveksachdeva

viveksachdeva

30-08-2017

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

Avatar

dhanu010

Avatar

dhanu010

dhanu010

31-08-2017

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

Avatar

dhanu010

Avatar

dhanu010

dhanu010

31-08-2017

Vivek I will share you the code package soon .

Avatar

Avatar

dhanu010

Avatar

dhanu010

dhanu010

05-09-2017

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

Avatar

riteshsrajput

Avatar

riteshsrajput

riteshsrajput

05-09-2017

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