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

Touch UI dialog hide and show tabs on dropdown selection

Avatar

Avatar
Validate 1
Level 1
randeepr
Level 1

Like

1 like

Total Posts

2 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile

Avatar
Validate 1
Level 1
randeepr
Level 1

Like

1 like

Total Posts

2 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile
randeepr
Level 1

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
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,129 likes

Total Posts

6,140 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,129 likes

Total Posts

6,140 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile
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
Validate 1
Level 3
poojac35931336
Level 3

Likes

20 likes

Total Posts

50 posts

Correct Reply

8 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 10
Boost 1
View profile

Avatar
Validate 1
Level 3
poojac35931336
Level 3

Likes

20 likes

Total Posts

50 posts

Correct Reply

8 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 10
Boost 1
View profile
poojac35931336
Level 3

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