Adding a functionality to checkbox

[KannaKarthi]

Hello everyone,

I had a checkbox in dialog.xml file and when I check this checkbox I need to hide content in another component and when unchecked the content needs to be displayed.

Can anyone suggest me how can I approach the above functionality.

[TarunKumar · Accepted solution]

Hi @KannaKarthi ,

You can pass the Boolean value of your checkbox checked/unchecked to the sling model and then further use that sling model in another component.

The code will look something like below:

Sightly:

<sly data-sly-use.checkBoxModel="${'com.mycom.....CheckBoxMOdel' @ checkBoxValue= ${properties.<property-name>}}" />


Model Class:

@Model(adaptables = SlingHttpServletRequest.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class CheckBoxMOdel{


@RequestAttribute(name = "checkBoxValue")
private boolean checkBoxValue;


}

[HrishikeshKa]

Hi @KannaKarthi ,

To achieve the functionality of hiding or displaying content in another component based on the state of a checkbox in AEM, you can follow these steps:

1. In your dialog XML file, define a checkbox field using the granite/ui/components/coral/foundation/form/checkbox resource type. For example:

<checkbox
  jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
  name="./hideContent"
  text="Hide Content"
  value="{Boolean}true"/>

In the component's HTL file, add a condition to hide or display the content based on the value of the checkbox. For example:

<sly data-sly-test="${properties.hideContent}">
  <!-- Content to hide when checkbox is checked -->
</sly>
<sly data-sly-test="${!properties.hideContent}">
  <!-- Content to display when checkbox is unchecked -->
</sly>

In the component's JavaScript file, add a listener to the checkbox field to toggle the value of the hideContent property when the checkbox is checked or unchecked. For example:

$(document).on("change", "[name='./hideContent']", function() {
  var isChecked = $(this).prop("checked");
  $(this).closest("form").find("[name='./hideContent']").val(isChecked);
});

1. Save and build your project, and then include the component in your page. When the checkbox is checked, the content in the other component will be hidden, and when it is unchecked, the content will be displayed.

Note: Make sure to adjust the property names and selectors according to your component's structure and requirements.

By following these steps, you can achieve the desired functionality of hiding or displaying content in another component based on the state of a checkbox in AEM.

[Nikhil-Kumar]

@KannaKarthi - You can use the dialog submit listener in which you can get the value or state of the checkbox and in the same script you can hide and show the data which you want to hide/show by using coral ui and DOM manipulation. 

[HrishikeshKa]

Hi @KannaKarthi ,
example code snippet in Java that achieves the same functionality:

CheckBox checkbox = findViewById(R.id.checkbox);
View content = findViewById(R.id.content);

checkbox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if (isChecked) {
content.setVisibility(View.GONE); // hide content
} else {
content.setVisibility(View.VISIBLE); // show content
}
}
});

In this example, R.id.checkbox is the ID of your checkbox and R.id.content is the ID of the component whose content you want to show or hide. When the checkbox is checked, the content view's visibility is set to GONE to hide it, and when the checkbox is unchecked, the content view's visibility is set to VISIBLE to show it.

You can adjust the visibility values to suit your specific use case.

[kautuk_sahni]

@KannaKarthi Did you find the suggestions from users helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!