Hello. Same as the title. I have a requirement to add a child component to be added inside another component without using layout container using React. The child component should be editable and act as an independent component. How can implement this? Is there any documentation for the same?
Topics help categorize Community content and increase your ability to discover relevant content.
This is mostly to align with a modular design.
For example, if I want to have a combination of text & image component, I want a parent component which includes editable text & editable image components in it. Similar to data-sly-resource in HTL.
As per your requirement above, you have a requirement to add a child component to be added inside another component without using layout container using React
Meaning you want to have a child component always available within the container component (via React) and that child component should be editable component right?
To add a child component inside another component without using a layout container in React, you can try these steps:
We tried this but the child component is not editable. The dialog of the component is unavailable.
Assuming you are still using aem-react-editable-components v1.x, here is an example of how it can be done.
Steps outside React code:
1. Assume that you have a card component with card title , image and text, but you want both of them editable
2. As you want one of them to be a parent , lets assume you build card component and extend container component (this is optional but doesnt harm), and mark it as cq:isContainer to true as part of component creation in CRX. Add child nodes using cq:template and include node names as image and text and set their resource types of image and text component accordingly
3. Create a sling model for this component but implement ContainerExporter instead of ComponentExporter. Using LayoutContainer/ResponsiveGrid implementation as reference to return children. However since the design is fixed, always expect children components names to be image and text, and obtain the child resources using these names for generating the output for getExportedItems
4. Now drag and drop this newly built component into a page, and confirm that sling model has card model with :items with child items image and text
For the React code:
1. First create Image and Text components and use MapTo to associate resource types
2. Create Card component and MapTo associated resource type
3. Now have the card component extend Container component (available in aem-react-editable-components v1.x), as this inheritance exposes a getter method childComponents i.e. this.childComponents which is an array of child components that are readily made editable since they are coming from OOTB Container component.
Make sure editConfigs are set properly and this will ensure image and text components empty placeholders will be rendered. We used this approach to render panel based components like Tabs, Carousel, etc. You can also refer to @adobe/aem-core-wcm-components-react-spa if you can interpret the overall code - https://github.com/adobe/aem-react-core-wcm-components-spa/blob/master/src/container/tabs/v1/TabsV1....
Hope this explanation helps.