在AEM 6.1（granite.ui）TouchUI对话框中有条件地启用/禁用字段 [英] Conditionally enable/disable fields in AEM 6.1 (granite.ui) TouchUI dialogs

问题描述

有人在基于AEM6.1 TouchUI对话框中前一个字段的值有条件禁用字段方面有任何经验吗？

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

要提供一些上下文，我有一个复选框在我的TouchUI对话框中，用于启用/禁用（隐藏/显示）组件中的号召性用语按钮。我想在对话框本身中禁用CTA buttonText和href字段，而作者已通过复选框禁用了CTA。相反，我想在选中CTA复选框的情况下启用这些字段以启用CTA。

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.

我研究了/ libs / cq / gui / components / authoring / dialog / dropdownshowhide /clientlibs/dropdownshowhide.js，但由于它是专门为基于下拉列表的值隐藏或显示字段而设计的，而我对其进行修改以允许复选框具有类似功能的尝试并没有取得成功，因此这实际上不是目的。我想启用/禁用字段，而不是隐藏显示它们。

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.

推荐答案

经过一番混乱之后，将class = cq-dialog-checkbox-enabledisable添加到我的sling：resourceType = granite / ui / components / foundation / form / checkbox和class = cq-dialog-checkbox-enabledisable-target添加到我的sling：resourceType我想在cq：dialog.xml中禁用的= granite / ui / components / foundation / form / textarea。

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.

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

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

更新：事实证明，不能在顶层通过pathbrowser字段类型以编程方式设置Disabled属性，因此，您需要禁用其中包含的子字段（js-coral-pathbrowser-input和js-coral-pathbrowser-button）的代码段，以反映这一点。

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

这篇关于在AEM 6.1（granite.ui）TouchUI对话框中有条件地启用/禁用字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！