Developing for Future Website Flexibility with AEM Content Fragments

Cristian Romero, January 11, 2022

A forward-thinking client was looking to future-proof their content management capabilities, seeking flexibility when it came to their AEM components. They wanted to be able to manage events on a calendar but also have the option to author additional event attributes later. They also wanted to create page-specific instructional walkthroughs for users that would contain different steps depending on the site page.

We always encourage clients to think ahead so that we build AEM site and content features that they can use long-term to improve their content creation capabilities so we welcomed this challenge. 

Though these two components sound very different, we were able to leverage one AEM feature to build both.

AEM Content Fragments

AEM Content Fragments allow authors to design, create, curate and publish page-independent content. They are created and managed as page-independent assets and allow them to prepare content ready for use in multiple locations and over multiple channels.

What makes Content Fragments incredibly versatile is that they can be delivered in JSON format using the Sling Model (JSON) export capabilities of AEM core components. This means a single Content Fragment can be leveraged to create multiple types of components where the authoring and data is agnostic to the way the component is implemented.

Below, I’ll demonstrate this by using Content Fragments to create the aforementioned Calendar and Walkthrough components.


The simplicity of the implementation model is another of the advantages of using Content Fragments to create AEM components. 

The overall implementation flow looks like this:

flow chart of data movement between each layer making from component to content fragment model

The Content Fragment Model defines the data that the authors input when creating Content Fragments. Once we create the Content Fragment Model, the authors can create new Content Fragments based on the model, authoring data for the component. Content Fragments are stored in Assets and should be managed like any other assets.

Content Fragment Model

AEM Assets Best Practice: Create a folder for each of the component types for which the author will create Content Fragments. This will keep the CF’s organized in the DAM. For example there will be a folder for events for our Calendar and a folder with Page Steps for our Walkthrough.AEM Content Fragment dialog

Content Fragment List

The Content Fragment List is an out-of-the-box (OOTB) component that will allow us to order, filter and select the information from Content Fragments. For our examples we are going to use it as is, but if alternative behavior is needed it can be easily extended.

In the Properties tab the author will first select the Content Fragment Model we previously created and the folder where all the Content Fragments that will be used in the component are located.

AEM Content Fragment List dialog, Properties tab

The Elements tab allows the authors to select what information will be displayed on the front-end.

AEM Content Fragment List dialog, elements tabThe Content Fragment List will be added inside our custom component, creating a node in the page that will pull the content through to the published page using the Sling Model export capabilities of AEM.

The custom AEM Component will include the Content Fragment List. Through the Sling Model get the information created by the authors, and filter by the Content Fragment List as a JSON. It’s in charge of presentation and interaction with the end user.


The basic structure of the component will looks like this:AEM component code structureOnce added to a page it creates the node cf_list inside the component.

aem node structure

Then we access the information by doing a GET request to resource/cf_list.model.json Where resource is the resource path and can be obtained using ${resource.path} in the Custom Component.

After this is just working in the presentation, for our examples we are using Vue.js and some third party libraries but you can use anything you want.

User Walkthrough Component

This component allows authors to give a certain page a Walkthrough when the user accesses the page for the first time.AEM Assets and sites data flowOnce the author adds the component to the page where they want to provide a walkthrough, they will need to select the User Walkthrough Step Content Fragment Model we created. Then in the list, select the fields they wish to show in the Walkthrough. 

User Walkthrough Step has a title, text, step number and alignment and the HTML element where the Walkthrough window will be shown.

We are loading IntroJs using some of the optimization strategies discussed in this article.

Calendar Component

This component allows the author to select a group of events to be displayed in an interactive Calendar.
AEM sites data flow to component

The Calendar UI is built using only Vue.JS and CSS. Once the author adds the component to the page, they need to select the Calendar Event Content Fragment Model we created. Then, in the list, select the fields they want to display in the Calendar.

Calendar Events have an Event Description, Event type, Date and a link.


Content Fragments allow for speedy and versatile development. Updating and maintaining the content is simple and straightforward. There is a high potential for development of customizations, but even using mostly OOTB elements, it is possible to achieve great results.

Do you have a similar business problem to solve? Or are you thinking about making some changes to your AEM implementation? 3|SHARE would love to help.  Contact us!

Image credit: Photo by Yan Krukov from Pexels

Topics: Development, Adobe, Content Fragments

Cristian Romero

Cristian Romero is a Senior Developer at 3|SHARE. The best thing about his job is the amazing work environment. Outside of work, he loves boardgames and enjoys teaching other people how to play modern boardgames. He may have a few friendships to restore after some difficult rounds of Monopoly!