Experience League | Image

Building for the Modern Web with the Adobe Experience Manager SPA Editor

Table of Contents

  • Lab Overview
  • Lesson 0 - Code & Content Installation
  • Lesson 1 - SPA Editor Walkthrough
  • Lesson 2 - Modular Content using Content Fragments
  • Lesson 3 - Update Once, Deliver Everywhere

Lesson 0 - Code & Content Installation


  1. Install the pre-requisite code & content.
  2. Validate installed code & content.

Lesson Context

This lesson the intial code and for the remaining lessons. Most should already be installed and ready to execute; but validating its state is important to ensure remaining lessons are successful.

Exercise 0.1 - Install Initial Code & Content

Execute these commands to ensure that the code and content package are installed.

  1. Open the Terminal application

  2. Change the working directory to the summit-L784-aem folder:

$ cd ~/Desktop/Summit-2019/summit-784-aem/resources
  1. Install the AEM application code on both Author and Publish instances.
$ mvn -PautoInstallPackage clean install

$ mvn -PautoInstallPackagePublish clean install

Exercise 0.2 - Verify Deployment

Navigate to the CRX Package Manager and verify that all packages have been successfully installed.

  1. Navigate to http://localhost:4502/crx/packmgr/index.jsp.

  2. Verify the following packages exist.

Verify Packages

Next Lesson

At this point you are ready to start working on the exercises for the lab.

Lesson 1 - SPA Editor Walkthrough

Lesson Context

This lesson covers authoring initial and subsequent state content within the Single-Page Application (SPA) Editor.


Single-Page Application (SPA) - A single-page application (SPA) is a web application or web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server. This approach avoids interruption of the user experience between successive pages, making the application behave more like a desktop application. (https://en.wikipedia.org/wiki/Single-page_application)


We would like to edit some of the text and images within the SPA, both in the initial and subsequent states.

Exercise 1.1 - Editing text & image in the initial state

Let's take a look at the initial state of the SPA and see how authoring can be achieved.

1. Open the initial state ("Home") in the editor. Navigate to:


2. To edit the page, ensure that you are in the "Edit" mode.

Edit Mode

3. Click the inline editing icon of the text component and begin altering the text.

Inline Edit Text

4. Open the side bar, select the asset context & drag an image into an existing image component.

Update Image

You'll notice authoring the initial state of SPA is very similar to the way you would author a typical MPA.

Exercise 1.2 - Editing text in a subsequent state

Now let's take a look at authoring content within subsequent states of the SPA.

1. Switch to "Preview" mode within the Editor.

Preview Mode

2. Switch to a subsequent state by clicking one of the Event tiles.

Switch to Subsequent State

3. Switch back to "Edit" mode.

Switch to Back to Edit Mode

Notice that you are now authoring different content; however, the URL in the editor has not changed.

4. Edit text and/or image.

Edit Text on Subsequent State

Text Edited on Subsequent State

Make note of the changes you made here as we will verify these shortly.

5. Open the edited subsequent state ("Event") content from Sites.

Open the Sites menu by navigating to:


Navigate to WKND Events > Angular App > Home > Airplanes. (or whichever even you edited).

Open Subsequent State in Sites

6. Verify that your changes made in Step 4 are still present.

Verify Changes

Notice that the same content you edited in Step 4 is present, but the URL is different. This is due to the fact that while authoring separates the content out into pages, all of the content is actually part of a single application when published or previewed.

Next Lesson

Now let's take a look at how we can create modular content using Content Fragments.

Lesson 2 - Modular Content using Content Fragments

Lesson Context

This lesson covers authoring an Event Fragment (a component which renders WKND Event Content Fragments) as well as editing a Content Fragment Model and its associated Content Fragments.


We would like to structure our content fragments, author them, and render them in our SPA.

Exercise 2.1 - Add Event Fragment to the Page

In this exercise, we will take a look at how Content Fragments can added to / rendered on the page using the Event Fragment component.

Step 1 - Add the Event Fragment component to the page.

Open the initial state ("Home") of the SPA for editing.


TODO: Insert image of editor open with the sidebar expanded

Open the component browser context within the sidebar and drag an "Event Fragment" component to a layout container on the page.

Add Event Fragment

Step 2 - Configured the Event Fragment component.

Open the asset finder context within the sidebar. Select "Content Fragment" from the asset type filter. Drag a Content Fragment asset on to the "Event Fragment" component on the page.

Add Content Fragment to Event Fragment

Event Fragment Render

Note the name of the Content Fragment that you have selected as we will be modifying this asset in a later exercise.

Exercise 2.2 - View Event Content Fragment Model

In this exercise, we will take a look at how the model for the WKND Event Content Fragment is defined.

To view the WKND Event Content Fragment Model:

SHORTCUT: http://localhost:4502/mnt/overlay/dam/cfm/models/editor/content/editor.html/conf/wknd-events/settings/dam/cfm/models/wknd-event

Open the Main Menu

Start Menu

Navigate to "Tools" > "Assets" > "Content Fragment Models"

Navigate to Content Fragment Models

Click on the "WKND Events" folder

WKND Events Content Fragment Models

Select the "WKND Event" Content Fragment Model and click "Edit"

Edit Content Fragment Model

The "WKND Event" Content Fragment Model should now be open in the editor. In the editor, you will notice:

  1. A warning message stating that changes will affect existing Content Fragments created with this model.
  2. A form-like editor displaying the elements currently in the Content Fragment Model.
  3. A sidebar tab with "Data Types" available to be added to the Content Fragment Model.
  4. A sidebar tab with "Properties" associated with a selected element (in the Content Fragment Model).

View Content Fragment Model

View CFM Property Editor

Within this editor, new properties can be added to the Content Fragment Model and configured. In the next exercise, you will see how the Content Fragment Model drives the authoring experience for Content Fragments.

Exercise 2.3 - Edit the Content Fragment and View Results

In this exercise, we will take a look at how Content Fragments are edited and how this editing affect existing components / content.

Step 1 - Open the Content Fragment (from Exercise 2.1 - Step 2) for Editing

Open the Main Menu.

View Content Fragment Model

Navigate to "Navigation" > "Assets".

Navigate to Assets

Select "Files".

Select Files

Click "WKND Events".

Click WKND Events Folder

Click "Events".

Click Events Folder

Select the Content Fragment you added to your Event Fragment (Exercise 2.1 - Step 2) & click "Edit".

Edit Event CF

Step 3 - Edit the Content Fragment

Update the event description in the editor and click save.

Edit and Save CF

Notice that the editor contains all of the elements that we saw in the Content Fragment Model we looked at in Exercise 2.2.

Step 4 - View the Updated Content on the Page.

Open the initial state ("Home") of the SPA for editing, again.


Take a look at the Event Fragment component that you configured in Exercise 2.1. You will notice that the changes you made in Step 3 have been propagated to the page.

View Updated Event

Next Lesson

Now let's take a look at how we can harness the power of Content Fragments to deliver a unified message everywhere.

Lesson 3 - Update Once, Deliver Everywhere

Lesson Context

This lesson shows how Content Fragments can be leveraged to provide updates in multiple locations just by updating a single asset. Easily allowing authors to provide a more unified message across channels & sites.


We would like to create an "Events" page, in our SPA, that renders new Events as their added without author intervention.

Exercise 3.1 - Create an Events Page

In this exercise, we will create an "Events" page to showcase all of our events (configured as Content Fragments).

Open the Sites console


Navigate to "WKND Events" > "Angular App" > "Home". Click "Create" and select "Page".

Create Event Page

Select the "WKND Event Page" template and click "Next".

Select Event Page Template

Title the page "Events" and click "Create".

Enter Page Title

Click "Open" in the modal.

Click Open

Open the sidebar, select the component context & drag an "Event List" component to the page.

Add Event List Component

Select the "Event List" component and click the configure icon.

Open Event List Configuration

Configure the "Event List" component with the following configurations:

  • Content Fragment Folder: /content/dam/wknd-events/events

Configure Event List Component

Configure Event List Component - DAM Path

Event List Rendered

Exercise 3.2 - Create a New Event Content Fragment

In this exercise, we will create a new Event (Content Fragment) and see how it is pulled in to the "Events" page automatically.

Open the Assets console


Navigate to "WKND Events" > "Events" and create a new Content Fragment.

Navigate to WKND Events

Navigate to Events

Create New Content Fragment

Select the WKND Event template. Click "Next".

Select Content Fragment Template

Enter a title for your event. Click "Create".

Enter Title for Content Fragment

Open the Content Fragment.

Click Open

Enter the details for your event. Click "Save"

Enter Event Info

Enter Event Info - Continued

Select Event Image

Open your Events page in the editor.


Event List Rendered

Notice that your new Event (Content Fragment) has been automatically pulled into the page.

Exercise 3.3 - View the Assets API Events JSON (Optional)

In this bonus exercise, we will look at the Asset API that provides the Events JSON to the Event Fragment component for rendering.

For this exercise, you will want to download a browser extension which presents JSON to you in a more legible manner. There are plenty of extensions that do this, JSONView is a favorite for Chrome.

Once you have your browser extension install, open the following link:


Event JSON

You will notice that the JSON contains the following:

  • An "entities" array, where an entity is the data for a single Event Content Fragment.
  • An "links" array, where there's an API reference to this JSON and the parent directory's JSON.
  • A "class" array, where the asset type is described.
  • An "actions" array, where available actions pertinent to this asset are describes.
  • A "properties" object, where the results of this API call are described (i.e. name, number of assets returned).