Skip to main content

Posts

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
Recent posts

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.

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