CMS, Java

Resolving a known issue with AEM 6.4’s Style System Feature

Style System overview

 

Adobe Style System allows a author to create variations of the existing component with visual variations instead of creating a new custom components.  It provides component reusability and reduces dependency on development team.
More information about Stylesystem can be found here.
https://helpx.adobe.com/experience-manager/6-3/release-notes/style-system-fp.html

How to apply a custom style using AEM’s Style System?

  1. Template author define the style names and its corresponding class names that will be added when a particular style is used for a given component.
  2. Author selects the style option as appropriate.
  3. Publish the page along with all the dependencies (such as policy, templates etc.).

Behind The scenes – How Style System work?

When style system option is selected by author, it applies it as the wrapper to the component’s HTML (e.g DIV) element.  
For instance, when a custom style, cmp–title__style1 is selected by the author for the component then the resultant component is going to be as follows:
.
<div class=”title cmp–title__style1 section”>
<h1 class=”heading-h1″>Page TITLE</h1>
</div>

Problem statement

After template authors configured the style options and author selected the required custom style for components, it was working fine on author instance.

When the same page and its dependencies were activated the style system classes on the Publish environment were not getting applied.

It will work (wrapper classes) when we would clear WCM Style Component cache. The issue would resurface when additional styles were created or policies were activated. Clearing the component cache after every page activated is not an ideal solution in any set up.

Solution

In order to resolve this issue, you can create your own customized Component filter to read the custom styles that are available for a given component and apply it to the corresponding component.

Here are the steps to create custom filter.

  1. Implement Filter interface
    public class StyleSystemProcessor implements Filter
  2. Override doFilter method
    @Override public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
  3. Get IncludeOptions Object
    final IncludeOptions options = IncludeOptions.getOptions(request, true);
  4. Get the style system class that is authored at the template level by reading cq:styleIds of the component.
    String styleSystemId = [WRITE LOGIC to READ STYLEs cq:styleIds applied]
  5. Include the styles
    options.getCssClassNames().add(styleSystemId);

Make sure this filter is executed before any OOTB filters by setting order in the SlingFilter annotation greater than OOTB component filters.
@SlingFilter(
                    scope = SlingFilterScope.COMPONENT,
                    order = 11000,
                    metatype = true)

 

 

Credits

@khanjan Saraiya

About The Author

Leave a Reply

*