Skip to main content

ACS AEM Commons: Show/Hide dialog fields/tabs with dropdown, checkbox or the combination of both

Since release 3.19.0, ACS AEM Commons provides the functionality to show/hide dialog fields and tabs using dropdown selection or checkbox selection or the combination of both. Moreover, a required field validator is also available which applies validation only when the field is visible.

How to use

  • As the first step, add the ClientLibs category acs-commons.widgets.showhidedialogfields as your project ClientLibs dependency.
  • Add the empty property acs-cq-dialog-dropdown-checkbox-showhide to the dropdown/select or checkbox element
  • Add the data attribute acs-cq-dialog-dropdown-checkbox-showhide-target to the dropdown/select or checkbox element, The value should be the selector, usually a specific class name, to find all possible target elements that can be shown/hidden.
  • Add the target class to each target component that can be shown/hidden
  • Add the class hide to each target component to make them initially hidden
  • Add the attribute acs-dropdownshowhidetargetvalue to the target component, the value should equal the value of the select option that will unhide this element. Multiple values can be provided separated with spaces.
  • Add the attribute acs-checkboxshowhidetargetvalue to the target component, the value should equal to:
    •   true, if the field is to be displayed when Checkbox is selected.
    •   false, if the field is to be displayed when Checkbox is unselected.
  • Add both acs-dropdownshowhidetargetvalue and acs-checkboxshowhidetargetvalue attribute to each target component, which should be unhidden based on combination of dropdown and checkbox value.
  • The acs-dropdownshowhidetargetvalue and/or acs-checkboxshowhidetargetvalue attribute can be added to dialog tab items to show and hide them.
  • (optional) add css class acs-commons-field-required-allow-hidden to provided required field validation, which turns off when the field is hidden

Example

A test component package is provided under the following link which demonstrates the functionality. It can be used on We Retail pages.


Labels:

Comments

  1. HarshadJune 15, 2020 at 12:30 PM

    Hi,
    Im trying this one but it's not working in my system, could you please provide aem package which will include client Lib also.

    Thanks.

    ReplyDelete
  2. NaveedJune 29, 2020 at 11:00 AM

    Hi Harshad,
    Add "extraClientlibs =acs-commons.widgets.showhidedialogfields" property to your Component dialog box to load the client library.
    I hope it helps.
    Thanks

    ReplyDelete
  3. Avinash PerumallaSeptember 8, 2020 at 3:30 AM

    I have tried installing the package which is given in the Drive Link... And, It is now working... I've added this also "extraClientlibs =acs-commons.widgets.showhidedialogfields". But still I am able to see all the fields at once and they're not getting hidden on selection. Is there any other files or Files we have to change? Please help...

    Thanks...

    ReplyDelete
    Replies
    1. Pavan ssbDecember 31, 2021 at 9:10 PM

      hi, did you resolve the issue,
      i am trying on that it is not working.

      Delete

Post a Comment

Popular posts from this blog

AEM Touch UI required field validation that works with show/hide of dialog field

There is a frequent uses case to hide/show certain fields in a component dialog box based on the value selected in the drop down. Sometimes, those fields need to be hidden/shown based on criteria of the checkbox being checked. Adobe AEM 6.3 provides OOTB functionality to show hide fields based on the value selected in the drop drown. The script is located at path: /libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide/js/dropdownshowhide.js The comments in the script provide a nice description on how to use it to show/hide fields based on drop down selected value. /** * Extension to the standard dropdown/select component. It enabled hidding/unhidding of other components based on the * selection made in the dropdown/select. * * How to use: * * - add the class cq-dialog-dropdown-showhide to the dropdown/select element * - add the data attribute cq-dialog-dropdown-showhide-target to the dropdown/select element, value should be the * sele...
4 comments
Read more

AEM 6.3: Disable RTE Plugins and prevent styles from being copy pasted during inline text editing

Recently, I was given a requirement to implement a simple text component. The text component: should allow multline text to be provided. should not provide any options to format the text in anyway e.g. bold, italic, justify etc. should allow copy pasting of content from other sources (e.g. web page, word doc or pdf) excluding the formatting or styles. To fufill the above requirements, following edit config was provided for the text component.
Post a Comment
Read more