Show/hide fields based on checkbox in multifield | Community
Skip to main content
S
sufyan-ayub
July 10, 2022
Solved

Show/hide fields based on checkbox in multifield

  • July 10, 2022
  • 6 replies
  • 6873 views

Hi,

 

I am trying to show/hide fields based on checkbox toggle inside a multifield. I have been referring to this great article by Theo Pendle: 
https://levelup.gitconnected.com/aem-conditionally-show-or-hide-a-field-based-on-a-checkbox-widget-or-anything-else-6b23b2515810

It works great with individual fields. The problem arises when the fields that needs to be show/hide are placed inside the multifield. It will toggle every item in the multifield when the desired functionality is to hide that specific item in multifield. Has anyone found a workaround to this issue? I have also tried using the ACS Commons library but that too don't work with the multifield.

    Best answer by sufyan-ayub

    After a lot of messing around with the ACS common feature. I got it working finally. So, the problem is that the documentation in the provided link is incomplete about handling the multifield. Fortunately there was some documentation in the original JS located at (/apps/acs-commons/touchui-widgets/showhidedialogfields/source/showhidedialogfieldstabs.js). In this file, there is a mention of multifield as: 

    * - If the fields lie within a multifield

    * - add the extra empty property acs-cq-dialog-dropdown-checkbox-showhide-multifield to the dropdown/select or checkbox element

    After adding this property in granite:data node, I finally got it working. They should update the official documentation as well according to the comments provided in the JS file.

    6 replies

    ManviSharma
    Adobe Employee
    ManviSharmaAdobe Employee
    Adobe Employee
    July 10, 2022

    Hi,

     

    >Could you check if this ACS feature works for you:

    https://adobe-consulting-services.github.io/acs-aem-commons/features/ui-widgets/show-hide-widgets/index.html

     

    >There are various blogs about implementing this online, e.g.:

    https://levelup.gitconnected.com/aem-conditionally-show-or-hide-fields-in-touchui-dialogs-with-coral-3-ie-aem-6-3-bfd48c261012

     

      S
      sufyan-ayubAuthor
      July 11, 2022

      Hi,

      The ACS link you shared is what I was talking about in my original post. It does work but only outside the multifield context. The functionality to show or hide fields based on checkbox toggle (when the checkbox and the fields are placed inside a multifield) doesn't work with the ACS feature as well.
      About the second link you shared, it is from the same author about whom I mentioned in post. Also, it is just for the showing/hiding of fields based on dropdown, whereas, the link I shared is the more generic one which can handle checkbox as well. The problem is that this too doesn't work as expected when the fields are placed inside a multifield.

      S
      sufyan-ayubAuthorAccepted solution
      July 12, 2022

      After a lot of messing around with the ACS common feature. I got it working finally. So, the problem is that the documentation in the provided link is incomplete about handling the multifield. Fortunately there was some documentation in the original JS located at (/apps/acs-commons/touchui-widgets/showhidedialogfields/source/showhidedialogfieldstabs.js). In this file, there is a mention of multifield as: 

      * - If the fields lie within a multifield

      * - add the extra empty property acs-cq-dialog-dropdown-checkbox-showhide-multifield to the dropdown/select or checkbox element

      After adding this property in granite:data node, I finally got it working. They should update the official documentation as well according to the comments provided in the JS file.
        Mohit_KBansal
        Adobe Employee
        Mohit_KBansalAdobe Employee
        Adobe Employee
        July 10, 2022

        Same problem is discussed in this post [1]

         

        [1] https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/hiding-the-fields-in-multifield-based-on-dropdown-selection/td-p/208707

          S
          sufyan-ayubAuthor
          July 11, 2022

          Actually no, the problem discussed in the above mentioned thread is related to the dropdown about which the AEM itself provide some OOTB solution for showing or hiding of fields but my concern is with the checkbox toggle and that too when the fields that needs to be show/hide based on checkbox toggle are placed inside the multifield. So, this is unrelated to my problem.

          Manu_Mathew_
          Community Advisor
          Manu_Mathew_Community Advisor
          Community Advisor
          July 11, 2022

          @sufyan-ayub You can loop the multifield with the length of multifield and use name selector

          $("input[name='./<yourNameElement>']")

          with dynamic item values or use multifield wrapper selector and get the elements one by one and then select the checkboxes using seletors within the element for manupulation.

           

          $coralElementsLength.each(function (i, element) {
          Coral.commons.ready(element, function(panel) {
          var $THIS_PANEL = $(panel).find(CLASSNAMES.GROUP_WRAPPER);
          var $checkboxEle = $THIS_PANEL.find(CLASSNAMES.CHECKBOX_SELECTOR);
          $checkboxEle.on("change", function(){
          //code
          }):
          }
          }

           

            S
            sufyan-ayubAuthor
            July 11, 2022

            I do not have much experience with writing JQuery code myself so I have absolutely no idea what to do with this code or where to place it or how to customize it according to my requirement.

            Jagadeesh_Prakash
            Community Advisor
            Jagadeesh_PrakashCommunity Advisor
            Community Advisor
            July 11, 2022

            @sufyan-ayub 

             

            You can refer to below URL

             

            multifield :

            https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-6-5-show-hide-fields-dropdown-in-multifield/td-p/414115

             

            Nested multifield

            https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/is-there-any-way-in-aem-6-5-nested-multifield-dialog-to-minimize/td-p/370492

             

            Hope this is useful for you

              S
              sufyan-ayubAuthor
              July 11, 2022

              Hi,

              So, the first link you shared is about the showing or hiding of fields based on dropdown about which there are countless examples available on internet but the problem is with the checkbox based toggle of fields that too when they are placed inside the multifield. The link I have shared in my original post solves the problem with the checkbox toggle but when used inside the multifield context, this solution doesn't work as well. The second link is completely unrelated to my question.

              A
              ak_2985
              October 17, 2023

              May i know your dialog. We do have same requirement.after playing around acs-commons JS still not working. 
              Can you post your dialog how you added empty property and data attribute for multi field hide and show field on base of checkbox selection

              Z
              Zendark
              December 3, 2024

              Hi @ak_2985  , did you get it to work? I am facing the same issue if possible please do share the dialog or steps to get it to work.Thanks @sufyan-ayub @ak_2985 

              S
              SyntaxError_07
              March 16, 2025

              Hey @sufyan-ayub , have you find solution for this, if yes could you share the XML of the multifield dialog, i havent found the solution for it yet.

              Terms & ConditionsAccessibility statement

              Loading footer...