I've added two checkboxes in my component as below:
<checkboxone
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
text="check box one"
name="./check1"
value="{Boolean}true"
uncheckedValue="{Boolean}false">
<granite:data
jcr:primaryType="nt:unstructured"
toggle-checkbox_master="true"/>
</checkboxone>
<checkboxtwo
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
text="check box two"
name="./check2"
value="{Boolean}true"
uncheckedValue="{Boolean}false">
<granite:data
jcr:primaryType="nt:unstructured"
toggle-checkbox_slave="false"/>
</checkboxtwo>
For implementing show-hide functionality between master-slave I've added below js to my clientlibs & import it by "extraClientlibs" in xml.
(function (document, $) {
"use strict";
var TOGGLE_ATTRIBUTE_PREFIX = "data-toggle-";
var MASTER_ATTRIBUTE_SUFFIX = "_master";
var SLAVE_ATTRIBUTE_SUFFIX = "_slave";
var DIALOG_CONTENT_SELECTOR = ".cq-dialog-content";
/**
* Build the master and slave attribute names from the toggle name.
* @Param {string} toggleName
*/
function getAttributes(toggleName) {
debugger;
return {
master: TOGGLE_ATTRIBUTE_PREFIX + toggleName + MASTER_ATTRIBUTE_SUFFIX,
slave: TOGGLE_ATTRIBUTE_PREFIX + toggleName + SLAVE_ATTRIBUTE_SUFFIX
}
}
/**
* Builds the master and slave selectors from the toggle name.
* @Param {string} toggleName
*/
function getSelectors(toggleName) {
var attributes = getAttributes(toggleName);
return {
master: "[" + attributes.master + "]",
slave: "[" + attributes.slave + "]"
}
}
var toggle = {
name: "checkbox",
updateFunction: function (master, $slaves) {
var isChecked = master[0].hasAttribute("checked");
$slaves.each(function () {
if (isChecked.toString() !== $(this).attr(getAttributes("checkbox").slave)) {
$(this).addClass("hide");
} else {
$(this).removeClass("hide");
}
})
}
};
var selectors = getSelectors(toggle.name);
// When the dialog is loaded, init all slaves
$(document).on("foundation-contentloaded", function (e) {
// Find the dialog
var $dialog = $(e.target);
if ($dialog && $dialog.length === 1) {
// Find the toggel master
var $master = $dialog.find(selectors.master);
if ($master) {
if ($master.length !== 1) {
console.error($master.length + " masters for toggle <" + toggle + ">");
return;
}
// Update slaves
var $slaves = $dialog.find(selectors.slave);
toggle.updateFunction($master, $slaves);
}
}
});
// When a value is changed, trigger update
$(document).on("change", function (e) {
// Find the master which was updated
var $master = $(e.target);
var $dialog = $master.parents(DIALOG_CONTENT_SELECTOR);
if ($master && $master.length === 1 && $master.is(selectors.master)) {
// Update slaves
var $slaves = $dialog.find(selectors.slave);
toggle.updateFunction($master, $slaves);
}
});
})(document, Granite.$);
Its working fine while I check "check box one" & it makes "check box two" disappeared. But while I check "check box two" , "check box one" never disappeared. Can I apply this functionality(Checking "check box two" will disappear "check box one" & vice versa) here? Or need to write custom js ? Thanks.
Solved! Go to Solution.
Views
Replies
Total Likes
Hello @rosudel
Please refer to the following link, it also points to a repo, where have been able to show-hide fields based on chexkbox
https://www.youtube.com/watch?v=gcNa0uqxytg&ab_channel=AEMandDevopsTutorial
Hello @rosudel
Please refer to the following link, it also points to a repo, where have been able to show-hide fields based on chexkbox
https://www.youtube.com/watch?v=gcNa0uqxytg&ab_channel=AEMandDevopsTutorial
@rosudel Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.
Views
Replies
Total Likes
Views
Likes
Replies
Views
Likes
Replies
Views
Like
Replies