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

Add data-attributes to component's decorator element

harish_malineni
Level 2
Level 2

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
fanindras
Correct answer by
Level 5
Level 5

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

1 Reply
fanindras
Correct answer by
Level 5
Level 5

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

harish_malineni
Level 2
Level 2

Hi @fanindras,

 

Is there any way to add attributes dynamically via SlingModels or Filters?