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

SOLVED

AEM | SPA React Component with a responsive grid

sandrateixeira
Level 1
Level 1

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

1 Accepted Solution
sunjot16
Correct answer by
Employee
Employee

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

View solution in original post

7 Replies
Ankur_Khare
Community Advisor
Community Advisor

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

sandrateixeira
Level 1
Level 1

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.

claudiab1560191
Level 2
Level 2
Did you find the answer to your question? I'm trying investigating doing the same thing.
besimhuskic
Level 1
Level 1
I am also curious if you found an answer for this. I am too curious. We cobbled somethign together where the responsive layout does appear, but it does not update once components are added in.
papenaarun
Level 2
Level 2
Did you get any solution for this? I am looking for the same. It was very easy is HTL but in React I dont see any documentation for that.
sunjot16
Correct answer by
Employee
Employee

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

View solution in original post