Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

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

samsundar23
Level 4
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
Anudeep_Garnepudi
Correct answer by
Community Advisor
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
SivaPrasadReddyS
Level 8
Level 8

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
Level 4
Level 4

@SivaPrasadReddyS 

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

samsundar23
Level 4
Level 4

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

samsundar23
Level 4
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

Anudeep_Garnepudi
Correct answer by
Community Advisor
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

Arun_Patidar
Community Advisor
Community Advisor

Hi,

Try below

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