cq-dialog-checkbox-showhide not working for checkbox

[Prashardan]

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>

[AsifChowdhury]

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

[chavad · Accepted solution]

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

[arunpatidar]

do you have acs common installed in AEM?

This feature is from ACS common.

https://adobe-consulting-services.github.io/acs-aem-commons/features/ui-widgets/show-hide-widgets/in... 

[Fanindra_Surat]

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.

[Shiv_Prakash_Patel]

Hi @Prashardan ,

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

Regards

Shiv