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

Custom AEM Grid classes

Avatar

Level 1

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

6 Replies

Avatar

Level 10

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.

Avatar

Level 1

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>