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

Extending responsiveGrid using React in AEM SPA Architecture

Nikhil-Kumar
Community Advisor
Community Advisor

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

3 Replies
kautuk_sahni
Community Manager
Community Manager

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

marcjermaine
Level 2
Level 2

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
Community Advisor

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