Disabling the field based on the selection of a drop down

Avatar

Avatar

sai_santhosht50

Avatar

sai_santhosht50

sai_santhosht50

25-05-2020

Hi guys,

 

I have a custom hero component in which the dialog contains two tabs.

 

The ask here is:

In tab1, there is a dropdown contains v1,v2 &v3 as its values. In tab2 there is drop down field.

use cases: 1) if i select v1 & v2 in tab1, then the drop down field in tab2 should be visible.

                   2) if i select v3 in tab1, then the drop down field in tab2 should be disabled.

                   3) By default v1 will be selected , so the field in other tab should be visible.

 

AEM:- v6.4.5

put your suggestions over here

Thanks in advance.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

Veena_Vikram

MVP

Avatar

Veena_Vikram

MVP

Veena_Vikram
MVP

25-05-2020

@sai_santhosht50 The steps mentioned in the link by @Theo_Pendle mentioned by @Suraj_Kamdi will help you with one option at a time.That means, if you want to show dropdown in Tab 2 when you select val1 , it will work. But for showing  dropdown in Tab 2 , when you select both val1 and val2 , you need to tweek the JS a little bit. I tried to do the same and adding the steps below. I would like you to use meaningful names , the values here are just for demo

 

    1. Follow the steps mentioned by @Theo_Pendle in his blog to the dot.
    2. Now , when you run this, you will see that , your fields are getting hidden for val2 and val3. That's perfectly alright. We will adjust this😉
    3. Below are the steps I did to get it to work for this use-case . Before going to that I will just walk you through the js a bit , to give an understanding on what exactly happens when you set the values mentioned in the blog
      1. Go to /libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide/js/dropdownshowhide.js in your CRXDE and open the JS
      2. drop-down-hide.png if you check this line, you can see that only the element with the "showhidetargetvalue" will be visible and everything else will be hidden via line 63.  So what we should do is to modify this line to make the field visible for one more value. The beauty of data- attributes is that you can give any name and add a data-* attribute to your HTML element. So I will create another data-* attribute element and add to the field.
    4. Go to your component node and add another data-* attribute value as below. This value can be anythingdrop-down-hide1.png

       

    5. Now I copied the dropdownshowhide.js JS to my component to modify it. I created a clientlib and added it as extraclientlib to my component. drop-down-hide2.png

       

      drop-down-hide3.png

       

    6. Now in the JS I added an additional line to make sure the fields with the new data attribute value I added will also be showed when I select the dropdown drop-down-hide4.png

       This worked for me and should work in your case. Hope it is helps☺🙂

Answers (2)

Answers (2)

Avatar

Avatar

Theo_Pendle

MVP

Avatar

Theo_Pendle

MVP

Theo_Pendle
MVP

25-05-2020

Hi @sai_santhosht50,

Well @Suraj_Kamdi already shared my article on using the OOTB dropdown show/hide functionality (yay, I'm famous!) but I also wrote another tutorial you might be interested in: https://levelup.gitconnected.com/aem-conditionally-show-or-hide-a-field-based-on-a-checkbox-widget-o... This one will show you a simple framework for creating much more complex master-slave relationships between any widgets (not just based on drop-downs 😉 )

In any case, I think you'll find what you need in the first tutorial but the second one might come handy in the future. If you have any follow-up questions, don't hesitate!

Avatar

Avatar

Suraj_Kamdi

MVP

Avatar

Suraj_Kamdi

MVP

Suraj_Kamdi
MVP

25-05-2020

@sai_santhosht50 

Go through this blog to customize your cq:dialog

https://levelup.gitconnected.com/aem-conditionally-show-or-hide-fields-in-touchui-dialogs-with-coral...

 

I hope this will help 🙂