Checkbox hide and show is not working

[Prashardan]

Hi Team

Checkbox hide and show functionality is not working. Please check my xml and guide me if anything is required.

my requirement is when I select checkbox brandName textfield should be visible. if it is unchecked brandName textfield should be hidden.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0"
          xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
          xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
          jcr:primaryType="nt:unstructured"
          jcr:title="Order Search and List Dialog"
          sling:resourceType="cq/gui/components/authoring/dialog">
    <content
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <orderNumber
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                    fieldDescription="Please input Order Number"
                    fieldLabel="Order Number"
                    name="./orderNumber"
                    required="true"/>
            <changeBrand
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                    name="./changeBrand"
                    deleteHint="{Boolean}true"
                    value="true"
                    uncheckedValue="false"
                    granite:class="cq-dialog-dropdown-showhide"
                    text="Do you want the change the Brand">
                <granite:data
                        jcr:primaryType="nt:unstructured"
                        cq-dialog-dropdown-showhide-target=".checkbox"/>
            </changeBrand>
            <container
                    jcr:primaryType="nt:unstructured"
                    granite:class="hide checkbox"
                    sling:resourceType="granite/ui/components/coral/foundation/container">
                <brandName
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                        fieldDescription="Please input Label for Brand Name"
                        fieldLabel="Brand Name"
                        name="./brandName"/>
            </container>
        </items>
    </content>
</jcr:root>

[PRATHYUSHA_VP]

Hi @Prashardan 

AEM OOTB doesn't provide checkbox hide and show functionality using cq-dialog-checkbox-showhide. 

You are trying to use cq-dialog-dropdown-showhide in checkbox property which will not work. 

Use custom script and add it's clientlib category in your component dialog using extraClientlibs. 

<checkbox
	granite:class="cq-dialog-checkbox-showhide"
	jcr:primaryType="nt:unstructured"
	sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
	name="./checkboxselect"
	text="Checkbox Select"
	value="true">
	<granite:data
		jcr:primaryType="nt:unstructured"
		cq-dialog-checkbox-showhide-target=".checkbox-showhide-target"/>
</checkbox>
<config
	granite:class="hide checkbox-showhide-target"
	jcr:primaryType="nt:unstructured"
	sling:resourceType="granite/ui/components/coral/foundation/container">
	<granite:data
		jcr:primaryType="nt:unstructured"
		showhidetargetvalue="true"/>
	<items jcr:primaryType="nt:unstructured">
		<selectPathBrowser
			jcr:primaryType="nt:unstructured"
			sling:resourceType="granite/ui/components/foundation/form/pathbrowser"
			fieldLabel="Select Path Browser"
			name="./selectPathBrowser"
			required="{Boolean}false"/>
	</items>
</config>

Below are the resources for the same -

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/cq-dialog-checkbox-showhid...

https://adapttoaem.blogspot.com/2021/02/aem-showhide-dialog-tab-based-on.html

Check box hide and show JS script : 

https://github.com/pankajchhatri/AEM/blob/master/Developer%20course/checkbox-showhide.js

Hope this helps

Thanks

[Prashardan]

Can you share any working reference component zip.

[Prashardan]

Still hide and show is not working. Kindly help. the below is my dialog:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0"
          xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
          xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
          jcr:primaryType="nt:unstructured"
          jcr:title="Order Search and List Dialog"
          sling:resourceType="cq/gui/components/authoring/dialog">
    <content
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <changeBrand
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                    name="./changeBrand"
                    deleteHint="{Boolean}true"
                    value="true"
                    uncheckedValue="false"
                    granite:class="cq-dialog-checkbox-showhide"
                    text="Do you want the change the Brand">
                <granite:data
                        jcr:primaryType="nt:unstructured"
                        cq-dialog-checkbox-showhide-target=".checkbox"/>
            </changeBrand>
            <container
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/container">
                <brandName
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                        fieldDescription="Please input Label for Brand Name"
                        fieldLabel="Brand Name"
                        name="./brandName"/>
            </container>
        </items>
    </content>
</jcr:root>

clientlib:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="sling:Folder"
          categories="[cq.authoring.dialog]"/>

js.txt

checkbox-showhide.js

checkbox-showhide.js

(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
        checkboxShowHideHandler($(".cq-dialog-checkbox-showhide", e.target));
    });

    $(document).on("change", ".cq-dialog-checkbox-showhide", function (e) {
        checkboxShowHideHandler($(this));
    });

    function checkboxShowHideHandler(el) {
        el.each(function (i, element) {
            if($(element).is("coral-checkbox")) {
                // handle Coral3 base drop-down
                Coral.commons.ready(element, function (component) {
                    showHide(component, element);
                    component.on("change", function () {
                        showHide(component, element);
                    });
                });
            } else {
                // handle Coral2 based drop-down
                var component = $(element).data("checkbox");
                if (component) {
                    showHide(component, element);
                }
            }
        })
    }

    function showHide(component, element) {
        console.log('showing');
        // get the selector to find the target elements. its stored as data-.. attribute
        var target = $(element).data("cqDialogCheckboxShowhideTarget");
        var $target = $(target);


        if (target) {
            $target.addClass("hide");
            if (component.checked) {
                $target.removeClass("hide");
            }
        }
    }
})(document, Granite.$);

[PRATHYUSHA_VP]

Hi @Prashardan 

I don't see you've added extraClientlibs property to the dialog xml you've pasted.

• Please change the categories to unique name (Example : cq.checkbox.authoring) instead of generic clientlib and provide the same in cq:dialog node
• Load the client library only on the required component dialog by using the extraClientlibs property to the cq:dialog node like below

extraClientlibs: ["cq.checkbox.authoring"]

Hope this helps

[Prashardan]

Hi @PRATHYUSHA_VP 

Tried but no luck. The below is my dialog xml and clientlib xml. Please check and correct. Also do you have any working reference.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="sling:Folder"
          categories="[cq.checkbox.dialog]"/>

[Prashardan]

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0"
          xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
          xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
          jcr:primaryType="nt:unstructured"
          jcr:title="Order Search and List Dialog"
          extraClientlibs="[cq.checkbox.dialog]"
          sling:resourceType="cq/gui/components/authoring/dialog">
    <content
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <changeBrand
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                    name="./changeBrand"
                    deleteHint="{Boolean}true"
                    value="true"
                    uncheckedValue="false"
                    granite:class="cq-dialog-checkbox-showhide"
                    text="Do you want the change the Brand">
                <granite:data
                        jcr:primaryType="nt:unstructured"
                        cq-dialog-checkbox-showhide-target=".checkbox"/>
            </changeBrand>
            <container
                    jcr:primaryType="nt:unstructured"
                    granite:class="hide checkbox"
                    sling:resourceType="granite/ui/components/coral/foundation/container">
                <brandName
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                        fieldDescription="Please input Label for Brand Name"
                        fieldLabel="Brand Name"
                        name="./brandName"/>
            </container>
        </items>
    </content>
</jcr:root>

[PRATHYUSHA_VP · Accepted solution]

Hi, 

The script looks proper make sure it is loading in the editor window. But the dialog structure is not as expected as per the script you've written.

As mentioned in my first thread dialog.xml should be something like below. I've made some modifications please check and try. If it works, please update here

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Order Search and List Dialog"
    sling:resourceType="cq/gui/components/authoring/dialog"
    extraClientlibs="[cq.checkbox.dialog]">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <changeBrand
                granite:class="cq-dialog-checkbox-showhide"
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                deleteHint="{Boolean}true"
                name="./changeBrand"
                text="Do you want the change the Brand"
                uncheckedValue="false"
                value="true">
                <granite:data
                    jcr:primaryType="nt:unstructured"
                    cq-dialog-checkbox-showhide-target=".checkbox"/>
            </changeBrand>
            <container
                granite:class="hide checkbox"
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <brandName
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                        fieldDescription="Please input Label for Brand Name"
                        fieldLabel="Brand Name"
                        name="./brandName"/>
                </items>
            </container>
        </items>
    </content>
</jcr:root>

Hope this helps 

Thanks

[Prashardan]

It is working now. Thank you so much @PRATHYUSHA_VP