Adding dynamic css class on the outer html tag of a component | Community
Skip to main content
boser87
Level 4
October 16, 2015
Solved

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

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!

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    boser87Accepted solution
    Level 4
    October 16, 2015

    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 reply

    4 replies

    boser87Author
    Level 4
    October 16, 2015
    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.
    Translate
    Feike_Visser1
    Feike_Visser1
    Employee
    October 16, 2015

    Can you check this article for the cq:htmlTag?

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

    Translate
    boser87AuthorAccepted solution
    Level 4
    October 16, 2015

    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.

    Translate
      gopalKa
      Employee
      October 16, 2015

      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.

      Translate
      Terms & ConditionsAccessibility statement

      Loading footer...