Expand my Community achievements bar.

SOLVED

Checkbox hide and show is not working

Avatar

Level 4

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>
1 Accepted Solution

Avatar

Correct answer by
Level 7

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

View solution in original post

8 Replies

Avatar

Level 7

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

Avatar

Level 4

Can you share any working reference component zip.

Avatar

Level 4

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.$);


Avatar

Level 7

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

Avatar

Level 4

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]"/>

Avatar

Level 4
<?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>

Avatar

Correct answer by
Level 7

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

Avatar

Level 4

It is working now. Thank you so much @PRATHYUSHA_VP