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
BedrockMission!

Learn More

View all

Sign in to view all badges

Extending responsiveGrid using React in AEM SPA Architecture

Avatar

Avatar
Boost 250
MVP
Nikhil-Kumar
MVP

Likes

251 likes

Total Posts

262 posts

Correct Reply

38 solutions
Top badges earned
Boost 250
Validate 1
Ignite 3
Ignite 1
Give Back 5
View profile

Avatar
Boost 250
MVP
Nikhil-Kumar
MVP

Likes

251 likes

Total Posts

262 posts

Correct Reply

38 solutions
Top badges earned
Boost 250
Validate 1
Ignite 3
Ignite 1
Give Back 5
View profile
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
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,198 likes

Total Posts

6,375 posts

Correct Reply

1,147 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,198 likes

Total Posts

6,375 posts

Correct Reply

1,147 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile
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
Validate 1
Level 1
marcjermaine
Level 1

Likes

3 likes

Total Posts

4 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Give Back
Boost 3
Boost 1
Applaud 5
View profile

Avatar
Validate 1
Level 1
marcjermaine
Level 1

Likes

3 likes

Total Posts

4 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Give Back
Boost 3
Boost 1
Applaud 5
View profile
marcjermaine
Level 1

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
Boost 250
MVP
Nikhil-Kumar
MVP

Likes

251 likes

Total Posts

262 posts

Correct Reply

38 solutions
Top badges earned
Boost 250
Validate 1
Ignite 3
Ignite 1
Give Back 5
View profile

Avatar
Boost 250
MVP
Nikhil-Kumar
MVP

Likes

251 likes

Total Posts

262 posts

Correct Reply

38 solutions
Top badges earned
Boost 250
Validate 1
Ignite 3
Ignite 1
Give Back 5
View profile
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"/>