DocumentationAEMAEM TutorialsAEM Headless Tutorial

Create Content Fragment Models

Last update: Sun Mar 23 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Applies to:
  • Experience Manager as a Cloud Service
  • Topics:
  • Content Fragments
  • GraphQL API

CREATED FOR:

  • Intermediate
  • Developer

This chapter walks through the steps to create five Content Fragment Models:

  • Contact Info
  • Address
  • Person
  • Location
  • Team

Content fragment models allow defining relationships between content types and persisting such relationships as schemas. Use nested fragment references, various content data types, and the tab type for visual content organization. More advanced data types such as tab placeholders, fragment references, JSON objects, and the date-and-time data type.

This chapter also covers how to enhance validation rules for content references such as images.

Prerequisites

This is an advanced tutorial. Before proceeding with this chapter, please ensure that you have completed the quick setup. Make sure that you have also read through the previous overview chapter for more information on the setup for the advanced tutorial.

Objectives

  • Create Content Fragment Models.
  • Add tab placeholders, date and time, JSON objects, fragment references, and content references to the models.
  • Add validation to content references.

Content Fragment Model Overview

The following video provides a brief introduction to Content Fragment Models and how they are used in this tutorial.

video poster

https://video.tv.adobe.com/v/340037?quality=12&learn=on

Transcript
Hello, and welcome to this overview on the advanced concepts for content fragment models. In this video, we will walk you through adding some advanced data types to a content fragment model. In the basic multi-step tutorial, we covered how content fragments allow you to prepare content for use in multiple locations in AEM, and how content fragment models act as schemas for these fragments. In this video, we will create a new content fragment model for a location on the Weekend demo site. We will add new data types, such as tab placeholders, fragment references, and JSON objects. To get started, navigate to the Tools section in AEM and select Content Fragment Models. Next, we’ll open the Weekend site page, and then select Create. Enter a model title of Location, then select Create once more. Select Open to edit the newly created model. The first data type to add to the content fragment model is a single line text field. Enter Name under the field label. Head back to the Data types tab, add a multi-line text field, and call it Description. Leave all the defaults as they are. For more detailed information on single and multi-line text data types, check out the basic multi-step tutorial. Next, we’ll be nesting fragment references within the location model. Fragment references retrieve data by referencing one or more content fragments. This helps build a layered and complex, yet seamless content structure. This data type also allows authors to edit the referenced fragments directly, or create a new fragment based on the particular model. Navigate back to the Data types tab, then add a fragment reference field under Description and label it Contact Info. In the Properties tab, select the folder icon under Allowed Content Fragment Models, and choose the Contact Info model we created earlier. Below this, add a content reference field and label it Location Image. Select the root path by selecting on the folder icon. The root path should be slash content slash dam slash weekend. Since we only want to accept image types in this field, select Image from the list of accepted content types. Let’s also add some validation to the images. For file size, select less than or equal to, then in the fields that appear, type in 5 for maximum and select megabytes for the unit. Next, select Maximum width and enter 500 pixels, then select Maximum height and again enter 500 pixels. Users can now only upload images that are within these constraints that we just set. The final advanced field type we’ll add is a JSON object. From the Data Types tab, add the JSON object field and label it Weather by Season. Let’s add a description so it’s clear what the user should do with this field. The JSON object allows the user to use data in JSON format either created by the user or copied and pasted from another service. The final fields we want to add are for the location address. We will add a fragment reference field to make up the address. Label the field as Address and under Allowed Content Fragment Models, select the address model. The final step is to add tab placeholders to our model. Tab placeholders help divide your content into sections in the Content Fragment Editor, similar to having multiple internet browser tabs. Tabs allow the user to enter content into one section of the content fragment at a time and allows for a clear division of content. Add one tab placeholder at the top of the model and label it Location Details. Add a second tab placeholder above the street address and call it Location Address. We now have two clear sections of content, Location Details and the Location Address. We have now added all the necessary new data types. Select Save to confirm your changes and close the Content Fragment Model Editor. This video will give you an overview of some of the advanced data types we will be working with such as nested fragment references, JSON objects, and tab places. In the next video in this series, you will learn how to request data from content fragments authored from these models using persisted, parameterized GraphQL queries. Continue reading this guide for more details on building the rest of the content fragment models that will be used in the next chapter on authoring content fragments. Thanks for watching!

Create Content Fragment Models

Let’s create some Content Fragment Models for the WKND app. If you require a basic introduction to creating Content Fragment Models, please see the appropriate chapter in the basic tutorial.

  1. Navigate to Tools > General > Content Fragment Models.

    Content Fragment Models path

  2. Select WKND Shared to view the list of existing Content Fragment Models for the site.

Contact Info Model

Next, create a model that contains the contact information for a person or location.

  1. Select Create in the top-right corner.

  2. Give the model a title of “Contact Info”, then select Create. In the success modal that appears, select Open to edit the newly created model.

  3. Start by dragging a Single line text field onto the model. Give it a Field Label of “Phone” in the Properties tab. The property name is automatically filled in as phone. Select the checkbox to make the field Required.

  4. Navigate to the Data Types tab, then add another Single line text field below the “Phone” field. Give it a Field Label of “Email” and also set it to Required.

Adobe Experience Manager comes with some built-in validation methods. These validation methods allow you to add governance rules to specific fields in your Content Fragment Models. In this case, let’s add a validation rule to ensure that users can only enter valid email addresses when filling out this field. Under the Validation Type dropdown, select E-mail.

Your completed content fragment model should look like this:

Contact Info Model path

Once done, select Save to confirm your changes and close the Content Fragment Model Editor.

Address Model

Next, create a model for an address.

  1. From the WKND Shared, select Create from the top-right corner.

  2. Enter a title of “Address” and then select Create. In the success modal that appears, select Open to edit the newly created model.

  3. Drag and drop a Single line text field onto the model and give it a Field Label of “Street Address.” The property name is then filled in as streetAddress. Select the Required checkbox.

  4. Repeat the above steps and add four more “Single Line text” fields to the model. Use the following labels:

    • City
    • State
    • ZIP Code
    • Country
  5. Select Save to save the changes to the Address model.

    The completed “Address” fragment model should look like this:
    Address model

Person Model

Next, create a model that contains information about a person.

  1. In the top-right corner, select Create.

  2. Give the model a title of “Person”, then select Create. In the success modal that appears, select Open to edit the newly created model.

  3. Start by dragging a Single line text field onto the model. Give it a Field Label of “Full Name”. The property name is automatically filled in as fullName. Select the checkbox to make the field Required.

    Full name options

  4. Content Fragment Models can be referred to in other models. Navigate to the Data Types tab, then drag and drop the Fragment Reference field and give it a label of “Contact Info”.

  5. In the Properties tab, under the Allowed Content Fragment Models field, select the folder icon and then choose the Contact Info fragment model created earlier.

  6. Add a Content Reference field and give it a Field Label of “Profile Picture.” Select the folder icon under Root Path to open the path selection modal. Select a root path by selecting content > Assets, then selecting the checkbox for WKND Shared. Use the Select button at the top right to save the path. The final text path should read /content/dam/wknd-shared.

    Content reference root path

  7. Under Accept only specified content types, select “Image”.

    Profile picture options

  8. To limit the image file size and dimensions, let’s look at some validation options for the content reference field.

    Under Accept only specified file size, select “Less than or equal to”, and additional fields appear below.
    Accept only specified file size

  9. For Max, enter “5”, and for Select Unit, select “Megabytes (MB)”. This validation only allows images that are of the specified size to be chosen.

  10. Under Accept only specified image width, select “Maximum Width”. In the Max (pixels) field that appears, enter “10000”. Select the same options for Accept only a specified image height.

    These validations ensure that added images do not exceed the specified values. The validation rules should now look like this:

    Content reference validation rules

  11. Add a Multi line text field and give it a Field Label of “Biography”. Leave the Default Type dropdown as the default “Rich Text” option.

    Biography options

  12. Navigate to the Data Types tab, then drag an Enumeration field underneath “Biography”. Instead of the default Render As option, select Dropdown and give it a Field Label of “Instructor Experience Level”. Enter a selection of instructor experience level options such as Expert, Advanced, Intermediate.

  13. Next, drag another Enumeration field under “Instructor Experience Level” and choose “checkboxes” under the Render As option. Give it a Field Label of “Skills”. Enter different skills such as Rock Climbing, Surfing, Cycling, Skiing, and Backpacking. The option label and option value should match as below:

    Skills Enumeration

  14. Lastly, create an “Administrator Details” field label using a Multi-line text field.

Select Save to confirm your changes and close the Content Fragment Model Editor.

Location Model

The next Content Fragment Model describes a physical location. This model uses tab placeholders. Tab placeholders help organize your data types in the model editor and content in the fragment editor respectively, by categorizing the content. Each placeholder creates a tab, similar to a tab in an internet browser, in the Content Fragment editor. The Location model should have two tabs: Location Details and Location Address.

  1. As previously, select Create to create another Content Fragment Model. For the Model Title, enter “Location.” Select Create followed by Open in the success modal that appears.

  2. Add a Tab Placeholder field to the model and label it “Location Details.”

  3. Drag and a drop a Single Line Text and label it “Name.” Below this field label, add a multi-line text field and label it “Description.”

  4. Next, add a Fragment Reference field and label it “Contact Info.” In the properties tab, under Allowed Content Fragment Models, select the Folder Icon and choose the “Contact Info” fragment model created earlier.

  5. Add a Content Reference field under “Contact Info”. Label it “Location Image”. The Root Path should be /content/dam/wknd-shared. Under Accept only specified content types, select “Image”.

  6. Let’s also add a JSON Object field under the “Location Image.” As this data type is flexible, it can be used to display any data you want to include in your content. In this case, the JSON Object is used to display information about the weather. Label the JSON Object “Weather by Season”. In the Properties tab, add a Description so it’s clear to the user what data should be entered here: “JSON data regarding the event location weather by season (Spring, Summer, Fall, Winter).”

    JSON Object options

  7. To create the Location Address tab, add a Tab Placeholder field to the model and label it “Location Address.”

  8. Drag and drop a Fragment Reference field and from the properties tab, label it as “Address”, and under Allowed Content Fragment Models, select the Address model.

  9. Select Save to confirm your changes and close the Content Fragment Model Editor. The completed Location model should appear as below:

    Content reference options

Team Model

Finally, create a model that describes a team of people.

  1. From the WKND Shared page, select Create to make another Content Fragment Model. For the Model Title, enter “Team.” As previously, select Create followed by Open in the success modal that appears.

  2. Add a Multi line text field to the form. Under Field Label, enter “Description”.

  3. Add a Date and Time field to the model and label it “Team Founding Date”. In this case, keep the default Type set to “Date”, but note that it is also possible to use “Date & Time” or “Time”.

    Date and time options

  4. Navigate to the Data Types tab. Below the “Team Founding Date”, add a Fragment Reference. In the Render As dropdown, select “multifield”. For Field Label, enter “Team Members”. This field links to the Person model created previously. Since the data type is a multi-field, multiple Person fragments can be added, enabling the creation of a team of people.

    Fragment reference options

  5. Under Allowed Content Fragment Models, use the folder icon to open the Select Path modal, then select the Person model. Use the Select button to save the path.

    Select Person model

  6. Select Save to confirm your changes and close the Content Fragment Model Editor.

Add Fragment References to the Adventure Model

Similar to how the Team model has a fragment reference to the Person model, the Team and Location models must be referenced from the Adventure model to display these new models in the WKND app.

  1. From the WKND Shared page, select the Adventure model, then select Edit from the top navigation.

    Adventure edit path

  2. At the bottom of the form, underneath “What to Bring”, add a Fragment Reference field. Enter a Field Label of “Location”. Under Allowed Content Fragment Models, select the Location model.

    Location fragment reference options

  3. Add one more Fragment Reference field and label it “Instructor Team”. Under Allowed Content Fragment Models, select the Team model.

    Team fragment reference options

  4. Add another Fragment Reference field and label it “Administrator.”

    Administrator fragment reference options

  5. Select Save to confirm your changes and close the Content Fragment Model Editor.

Best Practices

There are a few best practices related to creating Content Fragment Models:

  • Create models that map to UX components. For example, the WKND app has Content Fragment Models for adventures, articles, and location. You could also add headers, promotions, or disclaimers. Each of these examples makes up a specific UX component.

  • Create as few models as possible. Limiting the number of models allows you to maximize reuse and simplify content management.

  • Nest Content Fragment Models as deeply as needed but only as necessary. Recall that nesting is accomplished with fragment references or content references. Consider a maximum of five levels of nesting.

Congratulations!

Congratulations! You’ve now added tabs, used the date-and-time and JSON object data types, and learned more about fragment and content references. You’ve also added content reference validation rules.

Next Steps

The next chapter in this series will cover authoring content fragments from the models you created in this chapter. Learn how to use the data types introduced in this chapter and create folder policies to limit what Content Fragment Models can be created in an asset folder.

While it is optional for this tutorial, make sure to publish all content in real-world production situations. For a review of Author and Publish environments in AEM, refer to the
AEM Headless and GraphQL video series.

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4