AEM6.4 - Multifield with Show hide dropdown changing all the items | Community
Skip to main content
elizabethp60981
elizabethp60981
Level 3
August 31, 2018
Solved

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

  • August 31, 2018
  • 6 replies
  • 22556 views

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

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by arunpatidar

    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

    6 replies

    arunpatidar
    Community Advisor
    arunpatidarCommunity AdvisorAccepted solution
    Community Advisor
    September 2, 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

    Arun Patidar
      S
      srutisen1
      April 9, 2021
      Thank you!!!
        sindhug14537977
        sindhug14537977
        Level 2
        October 5, 2018

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

          arunpatidar
          Community Advisor
          arunpatidarCommunity Advisor
          Community Advisor
          October 6, 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
          Arun Patidar
            G
            guillermo_mila_vivo
            September 17, 2021

            This link is outdated. It's redirects to this one. 

              arunpatidar
              Community Advisor
              arunpatidarCommunity Advisor
              Community Advisor
              September 17, 2021

              Hi,
              here is the example https://aem4beginner.blogspot.com/touch-ui-hideshow-fields-inside-coral-3

               

              Arun Patidar
                A
                allanj70826402
                January 24, 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

                  K
                  karanmahi
                  Level 4
                  February 5, 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

                    arunpatidar
                    Community Advisor
                    arunpatidarCommunity Advisor
                    Community Advisor
                    February 8, 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?

                    Arun Patidar
                      Terms & ConditionsAccessibility statement

                      Loading footer...