Adobe Style System allows an author to create variations of the existing component with visual variations instead of creating new custom components. It provides component reusability and reduces dependency on the development team.
More information about the Style system 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 defines the style names and their corresponding class names that will be added when a particular style is used for a given component.
2. The author selects the style option as appropriate.
3. Publish the page along with all the dependencies (such as policy, templates, etc.).
1. Template author defines the style names and their corresponding class names that will be added when a particular style is used for a given component.
2. The 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 the style system option is selected by the 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>
When the style system option is selected by the 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 the 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 setup.
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 the 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 setup.
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)
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
No comments:
Post a Comment
If you have any doubts or questions, please let us know.