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.
put your suggestions over here
Thanks in advance.
@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
This worked for me and should work in your case. Hope it is helps☺🙂
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!