Style System is not visible for Embedded Components - AEM 6.3 | Community
Skip to main content
kavithas2205162
kavithas2205162
New Participant
Dec 3, 2018 2:20 PM UTC
Solved

Style System is not visible for Embedded Components - AEM 6.3

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.
mickjleroyAccepted solution
Level 2
Jun 24, 2019 5:13 AM UTC

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>

View reply

5 replies

mickjleroyAccepted solution
Level 2
Jun 24, 2019 5:13 AM UTC

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>

Translate
    mickjleroy
    Level 2
    Jun 24, 2019 4:43 AM UTC

    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.

    Translate
      FrancescaBueti
      FrancescaBueti
      Level 2
      Mar 4, 2019 12:47 AM UTC

      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​

      Translate
      kavithas2205162
      kavithas2205162Author
      New Participant
      Dec 4, 2018 7:59 AM UTC

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

      Translate
      smacdonald2008
      smacdonald2008
      Level 10
      Dec 3, 2018 5:02 PM UTC

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

      Translate
      Terms & ConditionsAccessibility statement

      Loading footer...