Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Add common custom static class to component wrapper div

Avatar

Level 2

Hi All, Is there any way apart from cq:htmlTag to customize wrapper div for all components with single configuration?...we need a way to identify all aem component wrappers on live page for automation purpose.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hello @Abhilasha_S 

 

One way is to use Decorator Filter. It will allow you to add custom classes to wrapper. Please refer to:

https://stackoverflow.com/questions/26102239/aem-cq-conditional-css-class-on-decoration-tag


Aanchal Sikka

View solution in original post

6 Replies

Avatar

Community Advisor

You have the option to remove the wrappers for a component by using cq:noDecoration, OR you can use the cq:htmlTag to change the wrapper (class and element type), beyond that, you don't have more options.

 

Another thought is that actually, you can infer the class name which is set by default in each component, if you look closer, the wrapper dive will always set the "component name" as its class, so you can take advantage of this to write your automation code.

Esteban666_0-1687356103001.png

 


Can you describe more what you are trying to do, to explore alternatives? 

 

You can learn more about the decoration tag here: https://experienceleague.adobe.com/docs/experience-manager-65/developing/components/decoration-tag.h... 

 



Esteban Bustamante

Avatar

Level 2

Hi @EstebanBustamante ,

This class will not be used to style components but help in identifying all components on a page with a single HTML query for further processing in component specific test automation.

Avatar

Community Advisor

Then, you can use the default class which is populated without any extra config as I explained above. This class corresponds to the component name (node name). 



Esteban Bustamante

Avatar

Community Advisor

Hello @Abhilasha_S  - 

 

I would recommend using a CSS class to achieve this!

 

  • Create a custom CSS class that defines the styling and attributes for the wrapper div.
  • In AEM, navigate to the Design mode and open the desired template or component.
  • Edit the corresponding client-side code (e.g., CSS or JS file) associated with the template or component.
  • Add the custom CSS class to the wrapper div or any specific container element.
  • Save the changes and publish the template or component.

Avatar

Correct answer by
Community Advisor

Hello @Abhilasha_S 

 

One way is to use Decorator Filter. It will allow you to add custom classes to wrapper. Please refer to:

https://stackoverflow.com/questions/26102239/aem-cq-conditional-css-class-on-decoration-tag


Aanchal Sikka

Avatar

Level 2

Hi @aanchal-sikka ,
Although adding cq:htmlTag is correct way this solution worked great to intercept and change classes for multiple components.