Dynamic routes and editable components

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

The Adventure Detail SPA route is defined as /adventure:path where path is the path to the WKND Adventure (Content Fragment) to display details about.

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’ll 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.

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 <AEMResponsiveGrid...> component created in the last chapter, into our AdventureDetail SPA component, creating an editable container.

Place the AEMResponsiveGrid SPA component

Placing the <AEMResponsiveGrid...> 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 <AEMResponsiveGrid...>'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. Add the following line before AdventureDetail(..)'s second return(..) statement, that derives the adventure name from the content fragment path.

   ...
   // Get the last segment of the Adventure Content Fragment path to used to generate the pagePath for the AEMResponsiveGrid
   const adventureName = adventureData._path.split('/').pop();
   ...
   

3. Import the AEMResponsiveGrid component and place it above the <h2>Itinerary</h2> component.

4. Set the following attributes on the <AEMResponsiveGrid...> component

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

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

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

Update AdventureDetail.js with the following lines:

...
import AEMResponsiveGrid from '../components/aem/AEMResponsiveGrid';
...

function AdventureDetail(props) {
    ...
    // Get the last segment of the Adventure Content Fragment path to used to generate the pagePath for the AEMResponsiveGrid
    const adventureName = adventureData._path.split('/').pop();

    return(
        ...
        <AEMResponsiveGrid 
            pagePath={`/content/wknd-app/us/en/home/adventure/${adventureName}`}
            itemPath="root/responsivegrid"/>
            
        <h2>Itinerary</h2>
        ...
    )
}

The AdventureDetail.js file should look like:

Author the Container in AEM

With the <AEMResponsiveGrid...> 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:

   

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!

    

When navigating to an adventure detail route that does not have a mapped AEM Page, there will be 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!