Skip to content

Instantly share code, notes, and snippets.

@rjspiker
Last active January 7, 2022 06:07
Show Gist options
  • Save rjspiker/003cf9eac1e853bb109a to your computer and use it in GitHub Desktop.
Save rjspiker/003cf9eac1e853bb109a to your computer and use it in GitHub Desktop.
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.$);
@besimhu
Copy link

besimhu commented Aug 25, 2017

This is exactly what I have been looking for. Glad I did another google search as I didn't find anything couple months ago.

I have one question, where would one place the .js file?

@rjspiker
Copy link
Author

@besimhu

You can add it to a clientlibs with the cq.authoring.dialog category.

@goudaprashanth
Copy link

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.?

@ginu1985
Copy link

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

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