DocumentaciónAEMTutoriales de AEMTutorial de AEM sin encabezado

Dynamic routes and editable components

Last update: Tue Apr 28 2026 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Se aplica a:
  • Experience Manager 6.5
  • Experience Manager as a Cloud Service

Creado para:

  • Principiante
  • Desarrollador
IMPORTANT
El editor de SPA ha quedado obsoleto para nuevos proyectos. Sigue siendo compatible con Adobe para los proyectos existentes, pero no debe utilizarse para nuevos proyectos. Los editores preferidos para administrar contenido en AEM ahora son:

In this chapter, we enable two dynamic Adventure Detail routes to support editable components; Bali Surf Camp and Beervana in Portland.

Dynamic routes and editable components

The Adventure Detail SPA route is defined as /adventure/:slug where slug is a unique identifier property on the Adventure Content Fragment.

Map the SPA URLs to AEM Pages

In the previous two chapters, we mapped editable component content from the SPA's Home view to corresponding Remote SPA root page in AEM at /content/wknd-app/us/en/.

Defining mapping for editable components for the SPA's dynamic routes is similar however we must come up 1:1 mapping scheme between instances of the route and AEM pages.

In this tutorial, we take the name of the WKND Adventure Content Fragment, which is the last segment of the path, and map it to a simple path under /content/wknd-app/us/en/adventure.

Remote SPA route
AEM page path
/
/content/wknd-app/us/en/home
/adventure/bali-surf-camp
/content/wknd-app/us/en/home/adventure/bali-surf-camp
/adventure/beervana-portland
/content/wknd-app/us/en/home/adventure/beervana-in-portland

So, based on this mapping we must create two new AEM pages at:

  • /content/wknd-app/us/en/home/adventure/bali-surf-camp
  • /content/wknd-app/us/en/home/adventure/beervana-in-portland

Remote SPA mapping

The mapping for requests leaving the Remote SPA are configured via the setupProxy configuration done in Bootstrap the SPA.

SPA Editor mapping

The mapping for SPA requests when the SPA is opened via AEM SPA Editor are configured via Sling Mappings configuration done in Configure AEM.

Create content pages in AEM

First, create the intermediary adventure Page segment:

  1. Log in to AEM Author

  2. Navigate to Sites > WKND App > us > en > WKND App Home Page

    1. This AEM page is mapped as the root of the SPA, so this is where we begin building out the AEM page structure for other SPA routes.

  3. Tap Create and select Page

  4. Select the Remote SPA Page template, and tap Next

  5. Fill out the Page Properties

    1. Title: Adventure
    2. Name: adventure
      1. This value defines the AEM page's URL, and therefore must match the SPA' route segment.

  6. Tap Done

Then, create the AEM pages that correspond to each of the SPA's URLs that require editable areas.

  1. Navigate into the new Adventure page in the Site Admin

  2. Tap Create and select Page

  3. Select the Remote SPA Page template, and tap Next

  4. Fill out the Page Properties

    1. Title: Bali Surf Camp
    2. Name: bali-surf-camp
      1. This value defines the AEM page's URL, and therefore must match the SPA' route's last segment

  5. Tap Done

  6. Repeat the steps 3-6 to create the Beervana in Portland page, with:

    1. Title: Beervana in Portland
    2. Name: beervana-in-portland
      1. This value defines the AEM page's URL, and therefore must match the SPA' route's last segment

These two AEM pages hold the respective-authored content for their matching SPA routes. If other SPA routes require authoring, new AEM Pages must be created at their SPA's URL under the Remote SPA page's root page (/content/wknd-app/us/en/home) in AEM.

Update the WKND App

Vamos a colocar el componente <ResponsiveGrid...> creado en el último capítulo, en nuestro componente de SPA AdventureDetail, creando un contenedor editable.

Colocar el componente de la SPA de ResponsiveGrid

Al colocar <ResponsiveGrid...> en el componente AdventureDetail, se crea un contenedor editable en esa ruta. El truco se debe a que varias rutas utilizan el componente AdventureDetail para representarse, debemos ajustar dinámicamente el atributo <ResponsiveGrid...>'s pagePath. Se debe derivar pagePath para que apunte a la página de AEM correspondiente, en función de la aventura que muestre la instancia de la ruta.

  1. Abrir y editar react-app-/src/components/AdventureDetail.js

  2. Importe el componente ResponsiveGrid y colóquelo sobre el componente <h2>Itinerary</h2>.

  3. Establezca los atributos siguientes en el componente <ResponsiveGrid...>. Tenga en cuenta que el atributo pagePath agrega el elemento slug actual que se asigna a la página de aventura según la asignación definida anteriormente.

    1. pagePath = '/content/wknd-app/us/en/home/adventure/${slug}'
    2. itemPath = 'root/responsivegrid'

    Esto indica al componente ResponsiveGrid que recupere su contenido del recurso de AEM:

    1. /content/wknd-app/us/en/home/adventure/${slug}/jcr:content/root/responsivegrid

Actualice AdventureDetail.js con las líneas siguientes:

...
import { ResponsiveGrid } from '@adobe/aem-react-editable-components';
...

function AdventureDetailRender(props) {
    ...
    // Get the slug from the React route parameter, this will be used to specify the AEM Page to store/read editable content from
    const { slug } = useParams();

    return(
        ...
        // Pass the slug in
        function AdventureDetailRender({ title, primaryImage, activity, adventureType, tripLength,
                groupSize, difficulty, price, description, itinerary, references, slug }) {
            ...
            return (
                ...
                <ResponsiveGrid
                    pagePath={`/content/wknd-app/us/en/home/adventure/${slug}`}
                    itemPath="root/responsivegrid"/>

                <h2>Itinerary</h2>
                ...
            )
        }
    )
}

El archivo AdventureDetail.js debe tener el siguiente aspecto:

AdventureDetail.js

Crear el contenedor en AEM

Con <ResponsiveGrid...> en su lugar y su pagePath establecido dinámicamente en función de la aventura que se está representando, intentamos crear contenido en él.

  1. Iniciar sesión en AEM Author

  2. Vaya a Sitios > Aplicación WKND > us > en

  3. Editar la página de inicio de la aplicación WKND

    1. Vaya a la ruta Bali Surf Camp en el SPA para editarla

  4. Seleccione Vista previa en el selector de modo en la parte superior derecha

  5. Toca la tarjeta Bali Surf Camp en el SPA para navegar hasta su ruta

  6. Seleccione Editar del selector de modo

  7. Busque el área editable Contenedor de diseño justo encima del Itinerario

  8. Abra la barra lateral del editor de páginas y seleccione la vista Componentes

  9. Arrastre algunos de los componentes habilitados al contenedor de diseño

    1. Imagen
    2. Texto
    3. Título

    And create some promotional marketing material. It could look something like this:

    Bali Adventure Detail Authoring

  10. Preview your changes in AEM Page Editor

  11. Refresh the WKND App running locally on http://localhost:3000, navigate to the Bali Surf Camp route to see the authored changes!

    Remote SPA Bali

When navigating to an adventure detail route that does not have a mapped AEM Page, there is no authoring ability on that route instance. To enable authoring on these pages, simply make an AEM Page with the matching name under the Adventure page!

Enhorabuena.

¡Enhorabuena! You've added authoring ability to dynamic routes in the SPA!

  • Added the AEM React Editable Component's ResponsiveGrid component to a dynamic route
  • Created AEM pages to supporting authoring of two specific routes in the SPA (Bali Surf Camp and Beervana in Portland)
  • Authored content on the dynamic Bali Surf Camp route!

You've now completed exploring the first steps of how AEM SPA Editor can be used to add specific editable areas to a Remote SPA!

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4