Expand my Community achievements bar.

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

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... 



Arun Patidar

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