Extending responsiveGrid using React in AEM SPA Architecture

[Nikhil-Kumar]

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-s...

Thanks,
Nikhil

[kautuk_sahni]

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

[marcjermaine]

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

- cq:editConfig

- cq:template

- new

[Nikhil-Kumar]

@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"/>