Touch UI dialog hide and show tabs on dropdown selection

Avatar

Avatar

randeepr

Avatar

randeepr

randeepr

23-08-2017

We have 3 tabs in a dialog box.

  1. general (Always enabled)
  2. sports (Enable only when the selection is sports)
  3. movies (Enable only when the selection is movies)

Before configuration, 'sports' and 'movies' tabs are hidden. In the 'general' tab we have a select box with options 'choose sports' and 'choose movies'. On selection corresponding tab should display. We tried using the steps provided in the below given path, but it fails to hide the tabs.

Path on libs : /libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide/js/dropdownshowhide.js

Other reference we tried : https://github.com/aman02deep/aem-6.2/blob/master/tabshideshow.js

Steps follow to reproduce the issue.

  1. Create 3 tabs on touch UI dialog box
  2. Add a drop down selection on first tab
  3. Hide and show 2nd and 3rd tab based on the dropdown selection.

Please check the screenshot.

touchui-dialog.jpg

Replies

Avatar

Avatar

kautuk_sahni

Community Manager

Total Posts

6.0K

Likes

1.1K

Correct Reply

1.1K

Avatar

kautuk_sahni

Community Manager

Total Posts

6.0K

Likes

1.1K

Correct Reply

1.1K
kautuk_sahni
Community Manager

24-08-2017

Did you try creating an issue in same git link?

Reference post:- Show hide dialog fields based on selection in AEM 6.3  (similar question)

~kautuk

Avatar

Avatar

poojac35931336

Avatar

poojac35931336

poojac35931336

15-11-2017

The tabshideshow.js at aem-6.2/tabshideshow.js at master · aman02deep/aem-6.2 · GitHub will work , but you need to change name of some classes in your dialog xml , as the class name mention in comment section is different from what have been used in js file.

For example :

class = "cq-dialog-dropdown-tab-showhide" to be replaced by class = "cq-dialog-tab-showhide"

cq-dialog-dropdown-tab-showhide-target = ".list-option-tab-showhide-target" to be replaced by

cq-dialog-tab-showhide-target = ".list-option-tab-showhide-target"

made these changes in your dialog and it should work