DocumentationAEMAEM TutorialsAEM Headless Tutorial

Dynamic routes and editable components

Last update: Tue May 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Beginner
  • Developer

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

    • 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

    • Title: Adventure
    • Name: adventure
      • 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

    • Title: Bali Surf Camp
    • Name: bali-surf-camp
      • 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:

    • Title: Beervana in Portland
    • Name: beervana-in-portland
      • 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

Let’s place the <ResponsiveGrid...> component created in the last chapter, into our AdventureDetail SPA component, creating an editable container.

Place the ResponsiveGrid SPA component

Placing the <ResponsiveGrid...> in the AdventureDetail component creates an editable container in that route. The trick is because multiple routes use the AdventureDetail component to render, we must dynamically adjust the <ResponsiveGrid...>'s pagePath attribute. The pagePath must be derived to point to the corresponding AEM page, based on the adventure the route’s instance displays.

  1. Open and edit react-app-/src/components/AdventureDetail.js

  2. Import the ResponsiveGrid component and place it above the <h2>Itinerary</h2> component.

  3. Set the following attributes on the <ResponsiveGrid...> component. Note the pagePath attribute adds the current slug which maps to the adventure page per the mapping defined above.

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

    This instructs the ResponsiveGrid component to retrieve its content from the AEM resource:

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

Update AdventureDetail.js with the following lines:

...
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>
                ...
            )
        }
    )
}

The AdventureDetail.js file should look like:

AdventureDetail.js

Author the Container in AEM

With the <ResponsiveGrid...> in place, and its pagePath dynamically set based on the adventure being rendered, we try authoring content in it.

  1. Log in to AEM Author

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

  3. Edit the WKND App Home Page page

    • Navigate to the Bali Surf Camp route in the SPA to edit it

  4. Select Preview from the mode-selector in the top-right

  5. Tap on the Bali Surf Camp card in the SPA to navigate to its route

  6. Select Edit from the mode-selector

  7. Locate the Layout Container editable area right above the Itinerary

  8. Open the Page Editor’s side bar, and select the Components view

  9. Drag some of the enabled components into the Layout Container

    • Image
    • Text
    • Title

    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!

Congratulations!

Congratulations! 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