Authoring Content Fragment

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

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

  • 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 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 Cloud Configuration use the path finder to select the My Project configuration. The value should be /conf/my-project.

    Set Cloud Config

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

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

    Allowed content Fragment Models

    These policies will be inherited by any sub-folders automatically and can be overriden. Note that 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

Next several Content Fragments will be 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 new 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 new Person fragment.

  6. Next, repeat the steps to create a new 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 new Team fragment.

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

    New 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

  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

    You can also create new 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

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, you just authored multiple Content Fragments and created a variation.

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.

On this page