Carousel Component with AEM6.5 remote spa

[randomUser12]

I have a requirement of creating a carousel container component with parsys dropped inside it, the FE part is done using react.

I'm getting the number of parsys to be dropped inside the container through the model.json that will be passed as a prop to my React component.

Based on the value I'm iterating the Responsive grid component from @adobe/aem-react-editable-components library version 2.0.1.

Code:

function CardType (cardCount,index) {

     for(i=0;i<cardCount;i++){

         <ResponiveGrid

            pagePath="/content/poc/us/en/test"

            itemPath="root/responsivegrid/carousel/card${index}"

         />

     }

}

The above function adds parsys to the carousel container, and through page policy, I'm configuring the allowed components.

The issue is, once I drop any component inside the parsys there is an infinite loop of API calls to model.json http://localhost:4502/content/poc/us/en/test/jcr:content/root/responsivegrid/carousel/card0.model.js....

Inside crx/de, the cards node is created with the correct authoring value but on a refresh of AEM authoring env the authoring data is lost, but the cards node is still inside crx/de with all the values.

I have looked at all examples related to components inside components but couldn't find the right solution.

Can anyone please help.

[mahi1729]

I am not sure if you found a solution for this. Panel based container components are not feasible directly with SPA 2.0. I provided a fix by exposing getChildComponents method from the 2.x editable components and waiting for PR to be merged.

In the interim you can have a workaround, but does require some mimimal code duplication.

1. Instead of using MapTo from React Editable Components, import it from @adobe/aem-spa-component-mapping and also import ComponentMapping also from this package
2. In your App.js or index.js wherever you are assigning mode.json response to page component , add 1 more prop componentMapping where you pass the imported ComponentMapping (mentioned in prev step)
3. As you are managing MapTo from your own import instead of MapTo from EditableComponents, manually mapto Responsivegrid also as it is the only mapto that happens internally within Editablecomponents lib, and since you are taking over, that will no longer have effect, and you need to do explicitly
4. Now using the PR below I shared, copy the method getChildComponents method and call it inside your Carousel or Tabs or Accordion kind of custom container components, and you will have all the editable children as array from this method, and render them wherever you need unlike ResponsiveGrid or Container where everything will render from top to bottom.

Looking for some support from Adobe's team.

https://github.com/adobe/aem-react-editable-components/pull/197 

@arunpatidar @kautuk_sahni - Please see if you can get assistance on these PRs. Once merged I can create a blog post on creating panel containers using SPA 2.0