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

Adobe Summit 2023 [19th to 23rd March, Las Vegas and Virtual] | Complete AEM Session & Lab list
SOLVED

Add data-attributes to component\'s decorator element

Avatar

Level 3

I know we can add id, css classes and choose the decorator element type, however, my requirement is to add data-attributes to decorator element. is there a way to achieve it?

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @harish_malineni ,

 

As per the documentation, you can add any property names on cq:htmlTag node of a component and that will be added to the decoration tag:

  • cq:htmlTag node : This node can be added under a component and can have the following properties:
    • cq:tagName {String} : This can be used to specify a custom HTML tag to be used for wrapping the components instead of the default DIV element.
    • class {String} : This can be used to specify css class names to be added to the wrapper.
    • Other property names will be added as HTML attributes with the same String value as provided.

Ref: https://experienceleague.adobe.com/docs/experience-manager-64/developing/components/decoration-tag.h...

 

A working example:
Screenshot 2021-08-26 at 2.02.30 PM.png

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

Hi @harish_malineni ,

 

As per the documentation, you can add any property names on cq:htmlTag node of a component and that will be added to the decoration tag:

  • cq:htmlTag node : This node can be added under a component and can have the following properties:
    • cq:tagName {String} : This can be used to specify a custom HTML tag to be used for wrapping the components instead of the default DIV element.
    • class {String} : This can be used to specify css class names to be added to the wrapper.
    • Other property names will be added as HTML attributes with the same String value as provided.

Ref: https://experienceleague.adobe.com/docs/experience-manager-64/developing/components/decoration-tag.h...

 

A working example:
Screenshot 2021-08-26 at 2.02.30 PM.png

The ultimate experience is back.

Join us in Vegas to build skills, learn from the world's top brands, and be inspired.

Register Now