DocumentationAEMAEM TutorialsAEM Headless Tutorial

Authoring Content Fragment authoring-content-fragments

Last update: Tue May 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Beginner
  • Developer

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

Prerequisites prerequisites

This is a multi-part tutorial and it is assumed that the steps outlined in the Defining Content Fragment Models have been completed.

Objectives objectives

  • Author a Content Fragment based on a Content Fragment Model
  • Create a Content Fragment variation

Create an Asset Folder

Content Fragments are stored in folders in AEM Assets. To create Content Fragments from the models created in the previous chapter, a folder must be created to store them. A configuration is required on the folder to enable creation of fragments from specific models.

  1. From the AEM Start screen, navigate to Assets > Files.

    Navigate to assets files

  2. Tap Create in the top-right corner and tap Folder. In the resulting dialog, enter:

    • Title*: My Project
    • Name: my-project

    Create Folder dialog

  3. Select the My Folder folder and tap Properties.

    Open folder properties

  4. Tap the Cloud Services tab. Under the Cloud Configuration tab, use the path finder to select the My Project configuration. The value should be /conf/my-project.

    Set Cloud Config

    Setting this property enables Content Fragments to be created using the models created in the previous chapter.

  5. Tap the Policies tab, under the Allowed Content Fragment Models field use the path finder to select the Person and Team model created earlier.

    Allowed content Fragment Models

    These policies are inherited by any subfolders automatically and can be overridden. You can also allow models by tags or enable models from other project configurations. This mechanism provides a powerful way to manage your content hierarchy.

  6. Tap Save & Close to save the changes to the folder properties.

  7. Navigate inside the My Project folder.

  8. Create another folder with the following values:

    • Title*: English
    • Name: en

    A best practice is to set up projects for multilingual support. See the following docs page for more information.

Create a Content Fragment create-content-fragment

TIP
For local AEM SDK users: Utilize the AEM Assets UI to create and author Content Fragments, instead of the Content Fragments UI outlined below. For detailed instructions, refer to the AEM documentation.

Next several Content Fragments are created based on the Team and Person models.

  1. From the AEM Start Screen, tap Content Fragments to open up the Content Fragments UI.

    Content Fragment UI

  2. In the left-hand rail, expand My Project and tap English.

  3. Tap Create to bring up the New Content Fragment dialog and enter the following values:

    • Location: /content/dam/my-project/en
    • Content Fragment model: Person
    • Title: John Doe
    • Name: john-doe

    New Content Fragment

  4. Tap Create.

  5. Repeat the above steps to create a fragment representing Alison Smith:

    • Location: /content/dam/my-project/en
    • Content Fragment model: Person
    • Title: Alison Smith
    • Name: alison-smith

    Tap Create to create the Person fragment.

  6. Next, repeat the steps to create a Team fragment representing Team Alpha:

    • Location: /content/dam/my-project/en
    • Content Fragment model: Team
    • Title: Team Alpha
    • Name: team-alpha

    Tap Create to create the Team fragment.

  7. There should be three Content Fragments beneath My Project > English:

    New Content Fragments

Edit Person Content Fragments edit-person-content-fragments

Next populate the newly created fragments with data.

  1. Tap the checkbox next to John Doe and tap Open.

    Open Content Fragment

  2. The Content Fragment Editor contains a form based on the Content Fragment model. Fill out the various fields to add content to the John Doe fragment. For Profile Picture, upload your own image to AEM Assets.

    Content Fragment editor

  3. Tap Save & Close to save the changes to the John Doe fragment.

  4. Return to the Content Fragment UI and open the Alison Smith file for editing.

  5. Repeat the above steps to populate the Alison Smith fragment with content.

Edit Team Content Fragment edit-team-content-fragment

  1. Open the Team Alpha Content Fragment using the Content Fragment UI.

  2. Fill out the fields for Title, Short Name, and Description.

  3. Select the John Doe and Alison Smith Content Fragments to populate the Team Members field:

    Set Team members

    note note
    NOTE
    You can also create Content Fragments in-line by using the New Content Fragment button.

  4. Tap Save & Close to save the changes to the Team Alpha fragment.

Publish Content Fragments

TIP
For local AEM SDK users: Utilize the AEM Assets UI to publish Content Fragments, instead of the Content Fragments UI outlined below. For detailed instructions, refer to the AEM documentation.

Upon review and verification, publish the authored Content Fragments

  1. From the AEM Start Screen, tap Content Fragments to open up the Content Fragments UI.

  2. In the left-hand rail, expand My Project and tap English.

  3. Tap the checkbox next to the content fragments and tap Publish.
    Publish Content Fragment

Congratulations! congratulations

Congratulations, you authored multiple Content Fragments and created a variation.

Next Steps next-steps

In the next chapter, Explore GraphQL APIs, you will explore AEM’s GraphQL APIs using the built-in GrapiQL tool. Learn how AEM automatically generates a GraphQL schema based on a Content Fragment model. You will experiment constructing basic queries using the GraphQL syntax.

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