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

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

  • October 16, 2015
  • 4 replies
  • 5437 views

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.
    Best answer by boser87

    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.

    4 replies

    B
    boser87Author
    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.
    Feike_Visser1
    Adobe Employee
    Feike_Visser1Adobe Employee
    Adobe 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

    B
    boser87AuthorAccepted solution
    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.

      G
      Adobe Employee
      gopalKaAdobe Employee
      Adobe 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.

      Terms & ConditionsAccessibility statement

      Loading footer...