## Content Objective - Understand the AEM SPA React component flow - Create a dialog for author input - Write a Sling Model with JSON exporter - Map the AEM component in the React app - Deploy and validate the component in AEM ## Introduction Adobe Experience Manager (AEM) supports React components through the SPA Editor. This means you can build authorable React components that content editors configure in AEM while React renders the final experience. The core idea is: - AEM holds the component structure and authored content - Sling Models expose the data as JSON - React maps the JSON `:type` to a component and renders it ## Step 1: Create a Dialog Start by creating the AEM dialog for your Text component. This is the author-facing form that captures content. Create a new component folder under: `/apps/your-project/components/text` Add a `cq:dialog` node and define the dialog fields. Example dialog XML: ```xml ``` This dialog allows authors to enter text, enable shortening, and configure read-more options. ## Step 2: Write the Sling Model The Sling Model exports authored values to JSON for React. Create a Java model under your core bundle, for example: `/apps/your-project/core/model/text` Example interface: ```java @ConsumerType public interface TextModel extends Text { String getShortEnabled(); String getNumberOfLines(); String getMoreLink(); String getLessLink(); String getClassName(); } ``` Example implementation: ```java @Model( adaptables = { SlingHttpServletRequest.class }, adapters = { TextModel.class, ComponentExporter.class }, resourceType = { TextModelImpl.RESOURCE_TYPE }, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL ) @Exporter(name = ExporterConstants.SLING_MODEL_EXPORTER_NAME, extensions = ExporterConstants.SLING_MODEL_EXTENSION) public class TextModelImpl implements TextModel { public static final String RESOURCE_TYPE = "yourproject/components/text/v1/text"; @Self @Via(type = ResourceSuperType.class) @Delegate(types = Text.class) private Text text; @ValueMapValue private String shortEnabled; @ValueMapValue private String numberOfLines; @ValueMapValue private String moreLink; @ValueMapValue private String lessLink; @Override public String getShortEnabled() { return shortEnabled; } @Override public String getNumberOfLines() { return numberOfLines; } @Override public String getMoreLink() { return moreLink; } @Override public String getLessLink() { return lessLink; } @Override public String getExportedType() { return RESOURCE_TYPE; } } ``` ## Important: `@Exporter` and `getExportedType()` When using AEM SPA React components: - `@Exporter` converts the Sling Model into JSON. - `extensions = ExporterConstants.SLING_MODEL_EXTENSION` creates `.model.json` output. - `getExportedType()` sets the JSON `:type` value. React uses that `:type` to decide which component should render the data. ## Step 3: Generate the JSON After deploying the Sling Model, open the page model JSON to verify the output: `http://localhost:4502/content/your-site/page.model.json` Look for your Text component’s JSON block. It should include: - authored values such as `text`, `shortEnabled`, `numberOfLines`, `moreLink`, `lessLink` - the exported `:type` field Example JSON snippet: ```json ":items": { "text_367608878": { "text": "

This is text component

\r\n", "shortEnabled": "true", "numberOfLines": "6", "moreLink": "read more", "lessLink": "read less", ":type": "yourproject/components/text/v1/text" } }, ":itemsOrder": ["text_367608878"], ":type": "wcm/foundation/components/responsivegrid" ``` ## Step 4: Map the Component in React Next, connect the AEM component type to your React component in `ui.frontend`. Create the React component, for example: `ui.frontend/apps/global/src/components/atoms/Text/Text.tsx` Example React code: ```tsx import React, { useState, useEffect } from 'react'; export const TextEditConfig = { emptyLabel: 'Text', isEmpty: (props: any) => !props?.text?.trim(), }; interface TextProps { text?: string; shortEnabled?: string; numberOfLines?: string; moreLink?: string; lessLink?: string; } const Text: React.FC = ({ text, shortEnabled, numberOfLines, moreLink, lessLink }) => { const [isMoreVisible, setIsMoreVisible] = useState(true); useEffect(() => { if (shortEnabled === 'true') { document.querySelectorAll('p').forEach((paraTag) => { const el = paraTag as HTMLElement; el.style.overflow = 'hidden'; el.style.display = '-webkit-box'; el.style.webkitBoxOrient = 'vertical'; el.style.webkitLineClamp = numberOfLines || ''; }); } }, [numberOfLines, shortEnabled]); const toggleReadMore = () => { document.querySelectorAll('p').forEach((paraTag) => { const el = paraTag as HTMLElement; if (isMoreVisible) { el.style.overflow = ''; el.style.display = ''; el.style.webkitBoxOrient = ''; el.style.webkitLineClamp = ''; } else { el.style.overflow = 'hidden'; el.style.display = '-webkit-box'; el.style.webkitBoxOrient = 'vertical'; el.style.webkitLineClamp = numberOfLines || ''; } }); setIsMoreVisible(!isMoreVisible); }; if (!text) return null; return (

{shortEnabled === 'true' && ( )}

); }; export default Text; ``` Then map the React component to the AEM resource type: ```tsx import Text, { TextEditConfig } from './atoms/Text/Text'; import { MapTo } from '@adobe/aem-react-editable-components'; import { mappingComponent } from './mapping-component'; MapTo('yourproject/components/text/v1/text')( mappingComponent(TextEditConfig, Text) ); ``` This binding tells React to render your `Text` component whenever AEM sends JSON with `:type` equal to `yourproject/components/text/v1/text`. ## Step 5: Deploy and Author Deploy the backend and frontend code so AEM can recognize the new component. If you use local AEM packages: ```bash mvn clean install -PautoInstallSinglePackage ``` If your frontend app is separate, build it too: ```bash npm run build ``` Then author the component in AEM and confirm it renders in the SPA Editor. ## Summary Building an AEM React component requires three connected pieces: - a dialog for author input - a Sling Model exporter for JSON - a React component mapping for `:type` When these are wired together, your React component becomes authorable inside AEM and renders with live content from the CMS. If you want, I can also create a companion guide showing the exact folder structure for `ui.apps`, `core`, and `ui.frontend` in an AEM SPA project.

AEM - Adobe Experience Manager

Real-World Scenarios in AEM