AEM | SPA React Component with a responsive grid

Avatar

Avatar
Boost 1
Level 1
sandrateixeira
Level 1

Like

1 like

Total Posts

4 posts

Correct reply

0 solutions
Top badges earned
Boost 1
View profile

Avatar
Boost 1
Level 1
sandrateixeira
Level 1

Like

1 like

Total Posts

4 posts

Correct reply

0 solutions
Top badges earned
Boost 1
View profile
sandrateixeira
Level 1

16-10-2019

Hello,

Does anyone know how I can include response grid inside react component?

It was possible in HTL.

<sly data-sly-resource="${'content' @ resourceType='wcm/foundation/components/responsivegrid'}"></sly>

Thank you

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Give Back 5
Employee
sunjot16
Employee

Likes

106 likes

Total Posts

164 posts

Correct reply

50 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back 25
Give Back 10
Give Back
View profile

Avatar
Give Back 5
Employee
sunjot16
Employee

Likes

106 likes

Total Posts

164 posts

Correct reply

50 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back 25
Give Back 10
Give Back
View profile
sunjot16
Employee

16-10-2019

You can use that component. It's clientlibs are defined under ui.apps:

"As part of the starter project a dedicated client library for the Responsive Grid has been included in the ui.apps project. You can view the client library at /aem-guides-wknd-events/ui.apps/src/main/content/jcr_root/apps/wknd-events/clientlibs/responsive-grid. This client library has a category of wknd-events.grid and includes a single file named grid.less which includes the necessary CSS for the Layout Mode and the responsive grid to work. Next we will make sure that this CSS is loaded with the React app."

Adobe Experience Manager Help | Getting Started with React and AEM SPA Editor - Chapter 2

Moreover, it's a Layout Container Component:

Responsive Layout

You can use it the same way you can use/create the other components, the way AEM Text component is mapped to a React component.

Adobe Experience Manager Help | Getting Started with React and AEM SPA Editor - Chapter 1

Answers (3)

Answers (3)

Avatar

Avatar
Boost 1
Level 1
sandrateixeira
Level 1

Like

1 like

Total Posts

4 posts

Correct reply

0 solutions
Top badges earned
Boost 1
View profile

Avatar
Boost 1
Level 1
sandrateixeira
Level 1

Like

1 like

Total Posts

4 posts

Correct reply

0 solutions
Top badges earned
Boost 1
View profile
sandrateixeira
Level 1

16-10-2019

Hi, thanks for your reply.

I don't want to resize components inside the responsive grid.

I really need one component and I want to be able to add new components inside this one. Is a different use case.

Avatar

Avatar
Give Back 5
Employee
sunjot16
Employee

Likes

106 likes

Total Posts

164 posts

Correct reply

50 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back 25
Give Back 10
Give Back
View profile

Avatar
Give Back 5
Employee
sunjot16
Employee

Likes

106 likes

Total Posts

164 posts

Correct reply

50 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back 25
Give Back 10
Give Back
View profile
sunjot16
Employee

16-10-2019

Avatar

Avatar
Ignite 1
MVP
Ankur_Khare
MVP

Likes

159 likes

Total Posts

370 posts

Correct reply

58 solutions
Top badges earned
Ignite 1
Validate 10
Validate 1
Give Back 50
Give Back 5
View profile

Avatar
Ignite 1
MVP
Ankur_Khare
MVP

Likes

159 likes

Total Posts

370 posts

Correct reply

58 solutions
Top badges earned
Ignite 1
Validate 10
Validate 1
Give Back 50
Give Back 5
View profile
Ankur_Khare
MVP

16-10-2019

Hope you have seen this -

Integrate Responsive Grid

AEM ships with an edit mode called Layout mode which when enabled allows authors to re-size components and containers to optimize content on different device widths. This feature is baked into the SPA Editing capabilities. The only action needed is to integrate AEM's Responsive Grid CSS into our project.

As part of the starter project a dedicated client library for the Responsive Grid has been included in the ui.apps project. You can view the client library at /aem-guides-wknd-events/ui.apps/src/main/content/jcr_root/apps/wknd-events/clientlibs/responsive-grid. This client library has a category of wknd-events.grid and includes a single file named grid.less which includes the necessary CSS for the Layout Mode and the responsive grid to work. Next we will make sure that this CSS is loaded with the React app