Style System is not visible for Embedded Components - AEM 6.3 | Community
Skip to main content
kavithas2205162
kavithas2205162
December 3, 2018
Solved

Style System is not visible for Embedded Components - AEM 6.3

  • December 3, 2018
  • 5 replies
  • 3480 views

Style system is not visible in component's toolbar for components which are embedded into another component (Component A) using data-sly-resource.  The parent component (Component A) is added as a default component at template level (Editable templates).

For the same embedded components style system is visible, if I drag-drop the parent component on the page.

Note : The issue exists in we-retail templates and in AEM 6.4 as well.

Can anyone help me on this ?

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 mickjleroy

As per the Decoration Tag documentation​:

This is why you're not seeing the Style system classes when embedding a component.

The behaviour of the wrapping DIV can be controlled via the HTL that embeds the component. To make sure the wrapping DIV (and corresponding layout & style classes) are added, you must specify the "decoration=true" option as follows:

<sly data-sly-resource="${'list'@ resourceType='weretail/components/content/list', decoration=true}"></sly>

5 replies

smacdonald2008
smacdonald2008
Level 10
December 3, 2018

Have you observed this behaviour on a fresh instance of AEM?

kavithas2205162
kavithas2205162Author
December 4, 2018

Yes the issue is present in fresh instance of AEM 6.3+SP2 and AEM 6.4.  Observed in we-retail templates and pages.

FrancescaBueti
FrancescaBueti
Level 2
March 4, 2019

I also see this issue in 6.4. For embedded components, the style option will show up, yet when I go to choose a style, it will not persist. (It blinks briefly with the correct style, then the page refreshes) However, it does store the proper cq:styleIds information. Any idea how I can get the class to persist and make the style system work as expected for embedded components?

smacdonald2008​

M
mickjleroy
Level 2
June 24, 2019

I'm running into the same issue. The issue is the component wrapper DIV isn't generated when a component is embedded and in normal situations, the wrapper DIV contains the Layout classes and Style system classes.

It would be possible to create a helper Sling Model that takes in the "currentStyle" for the component and gives you the Style system classes but it's a bit of a hassle.

smacdonald2008​ any help would be greatly appreciated.

    M
    mickjleroyAccepted solution
    Level 2
    June 24, 2019

    As per the Decoration Tag documentation​:

    This is why you're not seeing the Style system classes when embedding a component.

    The behaviour of the wrapping DIV can be controlled via the HTL that embeds the component. To make sure the wrapping DIV (and corresponding layout & style classes) are added, you must specify the "decoration=true" option as follows:

    <sly data-sly-resource="${'list'@ resourceType='weretail/components/content/list', decoration=true}"></sly>

      Terms & ConditionsAccessibility statement

      Loading footer...