Expand my Community achievements bar.

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

Avatar

Level 3

Hi @Fanindra_Surat,

 

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