Skip to main content
Prashardan
Prashardan
Level 4
Apr 26, 2023 7:41 AM UTC
Solved

cq-dialog-checkbox-showhide not working for checkbox

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.
chavad
chavadAccepted solution
Level 2
Apr 26, 2023 9:01 AM UTC

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

View in thread

5 replies

AsifChowdhury
Community Advisor
AsifChowdhuryCommunity Advisor
Community Advisor
Apr 26, 2023 7:46 AM UTC

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

Translate
    chavad
    chavadAccepted solution
    Level 2
    Apr 26, 2023 9:01 AM UTC

    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

    Translate
      arunpatidar
      Community Advisor
      arunpatidarCommunity Advisor
      Community Advisor
      Apr 26, 2023 11:56 AM UTC

      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 

      Translate
      Arun Patidar
        Fanindra_Surat
        Community Advisor
        Fanindra_SuratCommunity Advisor
        Community Advisor
        Apr 27, 2023 12:06 AM UTC

        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
          Shiv_Prakash_Patel
          Community Advisor
          Shiv_Prakash_PatelCommunity Advisor
          Community Advisor
          Apr 27, 2023 3:07 AM UTC

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

            Loading footer...