How to create a column control component in SPA React

[sharms13]

Hi,

We have a requirement where we need to create a column control component where the number of column selection is driven by Author and based on the number of column selected the column control render the defined number of parsys.

This works fine by adding a logic in HTL for non-SPA pages but how the same behavior can be achieved in SPA.

I followed the below link but in that as well it is creating a single parsys at a time but we want to multiple parsys to be render (based on number of col selected in dialog).

Extending responsiveGrid using React in AEM SPA Architecture | AEM 6.5.5 – AEM Queries & Solutions (...

Something like this in SPA (not via a Layout mode)

Please suggest.

Shikha

[lukasz-m · Accepted solution]

Hi @sharms13,

You should not built a separate component for this. The proper way will be to utilize responsive grid. This will allow authors to divide page into multiple columns e.g. using Layout Container component like this:

or simply use Layout option to resizes components to put them under multiple columns:

In general you can have a look into wknd SPA project as a reference.

Some useful links:

• https://experienceleague.adobe.com/docs/experience-manager-65/authoring/siteandpage/responsive-layou...
• https://helpx.adobe.com/experience-manager/kt/sites/using/getting-started-spa-wknd-tutorial-develop/...
• https://helpx.adobe.com/experience-manager/kt/sites/using/getting-started-spa-wknd-tutorial-develop/...
• https://github.com/adobe/aem-react-editable-components/tree/master/src/components#responsivegrid

[aem_raw]

Hello @lukasz-m ,

Thank you for the valuable information you provided. I was wondering if it's possible to create a three-column layout component akin to what @sharms13 inquired about? We hope to utilize a solution that doesn't display AEM-related styles in the HTML markup, as it aligns more closely with our requirements. Would you have any recommendations or guidance on this?

Thank you!