Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Adding dynamic css class on the outer html tag of a component

Avatar

Level 4

Hi everybody,

we have a component and we would like to add a 'dynamic' css class on its outer html tag. When I say dynamic, I mean for example chosen via a dialog. This would be easy in case the tag to add the css class is internal to the template but in our case is the outer one.

Example: the html template of the cq component

<div class="another-tag my-dynamic-class-chosen-via-a-cq-dialog">

component body

</div>

We already tried to override the parsys, but this is a real pain another solution I have thought about is writing a sling component filter.

Do you have any other idea?

Thank you!

1 Accepted Solution

Avatar

Correct answer by
Level 4

For the ones who could be stuck on this issue I solved it by implemeting a SlingFilter with COMPONENT scope as described here:

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

One thing to be aware of is to correctly rank our Decorator filter in the order list. It should come after 

com.day.cq.wcm.core.impl.WCMComponentFilter

otherwise the custom class id added in the wrong place.

Correct rank order is -100 in AEM 6 SP2.

View solution in original post

4 Replies

Avatar

Level 4
Hi and thank you for your response. I was already aware of cq:htmlTag but this does not accomplish our needs. I try to explain better: the class I want to add comes from a dialog input so is not static but it's dynamic according to user input. Again I want to add the class to the outer div so I am not in control of the html generated div but still cq:htmlTag won't solve this issue.

Avatar

Correct answer by
Level 4

For the ones who could be stuck on this issue I solved it by implemeting a SlingFilter with COMPONENT scope as described here:

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

One thing to be aware of is to correctly rank our Decorator filter in the order list. It should come after 

com.day.cq.wcm.core.impl.WCMComponentFilter

otherwise the custom class id added in the wrong place.

Correct rank order is -100 in AEM 6 SP2.

Avatar

Employee

You can find out in your filter if the component is included as part of the page by checking javax.servlet.include.servlet_path in request attribute. If request.getAttribute("javax.servlet.include.servlet_path") is not null then, you got your compoennt. Adapt the resource, get the property and you can decorate the way you want.