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>
Solved! Go to Solution.
Views
Replies
Total Likes
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
Views
Replies
Total Likes
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://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
Can you share any working reference component zip.
Views
Replies
Total Likes
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.$);
Views
Replies
Total Likes
Hi @Prashardan
I don't see you've added extraClientlibs property to the dialog xml you've pasted.
extraClientlibs: ["cq.checkbox.authoring"]
Hope this helps
Views
Replies
Total Likes
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]"/>
Views
Replies
Total Likes
<?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>
Views
Replies
Total Likes
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
Views
Replies
Total Likes
It is working now. Thank you so much @PRATHYUSHA_VP
Views
Likes
Replies
Views
Likes
Replies