Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

cq-dialog-checkbox-showhide not working for checkbox

Avatar

Level 4

Hi Team
I am working on a component where on the dialog based on checkbox selection I want to display next field.

pras78022281_0-1682493444145.png

I have written granite:class and data attribute but something I am missing so it is not hiding when checkbox is selected. 

below is the xml structure. Please correct me if doing anything wrong.
Thanks in advance 

 
<display_image_name
granite:class="cq-dialog-checkbox-showhide"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
fieldDescription="Display Name to an Image"
fieldLabel="Display Image Name"
name="./displayImageName"
text="Display Image Name"
uncheckedValue="false"
value="true">
<granite:data
jcr:primaryType="nt:unstructured"
cq-dialog-checkbox-showhide-target=".togglefield"/>
</display_image_name>
<content
granite:class="togglefield"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<image_name
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
fieldDescription="Image Name Alignment"
fieldLabel="Image Name Alignment"
name="./imageNameAlignment">
<items
jcr:primaryType="nt:unstructured"
sling:hideChildren="[radio,multiDropDown]">
<top
jcr:primaryType="nt:unstructured"
name="./top"
text="Top"
value="top"/>
<bottom
jcr:primaryType="nt:unstructured"
name="./bottom"
text="Bottom"
value="bottom"/>
</items>
</image_name>
</items>
<granite:data
jcr:primaryType="nt:unstructured"
showhidetargetvalue="true"/>
</content>
 
1 Accepted Solution

Avatar

Correct answer by
Level 2

Hey @Prashardan,

I think dialog level js is required to make the hide/show work. You can refer the below tutorial where its explained very clearly -

https://levelup.gitconnected.com/aem-conditionally-show-or-hide-a-field-based-on-a-checkbox-widget-o...

Also update the prop disabled to hidden in toggle.js line 38 as per your requirement

View solution in original post

5 Replies

Avatar

Community Advisor

Hello @Prashardan 

Have you added your checkbox-show-hide js with your component?

If you used checkbox-show-hide as a plugin did you add its clientlib category in your component dialog using "extraClientlibs"?

 

extraClientlibs="[your.checkbox.show.hide.category]"

 

And try the checkbox value like

value="{Boolean}true"

Please check this. 

Thanks

Avatar

Correct answer by
Level 2

Hey @Prashardan,

I think dialog level js is required to make the hide/show work. You can refer the below tutorial where its explained very clearly -

https://levelup.gitconnected.com/aem-conditionally-show-or-hide-a-field-based-on-a-checkbox-widget-o...

Also update the prop disabled to hidden in toggle.js line 38 as per your requirement

Avatar

Community Advisor

Hello @Prashardan  - 

 

Are you using custom JS to hide/show the field? Do you see it loading on the dialog? If yes, try enabling debug and see if you have any errors with your script.

Avatar

Community Advisor

Hi @Prashardan ,

If you are using custom javascript for showhide functionality. please checkout this - https://www.youtube.com/watch?v=gcNa0uqxytg

Regards

Shiv

Shiv Prakash