Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

SPA React - including an editable SPA component inside another SPA component

Avatar

Level 2

Hi everyone

 

I am working on an AEM SSR SPA project and want to create a component which will include another editable component into it. Specifically the requirements are to create a table component and add an editable Text component into every cell. The Text component is a SPA component. The problem is that i can't edit the Text component separately when adding it in the Table component. Is this possible for SPA components?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Yes, you can achieve this via Responsive Container by adding Text components inside cells. But that way, you should be able to add text component through authoring. It looks like it is already present & populated right now.

 

Reference : https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/s... 

View solution in original post

7 Replies

Avatar

Level 2

Use this sidebar and choose the component you want to edit.

 

Screen Shot 2022-06-15 at 7.20.21 pm.png

Avatar

Level 2

The problem is not selecting the component. The problem is that my Text component when included in the Table component is not editable. Following screenshot shows what we want to do.

Mhatri_0-1655285431472.png

 

And inside the React Table component we are adding the React Text component like that


Mhatri_2-1655285594935.png

 

Essentially we are trying to simulate a functionality similar to data-sly-resource to include the Text component in the Table component. The number of Text component included is dynamic depending on the number of rows and columns configured in the Table component dialog.

Avatar

Community Advisor

Hi @Mhatri ,

 

This can be done if you include a parsys in your table cells. This will enable you to drag and drop other components into your cells and edit them as well.

 

 

Avatar

Level 2

Can this be done by just using the ResponsiveGrid from @adobe/aem-react-editable-components in the Table component or do i need to create a separate component for the cells that inherits the Layout container or has 'new' node?

 

Avatar

Correct answer by
Community Advisor

Yes, you can achieve this via Responsive Container by adding Text components inside cells. But that way, you should be able to add text component through authoring. It looks like it is already present & populated right now.

 

Reference : https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/s... 

Avatar

Level 2

Thank you @Anmol_Bhardwaj . Can this approach work for non fixed components? The table is not a fixed component on the page.