Not able to change style of component in target mode.

[Adilmo]

HI All, 

I am trying to setup activity with two experiences. Experiences differ in component styles only. For example, showing a list component in grid mode or simple list mode. This need to be achieved from style system and pre-defined styles on list component. 

Problem is when I go into targeting mode style icon is not available on the component. How to achieve this ? 

[santhosh_kumark · Accepted solution]

Hi @Adilmo ,

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 the style tab 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. You can follow https://docs.adobe.com/content/help/en/experience-manager-65/authoring/siteandpage/style-system.html

to achieve this.

Regards,

Santosh

[Adilmo]

In edit mode ... styles tab does show up. However, when we go to target mode .... styles tab is not available. You can check this with Core list component

[PiotrR]

I am facing the same issues in 2022. The accepted answer is not correct. In targeting mode there is no possibility to use style variant. If you found the solution please let me know.