Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Style system with initial width in responsivegrid

visomar
Level 1
Level 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:

1745216_pastedImage_0.png

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.

1 Accepted Solution
Arun_Patidar
Correct answer by
Community Advisor
Community Advisor

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)

View solution in original post

2 Replies
Arun_Patidar
Correct answer by
Community Advisor
Community Advisor

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)
visomar
Level 1
Level 1

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)