Expand my Community achievements bar.

SOLVED

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

Avatar

Level 4

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 !

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Checkbox dialog field should be like

Anudeep_Garnepudi_0-1635488985250.png

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:

Anudeep_Garnepudi_1-1635489298998.png

 

 

View solution in original post

8 Replies

Avatar

Community Advisor

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>

 

Avatar

Level 4

@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

Avatar

Community Advisor

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!

Avatar

Level 4

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

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

Avatar

Community Advisor

@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

Avatar

Level 4

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

Avatar

Correct answer by
Community Advisor

Checkbox dialog field should be like

Anudeep_Garnepudi_0-1635488985250.png

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:

Anudeep_Garnepudi_1-1635489298998.png

 

 

Avatar

Community Advisor

Hi,

Try below

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


Arun Patidar