Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Can we allow multiple component inside a SPA component build in React ?

Avatar

Level 1

Hello everyone!

 

In my local, I'm utilizing a SPA react component. I received a request for a bring option to allow multiple components inside SPA react components like Tab and Accordion.

 

  1. Is it possible to use the Tab and Accordion components feature within the SPA component?
  2. Is it the SPA React component or an AEM standard component that I will be permitted to use inside it?

 

Thank you.

1 Accepted Solution

Avatar

Correct answer by
Level 7

You can include a component inside another component within SPA, but, that must be done through code.

As AEM already provides a parsys functionality for the same, we can achieve this relatively easily through AEM component.

 

Inside your AEM component's HTML(which would be importing the SPA component), just add a parsys and in the template policy only allow Tab & Accordion for it.

Also, if you need it to be dependent on a option which is controlled by authoring, just add a sly-test on the parsys rendering.

View solution in original post

2 Replies

Avatar

Community Advisor

Hi @Kaibalya_123 ,

 

The answer is totally subjective to requirement.

 

Best way to manage this is to create atomic and composite components.

 

For instance,
Atomic components can be - image, form fields

Composite components - Image card (image + heading) by using atomic components.

 

Also refer this repo : https://github.com/adobe/aem-react-core-wcm-components-spa/blob/master/README.md

 

Hope this helps, thanks.

Avatar

Correct answer by
Level 7

You can include a component inside another component within SPA, but, that must be done through code.

As AEM already provides a parsys functionality for the same, we can achieve this relatively easily through AEM component.

 

Inside your AEM component's HTML(which would be importing the SPA component), just add a parsys and in the template policy only allow Tab & Accordion for it.

Also, if you need it to be dependent on a option which is controlled by authoring, just add a sly-test on the parsys rendering.