Extending responsiveGrid using React in AEM SPA Architecture | Community
Skip to main content
Nikhil-Kumar
Community Advisor
Nikhil-KumarCommunity Advisor
Community Advisor
August 27, 2020

Extending responsiveGrid using React in AEM SPA Architecture

  • August 27, 2020
  • 2 replies
  • 2196 views

Hi All,

As most of us struggling on how to include or extend and customize the OOTB Responisve grid in SPA architecture.As everything is React side rendered.

Checkout my article to develop a SPA responsiveGrid component : https://aemsimplifiedbynikhil.wordpress.com/2020/08/27/extending-responsivegrid-using-react-in-aem-spa-architecture-aem-6-5-5/

Thanks,
Nikhil

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

    2 replies

    kautuk_sahni
    Community Manager
    kautuk_sahniCommunity Manager
    Community Manager
    August 31, 2020

    Thank you for sharing this with the AEM Community. I have marked this thread as featured. 

    Kautuk Sahni
      M
      marcjermaine
      Level 2
      September 8, 2020

      Thank you so much! May I ask what are the values of the following node under mygrid?

       

      - cq:editConfig

      - cq:template

      - new

       

       

        Nikhil-Kumar
        Community Advisor
        Nikhil-KumarCommunity AdvisorAuthor
        Community Advisor
        September 8, 2020

        @marcjermaine 

        cq:editConfig:

        <?xml version="1.0" encoding="UTF-8"?>
        <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
            jcr:primaryType="cq:EditConfig">
            <cq:listeners
                jcr:primaryType="cq:EditListenersConfig"
                afterchildinsert="function(editable){ns.responsive.EditableActions.REFRESH.execute(editable)}"/>
        </jcr:root>


        cq:template:
        <?xml version="1.0" encoding="UTF-8"?>
        <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
            jcr:primaryType="nt:unstructured">
            <cq:responsive jcr:primaryType="nt:unstructured"/>
        </jcr:root>

        new:
        <?xml version="1.0" encoding="UTF-8"?>
        <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
            jcr:primaryType="cq:Component"
            jcr:title="New Paragraph - Responsive Grid"
            sling:resourceSuperType="wcm/foundation/components/parsys/newpar"
            componentGroup=".hidden"/>




          Terms & ConditionsAccessibility statement

          Loading footer...