Conditionally enable/disable fields in AEM 6.1 (granite.ui) TouchUI dialogs

Question

Does anyone have any experience with conditionally disabling fields based on value of a previous field in an AEM6.1 TouchUI dialog?

To give some context I have a checkbox in my TouchUI dialog used to enable/disable (hide/show) a Call To Action button within a component. I'd like to disable the CTA buttonText and href fields in the dialog itself where the author has disabled the CTA via the checkbox. Adversely I'd like to enable these fields where the CTA checkbox is checked enabling CTA.

I have investigated /libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide.js but it's not really fit for purpose given that this is specifically designed for hiding or showing fields based on value of dropdown list and my attempts to modify it to allow similar funationality on a checkbox have been less than fruitful. I want to enable/disabled fields rather than hide of show them.

possible duplicate of Conditional show / hide of fields in AEM 6 dialogs — Mateusz Chromiński

Mark Horman Mark Horman · Accepted Answer · 2015-07-30T23:57:41

After a bit of messing around I got this working by adding class="cq-dialog-checkbox-enabledisable" to my sling:resourceType="granite/ui/components/foundation/form/checkbox" and class="cq-dialog-checkbox-enabledisable-target" to the sling:resourceType="granite/ui/components/foundation/form/textarea" that I wanted to disable in my cq:dialog.xml.

I then created my own clientLib that has dependencies on granite.jquery and categories cq.authoring.dialog.

UPDATE: turns out the disabled property can't be set programatically on pathbrowser field types at the top level, so you neeed to disable the child fields contained inside it (js-coral-pathbrowser-input and js-coral-pathbrowser-button) code snippet below updated to reflect this.

  

  /**
 * Extension to the standard checkbox component. It enables/disables  other components based on the
 * selection made in the checkbox.
 *
 * How to use:
 *
 * - add the class cq-dialog-checkbox-enabledisable to the checkbox element
 * - add the class cq-dialog-checkbox-enabledisable-target to each target component that can be enabled/disabled
 */
(function(document, $) {
    "use strict";

    // when dialog gets injected
    $(document).on("foundation-contentloaded", function(e) {
        // if there is already an inital value make sure the according target element becomes visible
        enableDisable($(".cq-dialog-checkbox-enabledisable", e.target));
    });

    $(document).on("change", ".cq-dialog-checkbox-enabledisable", function(e) {
        enableDisable($(this));
    });

    function enableDisable(el){
        el.each(function(i, element) {
            if ($(element).attr("type") === "checkbox"){
                if ($(element).prop('checked')){
                    $('.cq-dialog-checkbox-enabledisable-target').enable();
                } else {
                    $('.cq-dialog-checkbox-enabledisable-target').disable();
                }
            }
        })
    }
    //recurse all pathbrowser children and grandchildren etc
    function iteratePathBrowserDescendants (node, enable) {
        for (var i = 0; i < node.childNodes.length; i++) {
            var child = node.childNodes[i];
            if ((child.className.indexOf('js-coral-pathbrowser-input') > -1 ) || (child.className.indexOf('js-coral-pathbrowser-button') > -1 )) {
                enablePathBrowser(child, enable);
            } else {
                iteratePathBrowserDescendants(child, enable);
            }
        }
    }
    function enablePathBrowser(node, enable) {
        node.disabled = enable;
    }

    //iterate class cq-dialog-checkbox-enabledisable-target's and enable
    $.prototype.enable = function () {
        $.each(this, function (index, el) {
            //special treatment for pathBrowser as it is made up of multiple fields and cannot be disabled at the top level
            if (el.hasAttribute('data-init')) {
                if (el.getAttribute('data-init') == 'pathbrowser'){
                    iteratePathBrowserDescendants(el, false);
                };
            } else {
                el.disabled = false;
            }
        });
    }
    //iterate class cq-dialog-checkbox-enabledisable-target's and disable
    $.prototype.disable = function () {
        $.each(this, function (index, el) {
            //special treatment for pathBrowser as it is made up of multiple fields and cannot be disabled at the top level
            if (el.hasAttribute('data-init')) {
                if (el.getAttribute('data-init') == 'pathbrowser'){
                    iteratePathBrowserDescendants(el, true);
                };
            } else {
                el.disabled = true;
            }
        });
    }
})(document,Granite.$);

Conditionally enable/disable fields in AEM 6.1 (granite.ui) TouchUI dialogs

1 Answers