Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

Dynamic Dropdown allowBlank value change

cprogramkarthic
Level 2
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
dhanu010
Level 2
Level 2

Hi  Karthick,

Have you found any solution for the above mentioned problem ?

because I am also facing the similar type of issue.

viveksachdeva
Level 7
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...

dhanu010
Level 2
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?

dhanu010
Level 2
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.

riteshsrajput
Level 2
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