core

Integration with AEM

EditableComponent

Wrapper component to enable AEM authoring and content fetch for a React component.

Sample

Existing simple React component:

const Text = (props) => <div>{props.text}</div>

To make this editable on AEM and fetch content to be rendered on AEM :

1. Create a config object as illustrated in the wknd sample.

const TextEditConfig = {    
  emptyLabel:  'Text',
  isEmpty: () => {},
  resourceType: "wknd-app/components/text"
};

where emptyLabel is the label to be displayed for empty overlay in AEM, isEmpty the method to check if no content is present and empty overlay is needed, and resourceType the resourcetype of the component on AEM.

resourceType in config is essential for supporting virtual component usecases.

2. Create an editable version of the component using the EditableComponent wrapper and passing in the config.

export const AEMText = (props) => (
    <EditableComponent 
      config={TextEditConfig} 
      {...props}>
        <Text />
    </EditableComponent>
);

3. Use this component -

• By passing in the appropriate props if using it as a standalone component within your SPA

<AEMText 
  pagePath='/content/wknd-app/us/en/home'
  itemPath='root/responsivegrid/text />

OR

• Map to the appropriate resource type if using as part of a container

MapTo('wknd-app/components/text')(AEMText);