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

[boser87]

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!

[boser87]

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.

[Feike_Visser1]

Can you check this article for the cq:htmlTag?

http://dev.day.com/cemblog/en/experiencedelivers/2013/04/modify_the_auto-generateddivs.html

[boser87 · Accepted solution]

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.

[kalyanar]

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.