Style system with initial width in responsivegrid

[#1]

Hello.

I have a use case in which I have to deploy certain component in a layout container, and that component must occupy initially a third of that container.

Since this use case if specific for certain pages, I'm trying to use the style system for that component in certain pages, but either it can't be done with it, or I'm missing something. This is what I'm trying to do:

The Short and Long styles have different style definitions (not only for width), but using the GridColumn with size 4 as one of the default classes won't work because AEM is also adding  the aem-GridColumn--default--12 class to the component.

So the question is: is there a way to define a "default" behaviour in a style system of a component to only occupy a third of a layout container when dropped inside?

Thank you very much in advance for the help.

[#2 · Accepted solution]

Hi,

Wheneve you setup style sytem for any componnets the value is stored in the policy.

e.g. /conf/we-retail/settings/wcm/policies/weretail/components/content/list/we-retail-default/cq:styleGroups

Each item contains three properties cq:styleClasses, cq:styleId and cq:styleLabel

e.g.

/conf/we-retail/settings/wcm/policies/weretail/components/content/list/we-retail-default/cq:styleGroups/item0/cq:styles/item0

When you drop a component and set style for a component in the page, the styleIds saves in the cq:styleIds

e.g.

/content/we-retail/language-masters/en/men/jcr:content/root/responsivegrid/list

Now how to set default style

1. Go to your component /apps/weretail/components/content/list
2. add child cq:template node
3. set cq:styleIds(String[]) property with the default style id (cq:styleId)

[#3]

Thank you very much for your help, Arun. Your guidelines were the key to what I wanted to achieve.

My specific problem is not exactly with a styleId (which also works, I tested it) but with a configuration of the responsiveness of the component.

So, for documenting purposes, the specific steps I followed were these:

1. Go to your component /apps/weretail/components/content/list
2. add child cq:template node
3. inside cq:template node, add another node (nt:unstructured) called cq:responsive
4. inside cq:responsive node, add another node (nt:unstructured) called default
5. set offset and width properties with the desired initial configuration (0 and 4 respectively in my case)