Adding a functionality to checkbox | Community
Skip to main content
K
KannaKarthi
Level 2
June 6, 2024
Solved

Adding a functionality to checkbox

  • June 6, 2024
  • 5 replies
  • 1383 views

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.

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 TarunKumar

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; }

5 replies

TarunKumar
Community Advisor
TarunKumarCommunity AdvisorAccepted solution
Community Advisor
June 6, 2024

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; }
    HrishikeshKagne
    Community Advisor
    HrishikeshKagneCommunity Advisor
    Community Advisor
    June 6, 2024

    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.





    Hrishikesh Kagane
    Nikhil-Kumar
    Community Advisor
    Nikhil-KumarCommunity Advisor
    Community Advisor
    June 6, 2024

    @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. 

      HrishikeshKagne
      Community Advisor
      HrishikeshKagneCommunity Advisor
      Community Advisor
      June 10, 2024

      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.

      Hrishikesh Kagane
        kautuk_sahni
        Community Manager
        kautuk_sahniCommunity Manager
        Community Manager
        June 10, 2024

        @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!

        Kautuk Sahni
        Terms & ConditionsAccessibility statement

        Loading footer...