We know that AEM Content Fragments helps to describe and manage structured content, where in Content Fragment Model helps to Define the structure of Content Fragment
Steps to work with AEM Content Fragment Models
Enable use of content fragment models in configuration manager.
Apply the configuration to Assets folder.
Creating a Content Fragment Model.
Update the definition of Content Fragment Model.
Publish it.
Delete it.
In this video we will see how to work with Content Fragment Model in detail.
Hope the Content Fragment and related changes are published already.
Now let us enable CORS, Anonymous access in publish environment.
Step 1: Add CORS details:
Since we are going to access the Content Fragment from external application, we may get CORS error(Cross-origin resource sharing). To enable the CORS access, we need to make some changes in AEM publish instance.
Go to AEM system > Console > ConfigManager > Apache Sling Main Servlet
Click on (+) icon and add new property for 'Additional response headers' as 'Access-Control-Allow-Origin=http://localhost:5000'
[AEM CORS ISSUE RESOLVED] - click on image to see it big
The new Content Fragment Model is now anonymously accessible on AEM Publish.
Now go back to PWA home page and click on the button, you can see that data is retrieved from AEM as shown below.
[Content Fragment Output to third party PWA application]
We now created a sample PWA and pulled content from AEM.
If you face any issue and need help in running this demo, please let me know through the comments.
[This tutorial works for versions AEM 6.2, AEM 6.3, AEM 6.4]
Generally AEM provides default content fragments template called 'Simple Fragment' [at location: /libs/settings/dam/cfm/templates]. But we may need to customize or create new templates based on our needs.
Here I will explain how we can create custom content fragment templates. Where to create custom content fragment templates?
There are multiple places we can create custom content fragment templates.
Config: When we work with folder specific templates, use this location.
Apps: Usually general purpose templates are created here.
Content Fragment Templates Path
Let us create a template under /apps for general purpose use.
Steps
Traverse to /apps/settings/dam inside CRXDE lite.
Create a node of type cq:Page and name it 'cfm'
Under the newly created cfm node, create another node of type cq:Page and name it 'templates'.
Under templates node create a node of type cq:PageContent and name it 'jcr:content'.
Under jcr:content create a new boolean property called 'mergeList' with value 'true', this step ensures our new template is available in addition to /lib content fragment templates for authoring.
Now do 'Save All'.
Our crx looks like this now
Custom Content Fragment creation
We have the structure ready now, we will add properties for the template now by referring the /lib/ 'Simple Fragment' template.
Traverse to /libs/settings/dam/cfm/templates and copy 'simple' node.
Paste it on our structure under /apps/settings/dam/cfm/templates.
Now do a 'Save All'.
We now have below structure in crx.
We have a template similar to 'Simple Fragment' now. Let us customize the template for our need.
We will create title, description as elements and 2 variations for desktop and mobile.
Let us start by renaming 'simple' node to 'custom'
Select “jcr:content” under 'custom', Update the value of 'jcr:description' to 'A custom project specific fragment'.
Update value of 'jcr:title' to 'Custom Fragment'
Now rename 'main' under elements to 'title', update its 'jcr:title' to 'Title' and name to 'title'
Next create a new element – description by copying the main and renaming. Update the 'jcr:title' to 'Description' and name to 'description'.
Now select node 'jcr:content' under node 'custom' and create a new node of type 'nt:unstructured' and name it 'variations'.
Create a new node for 'desktop' of type nt:unstructured under variations; add properties 'jcr:title' 'Desktop' and name 'desktop'.
Create a new node for 'mobile' of type nt:unstructured under variations; add properties 'jcr:title' 'Mobile' and name 'mobile'.
Now click on 'Save All'.
A new custom template is created now, which is ready for authoring.
Authoring Custom Content Fragment
Now go to AEM Assets >Files , click on 'Create' from top right hand corner and select 'Content Fragment'.
Here you can see the 'Custom Fragment'
Custom Fragment AEM 6.4
Select the 'Custom Fragment' and click 'next'.
Enter the values for title, description and click 'Create' then click on 'Open'.
Here you can see that a new Content Fragment is available with 'title', 'description'.
Similarly we can see that variations for 'desktop' and mobile also available for authoring.
In my upcoming blog, I will give a walkthrough on using Content Fragment with Progressive Web Applications.
