Chapter 2 - Using Content Fragment Models
AEM Content Fragment Models define content schemas which can be used to templatize the creation of raw content by AEM authors. This approach is similar to scaffolding or forms-based authoring. The key concept with Content Fragments, is the authored content is presentation-agnostic, meaning its intended for multi-channel use where the consuming application, be that AEM, a single page application, or a Mobile app, controls how the content is displayed to the user.
The primary concern of the Content Fragment is to ensure:
- The correct content is collected from the author
- The content can be exposed in a structured, well-understood format to consuming applications.
This chapter covers enabling and defining Content Fragment Models used to define a normalized data structure and authoring interface for modeling and creating “Events”.
Enable Content Fragment Models
Content Fragment Models must be enabled via AEM’s Configuration Browser.
If Content Fragment Models are not enabled for a configuration, the Create > Content Fragment button will not appear for the relevant AEM configuration.
/conf. Typically AEM configurations correlate with a particular Web site managed in AEM Sites or a business unit responsible for a sub-set of content (assets, pages, etc.) in AEM.cq:conf property on that content hierarchy. (This is achieved for the WKND Mobile configuration in Step 5 below).global configuration is used, the configuration applies to all content, and cq:conf does not need to be set.-
Log in to AEM Author as a user with appropriate permissions to modify the relevant configuration.
- For this tutorial, the admin user can be used.
-
Navigate to Tool > General > Configuration Browser
-
Tap the folder icon next to WKND Mobile to select, and then tap the Edit button in the top left.
-
Select Content Fragment Models, and tap Save & Close in the top right.
This enables of Content Fragment Models on Asset Folder content trees that have the WKND Mobile configuration applied.
note note NOTE This configuration change is not reversible from the AEM Configuration Web UI. To undo this configuration: code language-none 1. Open [CRXDE Lite](http://localhost:4502/crx/de) 1. Navigate to `/conf/wknd-mobile/settings/dam/cfm` 1. Delete the `models` nodeAny existing Content Fragment Models created under this configuration is deleted as well as their definitions are stored under /conf/wknd-mobile/settings/dam/cfm/models. -
Apply the WKND Mobile configuration to the WKND Mobile Assets Folder to allow Content Fragments from Content Fragment Models to be created within that Assets folder hierarchy:
- Navigate to AEM > Assets > Files
- Select the WKND Mobile folder
- Tap the Properties button in the top action bar to open Folder Properties
- In Folder Properties, tap the Cloud Services tab
- Verify the Cloud Configuration field is set to /conf/wknd-mobile
- Tap Save & Close in the upper-right to persist changes
Understanding the Content Fragment Model to Create
Before defining our Content Fragment model, let’s review the experience we’ll be driving to ensure we are capturing all the necessary data points. For this, we’ll review out Mobile applications design and map the design elements to content-to-collect.
We can break out the data points that define an Event as follows:
Armed with the mapping we can define out Content Fragment that are used to collect and ultimately expose the Event data.
Creating the Content Fragment Model
- Navigate to Tools > General > Content Fragment Models.
- Tap the WKND Mobile folder to open.
- Tap Create to open the Content Fragment Model creation wizard.
- Enter Event as the Model Title (description is optional) and tap Create to save.
Defining the structure of the Content Fragment Model
-
Navigate to Tools > General > Content Fragment Models > WKND.
-
Select the Event Content Fragment Model and tap Edit in the top action bar.
-
From the Data Types tab on the right, drag the Single line text input into the left drop-zone to define the Question field.
-
Ensure the new Single line text input is selected on the left, and the Properties tab is selected on the right. Populate the Properties fields as follows:
- Render As :
textfield - Field Label :
Event Title - Property Name :
eventTitle - Max Length : 25
- Required :
Yes
- Render As :
Repeat these steps using the input definitions defined below to create the rest of the Event Content Fragment Model.
Event Description
- Data Type :
Multi-line text - Field Label :
Event Description - Property Name :
eventDescription - Default Type :
Rich text
Event Date and Time
- Data Type :
Date and time - Field Label :
Event Date and Time - Property Name :
eventDateAndTime - Required :
Yes
Event Type
- Data Type :
Enumeration - Field Label :
Event Type - Property Name :
eventType - Options :
Art,Music,Performance,Photography
Ticket Price
- Data Type :
Number - Render As :
numberfield - Field Label :
Ticket Price - Property Name :
eventPrice - Type :
Integer - Required :
Yes
Event Image
- Data Type :
Content Reference - Render As :
contentreference - Field Label :
Event Image - Property Name :
eventImage - Root Path :
/content/dam/wknd-mobile/images - Required :
Yes
Venue Name
- Data Type :
Single-line text - Render As :
textfield - Field Label :
Venue Name - Property Name :
venueName - Max Length : 20
- Required :
Yes
Venue City
- Data Type :
Enumeration - Field Label :
Venue City - Property Name :
venueCity - Options :
Basel,London,Los Angeles,Paris,New York,Tokyo
After completing creating of the Content Fragment Model, you should end up with a definition that looks like:
Next step
Optionally, install the com.adobe.aem.guides.wknd-mobile.content.chapter-2.zip content package on AEM Author via AEM’s Package Manager. This package contains the configurations and content outlined in this part of the tutorial.