Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
AEM 6 Touch UI Show/Hide Checkbox Component Extension - Extension to the standard checkbox component. It enables hiding/unhiding of other components based on the selection made in the checkbox.
<enable
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/checkbox"
text="Enable"
id="enable"
value="true"
name="./enable"
class="cq-dialog-checkbox-showhide"
cq-dialog-checkbox-showhide-target=".button-option-enable-showhide-target"/>
<deleteEnable
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/hidden"
name="./enable@Delete"
value="true"/>
<showHideContainer
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container"
class="hidden button-option-enable-showhide-target"
showhidetargetvalue="true">
<items jcr:primaryType="nt:unstructured">
<!-- some components to show/hide -->
</items>
</showHideContainer>
/**
* Extension to the standard checkbox component. It enables showing/hiding of other components based on the
* selection made in the checkbox.
*
* How to use:
*
* - add the class cq-dialog-checkbox-showhide to the checkbox element
* - add the data attribute cq-dialog-checkbox-showhide-target to the checkbox element, value should be the
* selector, usually a specific class name, to find all possible target elements that can be shown/hidden.
* - add the target class to each target component that can be shown/hidden
* - add the class hidden to each target component to make them initially hidden
* - add the attribute showhidetargetvalue to each target component, the value should equal the value of the select
* option that will unhide this element. Leave this value as an empty string to toggle the target component on
* when the checkbox is unchecked.
*/
(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
$(".cq-dialog-checkbox-showhide").each( function() {
showHide($(this));
});
});
$(document).on("change", ".cq-dialog-checkbox-showhide", function(e) {
showHide($(this));
});
function showHide(el){
// get the selector to find the target elements. its stored as data-.. attribute
var target = el.data("cqDialogCheckboxShowhideTarget");
// is checkbox checked?
var checked = el.prop('checked');
// get the selected value
// if checkbox is not checked, we set the value to empty string
var value = checked ? el.val() : '';
// make sure all unselected target elements are hidden.
$(target).not(".hide").addClass("hide");
// unhide the target element that contains the selected value as data-showhidetargetvalue attribute
$(target).filter("[data-showhidetargetvalue='" + value + "']").removeClass("hide");
}
})(document,Granite.$);
@ginu1985
Copy link

ginu1985 commented Jan 12, 2018

It Will not work untill we change the class from "hide" to "hidden" in js .or from "hidden" to "hide" in dialog..
Thanks

@dkdigal
Copy link

dkdigal commented Feb 10, 2018

I tried the above but its not working for me plz let me know do i need to change anywhere in js file

@appsparkler
Copy link

appsparkler commented Feb 25, 2018

Thanks...

There is one more class we need to remove >> hidden

 // unhide the target element that contains the selected value as data-showhidetargetvalue attribute
        $(target).filter("[data-showhidetargetvalue='" + value + "']").removeClass("hide").removeClass('hidden');

Good Luck...

@shruti93sinha
Copy link

shruti93sinha commented Dec 19, 2019

Can we do the same for tabs as well.? I mean sling:resourceType="granite/ui/components/foundation/section". I tried but not working, can you help me on this.?

Can we use the same for tabs? as when i tried the same logic to show-hide tabs based on checkbox selection, it doesn't work.
Can you give a solution for the same.

@MiliColevic
Copy link

MiliColevic commented Oct 11, 2021

While editing the component, even with checkbox selected, I cannot see the textfield. What can I do?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment