Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Show hide field based on checkbox

Avatar

Level 2

Hi, as the title suggests I'm trying to make one of my fields/container hide when checkbox is true/checked & using ACS commons for this purpose.

ssin93_0-1693387121144.png

Even after following each step the show-hide checkbox functionality isn't working for me. I'm attaching the screen shots of my fields here. Please tell me what am I missing or if changes are required.

I want to hide checkbox-container which contains one text field based on classbox (its my check box).
Component tree:

ssin93_3-1693387893338.png

 

check-box properties:

ssin93_4-1693388024307.png

----------

ssin93_6-1693388080624.png

 

container properties:

ssin93_0-1693388213434.png

----

ssin93_1-1693388238735.png

Its most likely there's mistake from my side but I couldn't figure it.
I request for you guidance.

Thanks,
ssin93

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @ssin93 

Can you try  updating the checkbox container granite class property to mycheckbox-showhide-target(remove the ".").

See if it helps

View solution in original post

4 Replies

Avatar

Community Advisor

Hi @ssin93,

The checkbox show/hide functionality does not support boolean values. You might consider to use string values for the checkbox's checked (and unchecked) status. Also, remember to set the value "cq-dialog-checkbox-showhide" for the "granite:class" attribute. 

 

<customClass jcr:primaryType="nt:unstructured"
  granite:class="cq-dialog-checkbox-showhide" <!-- Add -->
  sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
  name="./customClass"
  text="Add Custom Class?"
  value="enable"/> <!-- Update -->

 

Avatar

Level 2

Hi @Mahedi_Sabuj,
Thanks for your prompt reply. I tried the changes which you suggested but no success.
As @sherinregi suggested, it was single (.) causing the issue. After removing it, field was working as expected. But next problem is in multifield. 
When I add these fields in multifield, the single checkbox is affecting all the fields to show/hide. Tried this but didn't worked.
Thanks again

Avatar

Correct answer by
Community Advisor

Hi @ssin93 

Can you try  updating the checkbox container granite class property to mycheckbox-showhide-target(remove the ".").

See if it helps

Avatar

Level 2

Hi @sherinregi ,
Thanks for your prompt reply. I tried the changes suggested by you & it worked.
But next problem is in multifield. 
When I add these fields in multifield, the single checkbox is affecting all the fields to show/hide. Tried this but didn't worked.
Thanks again