Author component inside pure React component | Community
Skip to main content
A
alvaroalves
May 22, 2020
Solved

Author component inside pure React component

  • May 22, 2020
  • 1 reply
  • 4400 views

Hi,

 

I have recently begun implementing a project using AEM 6.5 and React. Since this integration is fairly recent, and vastly different from our previous experiences with AEM, we followed the documentation and the example project closely to grasp the methodology of leveraging AEMs functionality with React.

 

Still, after successfully experimenting implementing core components, building our own custom authored components and pure React components, we reached a standstill trying to integrate an authored component inside a pure React component.

 

The use case is as follows:

  1. You have some component that contains other components
  2. Most of these components are pure business components, so no need for authoring capabilities in them
  3. One of this business components should contain an authored component (or a parsys so we can inject any component)

 

How is it possible to use this component inside React, that is, how can we fetch the props that come in the model.json?

 

We find it rather limiting that such use cases, that are very common, don't have a straightforward, so we are reaching out so we can figure out how to mitigate this issue.

 

Thanks for your help.

 

 

Best regards,

Álvaro Alves

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by viveksachdeva

    We had same struggle when started working on AEM + React. Some of the pain points:

    - Container components --> Include Parsys/Layout Grid within a component for complex components like -- Tab, Accordion, etc

    - Experience Fragment --> OOTB experience fragment doesn't allow authoring of React Components

     

    Without these features, the dialogs becomes quite messy and not really flexible/reusable. Form my learnings, here is what you can try for container components:

    •  If your parent component doesn't have any configuration/authoring options : This one is slightly easier. In component JS, extend ResponsiveGrid and include childComponents. Here is how it will look like:
    class <YourContainer> extends ResponsiveGrid { render() { return ( <div> {super.childComponents} {super.placeholderComponent} </div> ) } }

    This should take care of giving you a parsys so you can drop any component within container. Maybe use it for Fixed Column Control Configurations if needed.

     

    • When you have authorable options in parent component. More often than not, you would need field for container. For that, in addition to the JS change above, you have to change the way ComponentExporter is written. Instead of using ComponentExporter interface, extend ResponsiveGrid class. So it will look something like:
    public class <YourContainer> extends ResponsiveGrid { static final String RESOURCE_TYPE = "<your-component-reource-type>"; @ValueMapValue private String <containerProp1>; @ValueMapValue private String <containerProp2>; }

     

    Note : It is not advisable to extend ResponsiveGrid. So you will see warnings in Sonar tests if you are using AMS.  

     

    I had to write a blog with details on it but not able to get to it 😄 Hope this one helps!! 🙂

    1 reply

    viveksachdeva
    Community Advisor
    viveksachdevaCommunity AdvisorAccepted solution
    Community Advisor
    May 23, 2020

    We had same struggle when started working on AEM + React. Some of the pain points:

    - Container components --> Include Parsys/Layout Grid within a component for complex components like -- Tab, Accordion, etc

    - Experience Fragment --> OOTB experience fragment doesn't allow authoring of React Components

     

    Without these features, the dialogs becomes quite messy and not really flexible/reusable. Form my learnings, here is what you can try for container components:

    •  If your parent component doesn't have any configuration/authoring options : This one is slightly easier. In component JS, extend ResponsiveGrid and include childComponents. Here is how it will look like:
    class <YourContainer> extends ResponsiveGrid { render() { return ( <div> {super.childComponents} {super.placeholderComponent} </div> ) } }

    This should take care of giving you a parsys so you can drop any component within container. Maybe use it for Fixed Column Control Configurations if needed.

     

    • When you have authorable options in parent component. More often than not, you would need field for container. For that, in addition to the JS change above, you have to change the way ComponentExporter is written. Instead of using ComponentExporter interface, extend ResponsiveGrid class. So it will look something like:
    public class <YourContainer> extends ResponsiveGrid { static final String RESOURCE_TYPE = "<your-component-reource-type>"; @ValueMapValue private String <containerProp1>; @ValueMapValue private String <containerProp2>; }

     

    Note : It is not advisable to extend ResponsiveGrid. So you will see warnings in Sonar tests if you are using AMS.  

     

    I had to write a blog with details on it but not able to get to it 😄 Hope this one helps!! 🙂

      A
      alvaroalvesAuthor
      May 27, 2020
      Thanks for your help!
      Terms & ConditionsAccessibility statement

      Loading footer...