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

Anyway to add dynamic value to the cq:htmlTag of a component ?

Avatar

Level 4

I'm using AEM 6.5.10.

I need to inject aria-label with a dynamic value along with class and role which has been rendered in the HTML structure.

    <div role="navigation" class="col-12 col-sm-6 col-lg-3" aria-label="headingvalue">

The 'headingvalue' is a dynamic value which should keep on changing based on the heading authored.

 

I'm using cq:htmlTag in my component as per below screenshot to add up the class and role to my <div>.
Now, I need to get the heading value from dialog field and update the aria-label value dynamically.

Is there anyway to achieve it.
Any thoughts and suggestion on the above query will be very much helpful.

 

Component structure and cq:htmlTag

samsundar23_0-1663837279259.png

HTML rendered in the page:

 

 

<div class="col-12 col-sm-6 col-lg-3" role="navigation">
   <div aria-label="mylinks">
      <h4>My links</h4>
      <ul>
         <li>
            <a href="/support" class="navlink" target="_self">
            Complaints
            </a>
         </li>
      </ul>
   </div>
</div>

 

 

Thank you

1 Accepted Solution

Avatar

Correct answer by
Level 5

Have you seen this document which explains the setting class name and other properties by variable in HTL?

Check this out : https://experienceleague.adobe.com/docs/experience-manager-65/developing/components/decoration-tag.h... 

 

Use Case 3: Custom Behavior

There can be any number of complex cases, which can be achieved easily by the possibility of HTL to provide explicitly:

  • decorationTagName='ELEMENT_NAME' To define the element name of the wrapper.
  • cssClassName='CLASS_NAME' To define the CSS class names to set on it.

one.html: <sly data-sly-resource="${'child' @ decorationTagName='aside', cssClassName='child'}"></sly>

two.html: Hello World!

Resulting output /content/test.html:

<aside class="child">Hello World!</aside>

View solution in original post

1 Reply

Avatar

Correct answer by
Level 5

Have you seen this document which explains the setting class name and other properties by variable in HTL?

Check this out : https://experienceleague.adobe.com/docs/experience-manager-65/developing/components/decoration-tag.h... 

 

Use Case 3: Custom Behavior

There can be any number of complex cases, which can be achieved easily by the possibility of HTL to provide explicitly:

  • decorationTagName='ELEMENT_NAME' To define the element name of the wrapper.
  • cssClassName='CLASS_NAME' To define the CSS class names to set on it.

one.html: <sly data-sly-resource="${'child' @ decorationTagName='aside', cssClassName='child'}"></sly>

two.html: Hello World!

Resulting output /content/test.html:

<aside class="child">Hello World!</aside>