Expand my Community achievements bar.

Radically easy to access on brand approved content for distribution and omnichannel performant delivery. AEM Assets Content Hub and Dynamic Media with OpenAPI capabilities is now GA.

Extending responsiveGrid using React in AEM SPA Architecture

Avatar

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

Avatar

Administrator

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



Kautuk Sahni

Avatar

Level 2

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

 

- cq:editConfig

- cq:template

- new

 

 

Avatar

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