Show and Hide textfield/button using Checkbox | Community
Skip to main content
New Participant
August 2, 2022
Solved

Show and Hide textfield/button using Checkbox

  • August 2, 2022
  • 1 reply
  • 562 views

Hi all, 

I have created dialog with some text fields. And I have added a button(CTA) i need to add one checkbox if that checkbox clicked then that button should disappear from page. 

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 Sachin_Arora_

You can add one checkbox in dialog and on selection of it you can show/hide the button in Sightly.

 

Dialog 

"items": {
"jcr:primaryType": "nt:unstructured",
"showbutton": {
"jcr:primaryType": "nt:unstructured",
"name": "./selected",
"text": "Show Button",
"value": "true",
"sling:resourceType": "granite/ui/components/coral/foundation/form/checkbox",
"renderReadOnly": true
}

Sightly

<sly data-sly-test.selected="${properties.selected}">
	<button type="button">Click Me!</button>
</sly>

You can also refer Hide in Navigation checkbox of page in CRXDE : /libs/wcm/foundation/components/basicpage/v1/basicpage/tabs/basic/items/column/items/title/items/hideinnav

 

1 reply

Sachin_Arora_
Sachin_Arora_Accepted solution
New Participant
August 2, 2022

You can add one checkbox in dialog and on selection of it you can show/hide the button in Sightly.

 

Dialog 

"items": {
"jcr:primaryType": "nt:unstructured",
"showbutton": {
"jcr:primaryType": "nt:unstructured",
"name": "./selected",
"text": "Show Button",
"value": "true",
"sling:resourceType": "granite/ui/components/coral/foundation/form/checkbox",
"renderReadOnly": true
}

Sightly

<sly data-sly-test.selected="${properties.selected}">
	<button type="button">Click Me!</button>
</sly>

You can also refer Hide in Navigation checkbox of page in CRXDE : /libs/wcm/foundation/components/basicpage/v1/basicpage/tabs/basic/items/column/items/title/items/hideinnav