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.
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
.
Remote SPA route | AEM page path |
---|---|
/ | /content/wknd-app/us/en/home |
/adventure:/content/dam/wknd/en/adventures/bali-surf-camp/bali-surf-camp | /content/wknd-app/us/en/home/adventure/bali-surf-camp |
/adventure:/content/dam/wknd/en/adventures/beervana-portland/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
The mapping for requests leaving the Remote SPA are configured via the setupProxy
configuration done in Bootstrap the SPA.
The mapping for SPA requests when the SPA is opened via AEM SPA Editor are configured via Sling Mappings configuration done in Configure AEM.
First, create the intermediary adventure
Page segment:
adventure
Then, create the AEM pages that correspond to each of the SPA’s URLs that require editable areas.
bali-surf-camp
beervana-in-portland
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.
Let’s place the <AEMResponsiveGrid...>
component created in the last chapter, into our AdventureDetail
SPA component, creating an editable container.
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.
Open and edit react-app/src/components/AdventureDetail.js
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();
...
Import the AEMResponsiveGrid
component and place it above the <h2>Itinerary</h2>
component.
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:
With the <AEMResponsiveGrid...>
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
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
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 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! You’ve added authoring ability to dynamic routes in the SPA!
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!
Stay tuned! This tutorial will be expanded to cover Adobe’s best practices and recommendations on how to deploy the SPA Editor solution to AEM as a Cloud Service, and production environments.