4 Replies Latest reply on Nov 20, 2017 11:38 AM by smacdonald2008

    Custom AEM Grid classes

    pieter-janp46439381 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

        • 1. Re: Custom AEM Grid classes
          smacdonald2008 Adobe Employee

          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.

          • 2. Re: Custom AEM Grid classes
            smacdonald2008 Adobe Employee

            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

            • 3. Re: Custom AEM Grid classes
              pieter-janp46439381 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>
              
              • 4. Re: Custom AEM Grid classes
                smacdonald2008 Adobe Employee

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