Need to add an attribute to the DIV element based on checkbox selection | Community
Skip to main content
samsundar23
samsundar23
Level 4
October 28, 2021
Solved

Need to add an attribute to the DIV element based on checkbox selection

  • October 28, 2021
  • 4 replies
  • 6240 views

This might be a silly question but that's my requirement !

 

I'm using AEM 6.5.10.

I have a checkbox as one of the field in my cq:dialog. On selection of checkbox, I need append the attribute "data-nosnippet" to my <div> element.

For instance, my complete HTML of the component is below

 

<div data-sly-use.handler="sample.test.Hello" 

data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"

data-sly-unwrap>

${handler.heading}

</div>

 

  • If I select the checkbox, it should give me the below result in the view source of the page,
    <div class="hello" data-nosnippet>heading</div>

 

  • If I unselect the checkbox, it should give me the below result in the view source of the page,
    <div class="hello">heading</div>

I'm trying to get the multiple options of using data-sly-attribute or other stuff which is not giving me the desired result. 

Kindly help me in achieving this functionality.

 

Thank you !

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 Anudeep_Garnepudi

Checkbox dialog field should be like

Your HTL should be

<div class="${properties.checkbox @context='unsafe'}>Heading</div>

Important Note: Make sure you don't close the quote after expression i.e quote started after class= and it should not end in HTL as the quote is coming from the dialog properties.

Output:

 

 

4 replies

Siva_Sogalapalli
Community Advisor
Siva_SogalapalliCommunity Advisor
Community Advisor
October 28, 2021

did you try something like this? 

 

<div class="hello" ${handler.checbox ? 'data-nosnippet' : ''}> heading </div> 

 

or 

   <sly data-sly-test="${handler.chebox.}" data-sly-unwrap>

        <div class="hello" data-nosnippet>heading</div>

  </sly>

 

    samsundar23
    samsundar23Author
    Level 4
    October 29, 2021

    @siva_sogalapalli 

    - Tried below option, it did not work

    <div class="hello" ${handler.checbox ? 'data-nosnippet' : ''}> heading </div> 

    - Yet to try second option, the HTML seems to be quite big, can't copy & paste it twice based on the checkbox selection in same HTML.

     

    Thanks

      Asutosh_Jena_
      Community Advisor
      Asutosh_Jena_Community Advisor
      Community Advisor
      October 28, 2021

      Hi @samsundar23 

       

      data-sly-attribute should work here:

       

      <section class="radio-section radio-section-1" data-sly-attribute.data-nosnippet=${properties.checkboxValue}>

       

      It will give something like below when the checkbox is checked.

       

      <section class="radio-section radio-section-1" data-nosnippet="true">

       

      https://experienceleague.adobe.com/docs/experience-manager-htl/using/htl/block-statements.html?lang=en

       

      Thanks!

        samsundar23
        samsundar23Author
        Level 4
        October 29, 2021

        Understood your overall post on this but our requirement is to make this work. 😞

        • <div class="hello" data-nosnippet>heading</div>
          Anudeep_Garnepudi
          Community Advisor
          Anudeep_GarnepudiCommunity Advisor
          Community Advisor
          October 28, 2021

          @samsundar23 

          Firstly, HTL currently supporting HTML attributes with key-value pairs.

          Approach 1 (Recommended):

          So, you can add attribute something like data-nosnippet="true" if checkbox is checked and no attribute if unchecked.

          In your dialog checkbox field add value attribute and set value as (String) true.

          Note: It is always recommended to use uncheckedValue property for checkbox.

          Add uncheckedValue property and set a blank value.

          In HTL

          <div class="hello" data-nosnippet=${properties.checkboxName}>Heading</div>

          Approach 2 (Personally don't recommended):

          If you srtictly want to use attribute data-nosnippet without any value. Then you need to apply a cheat.

          1. You need an attribute which present always. Here you can take class.
          2. To your dialog checkbox filed value property set value as hello" data-nosnippet
          3. To your dialog checkbox feild uncheckedValue property set value hello"

          In HTL

          <h1 class="${properties.checkboxName @context='unsafe'}>Heading</h1>

          -AG

            samsundar23
            samsundar23Author
            Level 4
            October 29, 2021

            Your suggestion did not work bro I meant to say about the 2nd approach which fits in my requirement best.

            Can you elaborate much more to make sure I'm not missing anything from my end.

             

            Thanks

              Anudeep_Garnepudi
              Community Advisor
              Anudeep_GarnepudiCommunity AdvisorAccepted solution
              Community Advisor
              October 29, 2021

              Checkbox dialog field should be like

              Your HTL should be

              <div class="${properties.checkbox @context='unsafe'}>Heading</div>

              Important Note: Make sure you don't close the quote after expression i.e quote started after class= and it should not end in HTL as the quote is coming from the dialog properties.

              Output:

               

               

                arunpatidar
                Community Advisor
                arunpatidarCommunity Advisor
                Community Advisor
                October 30, 2021

                Hi,

                Try below

                <div class="hello" data-sly-attribute.data-nosnippet="${properties.propertyCheckbox ? true : ''}">heading</div>
                Arun Patidar
                  Terms & ConditionsAccessibility statement

                  Loading footer...