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

[samsundar23]

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 !

[Siva_Sogalapalli]

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]

@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_]

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

Thanks!

[samsundar23]

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

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

[Anudeep_Garnepudi]

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

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 · Accepted solution]

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]

Hi,

Try below

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