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

SOLVED

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

elizabethp60981
Level 3
Level 3

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!!!

1 Accepted Solution
Arun_Patidar
Correct answer by
Community Advisor
Community Advisor

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

View solution in original post

15 Replies
Arun_Patidar
Correct answer by
Community Advisor
Community Advisor

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

View solution in original post

nagalaxmithangellapally
Level 1
Level 1
@Arun_Patidar I have tried the above multifield js and changed value at the dialog to the cq-dialog-dropdown-showhide-multi. But I found a problem there, this add an extra "," comma character to the each filed at the node level. could you pls look at it.
Arun_Patidar
Community Advisor
Community Advisor
could you please open a bug at https://github.com/arunpatidar02/aem63app-repo/issues, if you have a sample dialog xml, please share as well. Please mention AEM version as well.
guillermo_mila_vivo
Level 1
Level 1

Hi!

Where I can find an example how to implement this dropdown?

I need a similiar solution like the owner of this post.

Thanks in advance.

sindhug14537977
Level 2
Level 2

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

Arun_Patidar
Community Advisor
Community Advisor

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
allanj70826402
Level 1
Level 1

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

karanmahi
Level 4
Level 4

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

Arun_Patidar
Community Advisor
Community Advisor

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?