Extending responsiveGrid using React in AEM SPA Architecture

Avatar

Avatar

Nikhil-Kumar

MVP

Avatar

Nikhil-Kumar

MVP

Nikhil-Kumar
MVP

27-08-2020

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

Replies

Avatar

Avatar

kautuk_sahni

Community Manager

Total Posts

5.8K

Likes

1.0K

Correct Reply

1.1K

Avatar

kautuk_sahni

Community Manager

Total Posts

5.8K

Likes

1.0K

Correct Reply

1.1K
kautuk_sahni
Community Manager

31-08-2020

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

Avatar

Avatar

marcjermaine

Avatar

marcjermaine

marcjermaine

08-09-2020

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

 

- cq:editConfig

- cq:template

- new

 

 

Avatar

Avatar

Nikhil-Kumar

MVP

Avatar

Nikhil-Kumar

MVP

Nikhil-Kumar
MVP

08-09-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"/>