Add common custom static class to component wrapper div | Community
Skip to main content
Level 2
June 21, 2023
Solved

Add common custom static class to component wrapper div

  • June 21, 2023
  • 3 replies
  • 2599 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by aanchal-sikka

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

3 replies

EstebanBustamante
Community Advisor and Adobe Champion
Community Advisor and Adobe Champion
June 21, 2023

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.

 


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.html?lang=en#component-controls 

 

Esteban Bustamante
Level 2
June 21, 2023

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.

EstebanBustamante
Community Advisor and Adobe Champion
Community Advisor and Adobe Champion
June 21, 2023

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
Tanika02
Level 7
June 21, 2023

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.
aanchal-sikka
Community Advisor
aanchal-sikkaCommunity AdvisorAccepted solution
Community Advisor
June 21, 2023

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
Level 2
June 22, 2023

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