How to create a column control component in SPA React | Community
Skip to main content
S
ShikhaSharma-1
Level 2
February 8, 2023
Solved

How to create a column control component in SPA React

  • February 8, 2023
  • 1 reply
  • 2517 views

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 (wordpress.com)

 

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

 

Please suggest.

Shikha

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by lukasz-m

Hi @shikhasharma-1,

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:

1 reply

lukasz-m
Community Advisor
lukasz-mCommunity AdvisorAccepted solution
Community Advisor
February 19, 2023

Hi @shikhasharma-1,

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:

    A
    aem_raw
    August 26, 2023

    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 @shikhasharma-1 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!

    Terms & ConditionsAccessibility statement

    Loading footer...