Expand my Community achievements bar.

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

How to bind AEM component to another using SPA. (data-sly-resource in the traditional way)

Avatar

Level 3

Hi Everyone.

I'm working with SPA in AEM, I have a question on how to embed another component into an AEM component using SPA React.

In the traditional way, I can use data-sly-resource to implement it.

Thanks, guys

luongpham1994_0-1690186383455.png

 

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @luongpham1994, Please check the pull request https://github.com/MahediSabuj/aem-react-spa/pull/11 

- Extend Container core component in the Header Sling Model

- Add List and Button component in the component _cq_template

- Include the component in the React using this.childComponents[0], this.childComponents[1], ...

Author View:Screenshot 2023-07-27 at 3.48.02 PM.png

View solution in original post

5 Replies

Avatar

Level 3

Hi @Mahedi_Sabuj , Thanks for your response.

I just read the article you posted above and still be not sure how to embed another component into a parent component.

In my case, I have a header component that includes a button component and a list component like this image.

luongpham1994_0-1690344833177.png

 

Avatar

Correct answer by
Community Advisor

Hi @luongpham1994, Please check the pull request https://github.com/MahediSabuj/aem-react-spa/pull/11 

- Extend Container core component in the Header Sling Model

- Add List and Button component in the component _cq_template

- Include the component in the React using this.childComponents[0], this.childComponents[1], ...

Author View:Screenshot 2023-07-27 at 3.48.02 PM.png

Avatar

Level 1

Hi @Mahedi_Sabuj ,

 

I have followed same process for Teaser component and getting bellow error, can you please check and guide me.

 

SwapnilDesai_0-1724243362055.png