cq-dialog-checkbox-showhide not working for checkbox | Community
Skip to main content
Prashardan
Prashardan
Level 4
April 26, 2023
Solved

cq-dialog-checkbox-showhide not working for checkbox

  • April 26, 2023
  • 5 replies
  • 4097 views

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.
Best answer by chavad

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

5 replies

AsifChowdhury
Community Advisor
AsifChowdhuryCommunity Advisor
Community Advisor
April 26, 2023

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
    chavadAccepted solution
    Level 2
    April 26, 2023

    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

      arunpatidar
      Community Advisor
      arunpatidarCommunity Advisor
      Community Advisor
      April 26, 2023

      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/index.html 

      Arun Patidar
        Fanindra_Surat
        Community Advisor
        Fanindra_SuratCommunity Advisor
        Community Advisor
        April 27, 2023

        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
          Community Advisor
          Shiv_Prakash_PatelCommunity Advisor
          Community Advisor
          April 27, 2023

          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
            Terms & ConditionsAccessibility statement

            Loading footer...