Defining Content Fragment Models

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

In this chapter two simple models will be created, Team and Person. The Team data model has name, short name and description and references the Person data model, which has fullname, 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 new 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 new project configuration

A project configuration contains all of the Content Fragment models associated with a particular project and provides a means of organizing models. At least one project must be created before creating new 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.

  4. In the resulting dialog enter:

    • Title*: My Project
    • Name*: my-project (prefer to use all lowercase using hyphens to separate words. This string will influence the unique GraphQL endpoint that client applications will 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 new 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 upper right corner to bring up the Create Model wizard.

  4. For Model Title enter: Person and tap Create.

    Tap Open in the resulting dialog, to open the newly created 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 will be 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 will restrict 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 a 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 new model for a Team, which is the data model for a team of people. The Team model will reference 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. For Model Title 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 will ensure that only lowercase alphanumeric values and dashes between 5 and 40 characters can be entered.

    The shortName property will provide us a way to query an individual team based on a shortened path. The Unique setting ensures that the value will always be 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 will create and edit a new Content Fragment based on a Content Fragment Model. You will also learn how to create variations of Content Fragments.

On this page