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/: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.
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:
-
Log in to AEM Author
-
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.
-
Tap Create and select Page
-
Select the Remote SPA Page template, and tap Next
-
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.
-
Tap Done
Then, create the AEM pages that correspond to each of the SPA’s URLs that require editable areas.
-
Navigate into the new Adventure page in the Site Admin
-
Tap Create and select Page
-
Select the Remote SPA Page template, and tap Next
-
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
-
Tap Done
-
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.
-
Open and edit
react-app-/src/components/AdventureDetail.js -
Import the
ResponsiveGridcomponent and place it above the<h2>Itinerary</h2>component. -
Set the following attributes on the
<ResponsiveGrid...>component. Note thepagePathattribute adds the currentslugwhich 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
ResponsiveGridcomponent 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:
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.
-
Log in to AEM Author
-
Navigate to Sites > WKND App > us > en
-
Edit the WKND App Home Page page
- Navigate to the Bali Surf Camp route in the SPA to edit it
-
Select Preview from the mode-selector in the top-right
-
Tap on the Bali Surf Camp card in the SPA to navigate to its route
-
Select Edit from the mode-selector
-
Locate the Layout Container editable area right above the Itinerary
-
Open the Page Editor’s side bar, and select the Components view
-
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:
-
Preview your changes in AEM Page Editor
-
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 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!