AEM6.4 - Multifield with Show hide dropdown changing all the items

Avatar

Avatar
Validate 10
Level 3
elizabethp60981
Level 3

Likes

8 likes

Total Posts

42 posts

Correct reply

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

Avatar
Validate 10
Level 3
elizabethp60981
Level 3

Likes

8 likes

Total Posts

42 posts

Correct reply

0 solutions
Top badges earned
Validate 10
Validate 1
Boost 5
Boost 3
Boost 1
View profile
elizabethp60981
Level 3

31-08-2018

Hi,

I have a dialog component the has a multifield and inside of if it has a Show hide dropdown.

It works, but the problem is that when I change the option in one item of the list, it changes on the others as well.

How can I do to change just on the item that I am in??

I was reading this answer with the same problem, but it is not working when I have many selects.

Thank you in advance!!!

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,444 likes

Total Posts

3,327 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,444 likes

Total Posts

3,327 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

02-09-2018

Hi,

The show hide functionality is handle by /libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide/js/dropdownshowhide.js

If you see the code the target elements are selected based on data attribute and which is common for all the targeted elements within multifield item. Thats why on selection of one other also getting changed.

To handle this you can find the index/position of multifield item. If dropdown and targeted element both are within same multifield item then only do show hide for this set of items.

Example code:

dropdownshowhide-multifield.js

This code will only be triggered when you have select field with class or granite:class property with value cq-dialog-dropdown-showhide-multi unlike cq-dialog-dropdown-showhide

Answers (5)

Answers (5)

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,444 likes

Total Posts

3,327 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,444 likes

Total Posts

3,327 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

07-02-2019

Hi,

Could you please let me know -

1. Are you using coral2 or coral3/granite components.

2. Can you see any errors in browser console?

3. What is the behaviour with this script?

Avatar

Avatar
Give Back 10
Level 3
karanmahi
Level 3

Likes

15 likes

Total Posts

73 posts

Correct reply

0 solutions
Top badges earned
Give Back 10
Give Back 5
Give Back 3
Give Back
Ignite 5
View profile

Avatar
Give Back 10
Level 3
karanmahi
Level 3

Likes

15 likes

Total Posts

73 posts

Correct reply

0 solutions
Top badges earned
Give Back 10
Give Back 5
Give Back 3
Give Back
Ignite 5
View profile
karanmahi
Level 3

04-02-2019

Is there any working example of toggling dialog fields based on the dropdown selection in 6.4? I tried the above-mentioned approach by @arun, but it's not working.

@Arun Patidar  Link shared by you above is not working. Do you have the updated link?

Example code:

dropdownshowhide-multifield.js

Avatar

Avatar
Boost 1
Level 1
allanj70826402
Level 1

Like

1 like

Total Posts

1 post

Correct reply

0 solutions
Top badges earned
Boost 1
View profile

Avatar
Boost 1
Level 1
allanj70826402
Level 1

Like

1 like

Total Posts

1 post

Correct reply

0 solutions
Top badges earned
Boost 1
View profile
allanj70826402
Level 1

24-01-2019

In AEM 6.4 am trying to implement this js in dropdown inside multi field but still it's not working.

Any working example can you share

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,444 likes

Total Posts

3,327 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,444 likes

Total Posts

3,327 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

06-10-2018

Hi,

Please check for dialog Creating an Experience Manager Responsive Banner Component

in Above example for point 44 add one more property class or granite:class based on Coral/Granite component

44. Add the following properties to this node.

  • cq-dialog-dropdown-showhide-target (String) - .text-image-hide-show
  • fieldDescription (String) - Select the background style of the banner
  • FieldLabel (String)  - Background Style
  • name (String) - ./bgstyle
  • sling:resourceType (String) - granite/ui/components/foundation/form/select
  • class(String) - cq-dialog-dropdown-showhide-multi

Avatar

Avatar
Validate 1
Level 2
sindhug14537977
Level 2

Likes

3 likes

Total Posts

19 posts

Correct reply

1 solution
Top badges earned
Validate 1
Ignite 1
Give Back 3
Give Back
Boost 3
View profile

Avatar
Validate 1
Level 2
sindhug14537977
Level 2

Likes

3 likes

Total Posts

19 posts

Correct reply

1 solution
Top badges earned
Validate 1
Ignite 1
Give Back 3
Give Back
Boost 3
View profile
sindhug14537977
Level 2

05-10-2018

is there an example dialog that used this js. please let me know if there's any. Thanks You.!