Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

AEM 6.3 Style sytem - Not able to view styles tab & Policy icon in component policy

Avatar

Level 4

We have followed the link Style System  for including style system. But when we click on the policy tab of the List component we are not able to view styles tab as mentioned in the blog.

1554092_pastedImage_3.png

But in the blog they mentioned as

1554082_pastedImage_2.png

Do we need to enable anything for the styles tab to appear.

And also for the project related components we are not able to see the policy icon

1554093_pastedImage_4.png

Can you please suggest why we are not able to see the styles tab in the policy & policy icon in the allowed components.

Thanks & Regards,
Kalyani

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi,

Yes, you need to setup.

Setup

Note:

Version 2 of the core components is fully enabled to take advantage of the style system and requires no additional configuration.

Follow the next steps to enable the style system for your own custom components or to extend the version 1 core components to utilize the feature.

In order for a component to work with AEM's style system and show the style tab in its design dialog, the component developer must include that tab from the product with the following settings on the component:

  • path = "/mnt/overlay/cq/gui/components/authoring/dialog/style/tab_design/styletab"
  • sling:resourceType = "granite/ui/components/coral/foundation/include"

With the component configured, the styles configured by the page authors will be automatically inserted by AEM on the decoration element that AEM automatically wraps around every editable component. The component itself need not do anything else to make this happen.



Arun Patidar

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

Hi,

Yes, you need to setup.

Setup

Note:

Version 2 of the core components is fully enabled to take advantage of the style system and requires no additional configuration.

Follow the next steps to enable the style system for your own custom components or to extend the version 1 core components to utilize the feature.

In order for a component to work with AEM's style system and show the style tab in its design dialog, the component developer must include that tab from the product with the following settings on the component:

  • path = "/mnt/overlay/cq/gui/components/authoring/dialog/style/tab_design/styletab"
  • sling:resourceType = "granite/ui/components/coral/foundation/include"

With the component configured, the styles configured by the page authors will be automatically inserted by AEM on the decoration element that AEM automatically wraps around every editable component. The component itself need not do anything else to make this happen.



Arun Patidar