Defining Content Fragment Models

In this chapter, learn how to model content and build a schema with Content Fragment Models. You learn about the different data types that can be used to define a schema as part of the model.

We create two simple models, Team and Person. The Team data model has name, short name, and description and references the Person data model, which has full name, bio details, profile picture, and occupations list.

You are also welcome to create your own model following the basic steps and tweak the respective steps like GraphQL queries, and React App code or simply follow the steps outlined in these chapters.

Prerequisites

This is a multi-part tutorial and it is assumed that an AEM author environment is available.

Objectives

  • Create a Content Fragment Model.
  • Identify available data types and validation options for building models.
  • Understand how the Content Fragment Model defines both the data schema and the authoring template for a Content Fragment.

Create a project configuration

A project configuration contains all Content Fragment models associated with a particular project and provides a means of organizing models. At least one project must be created before creating Content Fragment Model.

  1. Login to the AEM Author environment (ex. https://author-pYYYY-eXXXX.adobeaemcloud.com/)

  2. From the AEM Start screen, navigate to Tools > General > Configuration Browser.

    Navigate to Configuration Browser

  3. Click Create, in the top-right corner

  4. In the resulting dialog, enter:

    • Title*: My Project
    • Name*: my-project (prefer to use all lowercase using hyphens to separate words. This string influences the unique GraphQL endpoint that client applications perform requests against.)
    • Check Content Fragment Models
    • Check GraphQL Persistent Queries

    My Project Configuration

Create Content Fragment Models

Next, create two models for a Team and a Person.

Create the Person Model

Create a model for a Person, which is the data model representing a person that is part of a team.

  1. From the AEM Start screen, navigate to Tools > General > Content Fragment Models.

    Navigate to Content Fragment Models

  2. Navigate into the My Project folder.

  3. Tap Create in the top-right corner to bring up the Create Model wizard.

  4. In Model Title field, enter Person and tap Create. In the resulting dialog, tap Open, to build the model.

  5. Drag and Drop a Single line text element on to the main panel. Enter the following properties on the Properties tab:

    • Field Label: Full Name
    • Property Name: fullName
    • Check Required

    Full Name property field

    The Property Name defines the name of the property that is persisted to AEM. The Property Name also defines the key name for this property as part of the data schema. This key is used when the Content Fragment data is exposed via GraphQL APIs.

  6. Tap the Data Types tab and drag and drop a Multi line text field beneath the Full Name field. Enter the following properties:

    • Field Label: Biography
    • Property Name: biographyText
    • Default Type: Rich Text

  7. Click the Data Types tab and drag and drop a Content Reference field. Enter the following properties:

    • Field Label: Profile Picture
    • Property Name: profilePicture
    • Root Path: /content/dam

    When configuring the Root Path, you can click the folder icon to bring up a modal to select the path. This restricts which folders authors can use to populate the path. /content/dam is the root in which all AEM Assets (images, videos, other Content Fragments) are stored.

  8. Add a validation to the Picture Reference so that only content types of Images can be used to populate the field.

    Restrict to Images

  9. Click the Data Types tab and drag and drop an Enumeration data type beneath the Picture Reference field. Enter the following properties:

    • Render As: Checkboxes
    • Field Label: Occupation
    • Property Name: occupation

  10. Add several Options using the Add an option button. Use the same value for Option Label and Option Value:

    Artist, Influencer, Photographer, Traveler, Writer, YouTuber

  11. The final Person model should look like the following:

    Final Person Model

  12. Click Save to save the changes.

Create the Team Model

Create a model for a Team, which is the data model for a team of people. The Team model references the Person model to represent the members of the team.

  1. In the My Project folder, tap Create in the upper right corner to bring up the Create Model wizard.

  2. In Model Title field, enter Team and tap Create.

    Tap Open in the resulting dialog, to open the newly created model.

  3. Drag and Drop a Single line text element on to the main panel. Enter the following properties on the Properties tab:

    • Field Label: Title
    • Property Name: title
    • Check Required

  4. Tap the Data Types tab and drag and Drop a Single line text element on to the main panel. Enter the following properties on the Properties tab:

    • Field Label: Short Name
    • Property Name: shortName
    • Check Required
    • Check Unique
    • Under, Validation Type > choose Custom
    • Under, Custom Validation Regex > enter ^[a-z0-9\-_]{5,40}$ - this ensures that only lowercase alphanumeric values and dashes from 5 through 40 characters can be entered.

    The shortName property provides us a way to query an individual team based on a shortened path. The Unique setting ensures that the value is always unique per Content Fragment of this model.

  5. Tap the Data Types tab and drag and drop a Multi line text field beneath the Short Name field. Enter the following properties:

    • Field Label: Description
    • Property Name: description
    • Default Type: Rich Text

  6. Click the Data Types tab and drag and drop a Fragment Reference field. Enter the following properties:

    • Render As: Multiple Field
    • Field Label: Team Members
    • Property Name: teamMembers
    • Allowed Content Fragment Models: Use the folder icon to select the Person model.

  7. The final Team model should look like the following:

    Final Team Model

  8. Click Save to save the changes.

  9. You should now have two models to work from:

    Two Models

Publish Project Configuration & Content Fragment Models

Upon review and verification, publish the Project Configuration & Content Fragment Model

  1. From the AEM Start screen, navigate to Tools > General > Configuration Browser.

  2. Tap the checkbox next to My Project and tap Publish

    Publish Project Config

  3. From the AEM Start screen, navigate to Tools > General > Content Fragment Models.

  4. Navigate into the My Project folder.

  5. Tap Person and Team models and tap Publish

    Publish Content Fragment Models

Congratulations!

Congratulations, you just created your first Content Fragment Models!

Next Steps

In the next chapter, Authoring Content Fragment Models, you create and edit a new Content Fragment based on a Content Fragment Model. You also learn how to create variations of Content Fragments.

On this page