Fetch Content Fragment using AEM Core Components

We have seen how to create a content fragment in the previous post.

Content Fragments can be rendered onto a page by below different ways:

1. Using AEM core components
2. Using Custom Sling Model
3. Using Servlet to access Content Fragment.

Let's see how to render Content Fragment using AEM Core Components.

Enable AEM core components

Create a new project called “aemquickstart” using Adobe’s project archetype. Below is a maven archetype command to use. This will generate a boilerplate project with the latest version of Core Components.

mvn -B archetype:generate 
 -D archetypeGroupId=com.adobe.granite.archetypes 
 -D archetypeArtifactId=aem-project-archetype 
 -D archetypeVersion=23 
 -D aemVersion=cloud 
 -D appTitle="AEM Quickstart" 
 -D appId="aemquickstart" 
 -D groupId="com.aemquickstart" 
 -D frontendModule=general 
 -D includeExamples=n

Run below maven command to install the package in AEM

mvn clean install -PautoInstallPackage

Content fragment and content fragment list core components under ui.apps sub module

• /aemquickstart/ui.apps/src/main/content/jcr_root/apps/aemquickstart/components/content/contentfragment
• /aemquickstart/ui.apps/src/main/content/jcr_root/apps/aemquickstart/components/content/contentfragmentlist

Let's add these components on to the page.

1. Go to AEM Start > Sites > aemquickstart > US > English
2. Click on the parsys
3. Click the plus icon
4. Select Content Fragment
5. Edit the content fragment
6. Select the "AEM Book" content fragment that we created in the previous post
7. Add Title, Description, Release Date and Image elements as shown below.
8. Save the dialog.

Now we can see the content fragment info on the page.