cq-dialog-checkbox-showhide not working for checkbox

5 replies
4099 views
Translate

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

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>

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

chavadAccepted solution

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-or-anything-else-6b23b2515810

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

Shiv_Prakash_Patel

New Participant

Hi @prashardan ,

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

Regards

Shiv

Translate

Shiv Prakash

Fanindra_Surat

New Participant

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.

Translate