Conditionally enable / disable fields in AEM 6.1 (granite.ui) TouchUI dialog
Does anyone have any experience with conditionally disabling fields based on the value of the previous field in the AEM6.1 TouchUI dialog?
To give some context, I have a checkbox in the TouchUI dialog that is used to enable / disable (hide / show) a call to action button in a component. I would like to disable the CTA buttonText and href fields in the dialog itself, where the author disabled the CTA with a checkbox. In contrast, I would like to include these fields where the CTA checkbox is checked, allowing the CTA.
I researched /libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide.js but it doesn't fit the purpose given that it is specifically meant to hide or show fields based on the dropdown value and my attempts to change his, to provide similar functionality to the checkbox, were less fruitful. I want to enable / disable fields, not hide them.
source to share
After a little mess, 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 "for sling: resourceType =" granite / ui / components / foundation / form / textarea "which I wanted to disable in my cq: dialog.xml.
Then I created my own clientLib which has granite dependencies .jquery and cq.authoring.dialog categories.
UPDATE: It turns out that the disabled property cannot be set programmatically on the top level pathbrowser field types, so you can disable the child fields contained within it (js-coral-pathbrowser-input and js-coral-pathbrowser -button) from below the code 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 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 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.$);
source to share