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 | AEM 6.5.5 | AEM Community Blog Seeding

Avatar

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,167 likes

Total Posts

6,285 posts

Correct Reply

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

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,167 likes

Total Posts

6,285 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile
kautuk_sahni
Community Manager

27-08-2020

BlogImage.jpg

Extending responsiveGrid using React in AEM SPA Architecture | AEM 6.5.5 by Nikhil Kumar

Abstract

As the topic itself elaborate on what we will be handling in this article now.
During my AEM SPA implementation I encountered one issue where I needed something like column control in SPA architecture. But as you know earlier we used to have HTL rendered component, so it was easy to handle the division and crating a parsys inside parsys.
But as we are using SPA architecture we should have all rendering at React end.

Let’s understand how we can achieve the same thing in current SPA architecture.

Create a basic AEM component under your project structure let’s say /apps/mycompany/content/components/mygrid with resourceSupertype as wcm/foundation/components/responsivegrid. (overlaying)

Now we start with creating our corresponding React component inside ../react-app/src/components/MyGrid/Mygrid.js

I have used the following JS and CSS to extend the ResponsiveGrid class from @adobe/cq-react-editable-components.

MyGrid.js

import React, { Component } from "react";
import {ResponsiveGrid, MapTo, withComponentMappingContext} from "@adobe/cq-react-editable-components";

require('./MyGrid.scss');

export class MyGrid extends ResponsiveGrid {
/**
* The attributes that will be injected in the root element of the container
*
* @returns {Object} - the attributes of the container
*/
get containerProps() {
let containerProps = super.containerProps;
containerProps.className = (containerProps.className || '') + ' MyGrid ' + this.props.gridClassNames;
return containerProps;
}

render() {
return (
{ super.childComponents } { super.placeholderComponent }
)
}

}

MapTo('wknd-events/components/content/mygrid')(withComponentMappingContext(MyGrid));

Read Full Blog

Extending responsiveGrid using React in AEM SPA Architecture | AEM 6.5.5

Q&A

Please use this thread to ask the related questions.

AEM AEMEBlogSeeding Experience Manager