AEM 6.1 (granite.ui) TouchUI 对话框中有条件地 enable/disable 字段

Question

是否有人有过根据 AEM6.1 TouchUI 对话框中先前字段的值有条件地禁用字段的经验？

为了提供一些上下文，我在 TouchUI 对话框中有一个复选框，用于 enable/disable (hide/show) 组件中的号召性用语按钮。我想禁用对话框本身中的 CTA buttonText 和 href 字段，其中作者通过复选框禁用了 CTA。相反，我想启用这些字段，其中选中了 CTA 复选框以启用 CTA。

我已经研究了 /libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide.js 但它并不真正适合目的，因为它是专门为根据下拉列表的值隐藏或显示字段而设计的，我试图修改它以允许类似的功能一个复选框没有成果。我想 enable/disabled 字段而不是隐藏或显示它们。

Answer 1

经过一番折腾后，我通过将 class="cq-dialog-checkbox-enabledisable" 添加到我的 sling:resourceType="granite/ui/components/foundation/form/checkbox" 和 class="cq-dialog-checkbox-enabledisable-target" 到我想在 cq:dialog.xml.

中禁用的 sling:resourceType="granite/ui/components/foundation/form/textarea"

然后我创建了自己的 clientLib，它依赖于 granite.jquery 和类别 cq.authoring.dialog。

更新：事实证明无法在顶层的路径浏览器字段类型上以编程方式设置禁用的属性，因此您需要禁用其中包含的子字段（js-coral-pathbrowser-input和 js-coral-pathbrowser-button) 下面的代码片段已更新以反映这一点。

  

  /**
 * 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.$);

AEM 6.1 (granite.ui) TouchUI 对话框中有条件地 enable/disable 字段

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

adobe

aem