Highlighted

Custom AEM Grid classes

Avatar

Avatar

pieter-janp4643

Avatar

pieter-janp4643

pieter-janp4643

14-11-2017

Is it possible to modify or customize the aem grid classes that are printed on the component tag? We use a different grid system but would like to use the layout feature in the editor for the easy configuration of columns.

The current output would be:

component-name parbase aem-GridColumn--default--none aem-GridColumn aem-GridColumn--default--4 aem-GridColumn--phone--12

In my case I want to modify the output to be:

component-name parbase grid-4 grid-mobile-12

Is there any way to overlay or configure this functionality?

PS: We are using AEM 6.3

Replies

Highlighted

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K
smacdonald2008

14-11-2017

You can override most AEM components. There should be no reason why this would be any different. We have an article on building a custom grid component. However - its for use on a page to hold other components - not for tags. I am not completely sure what you mean by holding tags.

I assume you want to change something in the AEM UI as opposed to a component for use in an AEM site.

Highlighted

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K
smacdonald2008

14-11-2017

Here is the article on creating a custom grid component for use within an Page template.

Creating a custom Touch UI Grid Component for Adobe Experience Manager

Highlighted

Avatar

Avatar

pieter-janp4643

Avatar

pieter-janp4643

pieter-janp4643

20-11-2017

We currently have an implementation of such a component where columns are defined and components dragged into them.

I wish to avoid that approach as it comes with a lot of overhead responsive-wise for the authors.

I am using the aem grid now but leveraging the layout section of the editor which works great. I wish to however change the output css classes without rewriting the aem code that reads the cq:responsive node under the component. For that I am wondering if these css class outputs can be configured somehow.

Right now I am using a work around in scss where I extend the css classes aem outputs from the css grid we are using in our project.

It would be cleaner if I can just make it output the correct css classes though.

As far as I can tell the css classes are generated in a java class and printed using the following file on line 10

/libs/wcm/foundation/components/responsivegrid/responsivegrid.html

<div data-sly-use.api="com.day.cq.wcm.foundation.model.responsivegrid.ResponsiveGrid"

    data-sly-use.allowed="com.day.cq.wcm.foundation.AllowedComponentList"

    class="${api.cssClass} ${allowed.cssClass}">

    <sly data-sly-test.isAllowedApplicable="${allowed.isApplicable}"

        data-sly-test="${isAllowedApplicable}"

        data-sly-use.allowedTemplate="/libs/wcm/foundation/components/parsys/allowedcomponents/allowedcomponents-tpl.html"

        data-sly-call="${allowedTemplate.allowedcomponents @ title=allowed.title, components=allowed.components}"></sly>

    <sly data-sly-test="${!isAllowedApplicable}"

        data-sly-repeat.child="${api.paragraphs}"

        data-sly-resource="${child.path @ resourceType=child.resourceType, decoration='true', cssClassName=child.cssClass}"></sly>

    <sly data-sly-test="${!isAllowedApplicable && wcmmode.edit}"

        data-sly-resource="${resource.path @ resourceType='wcm/foundation/components/responsivegrid/new', appendPath='/*', decorationTagName='div', cssClassName='new section aem-Grid-newComponent'}" />

</div>

Highlighted

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K
smacdonald2008

20-11-2017

I have not done that - if other have - please provide a comment.

Highlighted

Avatar

Avatar

CT1012

Avatar

CT1012

CT1012

19-09-2018

Have you tried any alternative to this?

Highlighted

Avatar

Avatar

cq-user

Avatar

cq-user

cq-user

17-04-2019

Were you able to find a solution for this?

Thanks