Add common custom static class to component wrapper div

Forum|Forum|2 years ago
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

EstebanBustamante

Community Advisor and Adobe Champion

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

A

Abhilasha_SAuthor

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.

EstebanBustamante

Community Advisor and Adobe Champion

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

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.