There are cases where during development we may need to setup https connection in our existing AEM instance.
By following procedure we can have both http and https on same AEM instance. This is very helpful while testing some of the AEM features which require SSL connections.
To start with, we need keys and certificates to configure SSL on AEM. We will use OpenSSL to set up keys and certificates. The method is tested on window, but should work on any other OS seamless way.
How to setup OpenSSL on Windows
Download OpenSSL from any URL - Ensure its relevant to your OS (including 86 Vs 64 Bit)
Unzip it.
Set the classpath
place the conf file in below path (Else you may get an error that openSSL conf cannot be found)
### Generate the SSL certificate and sign with the private key, will expire one year from now $ openssl x509 -req -days 365 -in localhost.csr -signkey localhostprivate.key -out localhost.crt
### Convert Private Key to DER format - SSL wizard requires key to be in DER format $ openssl pkcs8 -topk8 -inform PEM -outform DER -in localhostprivate.key -out localhostprivate.der -nocrypt
You will have the certificates now in local drive as shown below.
Use the SSL Wizard in AEM
Now login to AEM http://localhost:4502/aem/start.html
Tools > Security > SSL Configuration
For store credentials provide the Key store and Trust store password. [I have used admin for all, since its a localhost]
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.
Login to AEM, go to Assets > Files.
Let us create a folder now called 'My Samples' by clicking the create button.
Create CF Folder - click on it to see it big
Now go inside the folder and click on create > Content Fragment.
Then Select the Simple Fragment template. Enter title and description and then click on create.
Create Content Fragment AEM
In next dialog click on open and edit content fragment as shown below.
[Author CF]
To access the content fragment, we need to author it on a page. Let us author it on a sample we-retail page.
Now go to sites> we-retail > us >en > Men, open it for editing.
From component browser, drag and drop 'Content Fragment' component on the page.
[Author Content Fragment AEM 6.2 onwards
Click on Configure and add the newly created Content Fragment and save it.
[Authoring and landing]
We have the authored Content Fragment now. We can access it over the JSON Exporter API by invoking the '.model.json' in author instance, For me it was below URL.
[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.
An Experience Fragment is a set of content that grouped together forms an experience that should make sense on its own.
Experience Fragment : - is a part of an experience. - makes sense of its own. - has one or multiple components. - can be combined with other Experience Fragments. - can be reused, reordered and resized across pages. - can have different variations. - is based on a template with its own structure.
Click on image to see it big
Below given a video series which gives a walk through of AEM 6.4 Experience Fragments
AEM Core Components follow modern implementation patterns. There are two types of component patterns in AEM, General Component Pattern & Reusable Component Pattern
1. General Component Patterns
This set of patterns are recommended for any type of components(regardless whether the component is specific to a single project, or reused across multiple sites or projects).
a. Configurable Components
There are cases where we have a requirement of components which are having variation of similar elements. In such cases, it is recommended to have configurable components having dialogs with various options instead of creating multiple components.
b. Separation of Concerns
This patterns recommends the usage of separation of logic from markup.
- HTL can be used for markup which is more secure.
- SlingModels are the recommended option for Logic implementation
2. Reusable Component Patterns
These patterns are used for any kind of component, which are most suitable for components that are intended to be reused across multiple sites or projects(For eg. Core Components)
a. Pre-Configurable Capabilities
It is recommended to define the components/templates flexible as much as possible. Some examples could be using edit dialog (For Page authors), Design Dialog (For Template authors) and all these options are availabe under 'Policies' as part of editable templates.
b. Proxy Component Pattern
Here component inheritance is used as a proxy. Create second level components by referring the resourceSuperType property from core components.
Which offers more flexibility and avoid content refactoring if one site needs a different behavior for a component.
c. Component Versioning
Always introduce component versioning by adding a number in their resource type path, and in the fully qualified Java class names of their implementations, which will help keeping the components compatible over time. Useful when upgrade happens.
d. Model Interfaces
This pattern recommends the usage of HTL's data-sly-use instruction to point to a Java interface, while the Sling Model implementation is also registering itself to the resource type of the component.
When there is a requirement to redefine the implementation of a Sling Model or HTL markup of a component, this avoids complexity. Because they are loosely coupled.
Proxy Components are site-specific components which are inherited from core components, which define the desired component name and group to display for page authoring.
Proxy Components refer to a Core Component as their super-type.
These site-specific components are called proxy components, for the reason they don't need to contain anything; they just serve mostly to define the version of a component to use for the site. Infact, when customizing the Core Components, these proxy components play an essential role for markup and logic customization.
[Click on image to see it big]
Advantages of creating Proxy Components
Proxy components helps categorization of components in a reusable way.
Better seggregation: It is a good practice to have 'sling:resourceType' property pointing to site-specific components, instead of pointing to components that are shared by multiple sites.
This provide more flexibility and avoid content refactoring if one site needs a different behavior for a component.
Customization can then be achieved on the site-specific component and won't affect the other sites.
Proxy components can be entirely empty if they fully inherit the functionality, or they can redefine some aspects of the component.
AEM Core components are available from AEM 6.2. AEM 6.3 onwards Core Components were getting more stabilized. Now we have AEM 6.4 which has the more advanced Core components.
Core Components were introduced to provide robust and extensible base components, built on the latest technology and best practices, and adhering to accessibility guidelines.
Core Components leverage the latest technology to enable the creation of flexible, extensible, and feature-rich components to enable authors to easily create content.
AEM Core components are with HTML Template Language, or HTL, Touch UI dialogs and Sling Models, Secure, robust, version-able
There are 16 Core Components in AEM 6.4 at present (This count keep getting increased based on developer contrbutions in GitHub), which can be divided into two categories .
Page authorable components
-Breadcrumb
-Content Fragment
-List
-Navigation
-Page
-Quick Search
-Social Media Sharing
-Text
-Title
-Language Navigation
-Image
Form specific core components
-Form Hidden
-Form Options
-Form Text
-Form Button
-Form Container
When to Use the Core Components?
New Projects - New projects should always attempt to use Core Components.
Existing Projects - Recommendation is keep using the foundation components, unless a site or component refactoring is planned.
New Custom Components - Assess if an existing Core Component may be customized. If not, recommendation is to build a new custom component following the Component Guidelines.
Existing Custom Components - If your components work as expected, then keep them as they are.
If not, refer to "New Custom Components" above.
Foundation Component Support
Since the foundation components have served as a basis of so much project development over many versions, they will continue to be supported into the foreseeable future.
However, Adobe's development emphasis has shifted to the core components and new features will be added to them whereas only bug fixes will be made to the foundation components
Core Components Advantages
100% written in HTL.
Apache 2.0 License.
Allow versioning of components.
GitHub
latest features are supported, plus backward compatibility is also available.
I have given a step by step demo of content approval process in AEM 6.4 in the video. Here I will explains the steps involved in detail.
[Click on images to see them big]
There are 3 major steps involved in AEM content approval,
Creating a simple workflow model
Creating a content approval workflow based on the model created
Verify the workflow
User Creation
Before we start, we need a set of users to understand our Workflow process. For this , we will create 3 users called author, editor, legal.
Go to tools> Security > Users and create 3 users author, editor, legal. This is quite simple and direct step.
Steps for workflow creation
1) Creating a simple workflow model
- Go to Tools, Workflow, Models
- Select 'Create', then 'Create Model'.
- Then Add Workflow Model dialog appears. Enter the Title and Name, then select Done.
Newly created model is listed in the Workflow Models console.
- Select your new workflow, then click on Edit to open it for modification:
The new workflow will contain:
Flow Start
Step 1
Flow End
- Delete Step 1
- From the Workflow selection of the steps browser, drag a Participant Step onto the workflow and position it between Flow Start and Flow End.
- Open the properties by clicking on configure option
- In the Common tab enter Validate Content - for both the Title and Description.
- Open the User/Group tab:
- Select Editor for the User/Group field.
- Confirm the updates by selecting the tick mark.
- Drag an Or Split onto the workflow and position it between Validate Content and Flow End.
- Open the Or Split for configuration.
Configure:
Common: select 2 Branches
Branch 1: select Default Route. - This option will be selected by default when the user reviews the content.
Branch 2: ensure Default Route is not selected.
Confirm your updates to the OR Split.
- Drag a Participant Step to the left hand branch, open the properties, specify the following values, then confirm the changes:
Title: Reject Publish Request
User/Group: Author - (Editor will reject the publish and notify the author).
Now,
- Drag a Participant Step to the right hand branch,
- In the properties section, specify the following values, then confirm the changes:
Title: Approve for Legal review
User/Group: legal - (If editor is fine with the content, he asks the legal person to review for legal adherence).
- Drag an Or Split onto the workflow and position it between Validate Content and Flow End.
- Open the Or Split and make configurations as below.
Common: select 2 Branches
Branch 1: select Default Route.
Branch 2: ensure Default Route is not selected.
Confirm your updates to the OR Split.
- Drag a Participant Step to the left-hand branch, open the properties, specify the following values, then confirm the changes:
Title: Reject Publish Request
User/Group: Author - We will reject the publish and notify the author.
- Drag a Participant Step to the right-hand branch, open the properties, specify the following values, then confirm the changes:
Title: Publish Page as Requested
Process: select Activate Page. This process publishes the selected page to the publisher instances.
Now the workflow model looks like this.
Note: Remember to sync the workflow so that the latest changes will be always updated in run time.
2) Creating a content approval workflow based on the model created
- Now login as user 'author'
We have two options to trigger the content approval workflow.
a) Go to workflow model (http://localhost:(port)/libs/cq/workflow/admin/console/content/models.html) select, click on start workflow and specify the payload.
b) Go to sites> a project specific page. Select the page and click on 'Create workflow' from top left menu. Then in new window select the workflow model and provide a title. In next window click on 'create' so that the workflow will start.
3) Verify the workflow
- Now login as user 'editor' and go to inbox and open the message and complete the workflow. Editor will have options Approve for Legal review , Reject Publish Request
Now the workflow will be moved to legal person as per our workflow model definition,
- Login as legal, and from inbox he will have options like 'Reject Publish Request', 'Publish Page as Requested'. Complete the review and approve it. So that the page gets activated.
If any of the editor or legal person rejects, the payload goes back to author and asks for re-verification.
Below given a video recording of the above mentioned activity. Let me know if you face any issues through the comments section.
Under /apps, create a project folder(I have create 'myproj'), under which create a /components folder.
Under components, create folders /content and /structure as shown below.
Below shown the component structure in AEM 6.4.
[Click on any image to see it big & clear]
[Component structure in AEM 6.4]
Under structure create a node called 'header'., rename the header.jsp to header.html.
Add property 'componentGroup' : myGroup for the header node.
Copy pasted below html content in 'header.html'
<div>
<li>
<p>This is a sample component</p>
<h3>Header</h3>
<p>This is a sample text in body pf component</p>
</li>
</ul>
</div>
Under header node, create a 'dialog' [primary type : cqDialog; xtype dialog]
Under dialog node, we will have 'items' [primary type: cq:Widget; xtype:tabPanel]
Under items, we will have 'items' node [primary type: cqWidegtCollection]
Under items, we will have 'tab1' node[primary type :cq:Panel; title: Tab 1]
The component is ready now.
Author this component on a page:
Since this is a new component, we need to make this component available for our template.
Add this component to our template created earlier by following below steps.
We had placed the component under 'myGroup'.
Now go to template policy section and modify the property to add the component as part of this template. Procedure is shown in below image.
[AEM 6.4 add policy]
Now as you see the new component is available for our template for authoring.
[New component]
Author the component on template and create a new page, so that the newly created component is visible now.
[New component authored n AEM 6.4.png]
Now activate the page (which includes template, component activation), so that the page will be visible in publish environment.
The page creation in AEM 6.4 is very much similar to other previous AEM versions.
I will be using 'we-retail' content location for my page creation to save time.
Go to site admin and reach the path '/content/we-retail/language-masters/en',(remember this is the content path where I had configured my template in my previous post).
Click on new page and select the 'Html 5 template' we created as part of previous post as shown below and create page from it.
[Click on the image to see them big & clear]
[site creation AEM 6.4]
The new page looks like this.
[Page creation aem 6.4]
Next post we will demonstrate how to create AEM 6.4 sample components.
Steps involved in creating an AEM 6.4 Editable Template.
1) Create template folder
To create a template folder, follow this steps.
Go to Global Navigation -> Tools > Configuration Browser.
All the existing folders are listed to the left rail including the global folder.
Click 'Create'.
In the Create Configuration dialog enter below details:
Title: Give a title for the configuration folder(For Eg.SampleFolder) Editable Templates: Tick to allow for editable templates within this folder
Click Create
2) Creating a New Template - This is usually done by Template Author
Follow below steps.
Go to Tools -> General -> Templates
Select the previously created folder 'SampleFolder'.
Enter the name and description and select 'Create'
[Click on the image to see them big & clear]
Now we will see a Success message on completion
AEM 6.4 template creation success
Select Open to start editing the template or Done to return to the template console.
We now have the template created and it has below form.
Using structure option, I have authored a text and an image as shown below.
Using layout container[root], I have unlocked the layout so that all pages which uses this template will have 'Drag Components Here' enabled and I will be able to author more components.
The 'policy icon' left to the lock icon helps to add policy like linking specific component to this template.
We have the template ready now.
3) Enable the template
Now go to templates folder and select the 'Enable' template so that it is activated. Enabling the template allows the template to be used for page creation.
4)Allowing a Template - Template Author
Now, we need to link this template to our content path. The configuration path is '/conf/SampleProjects/settings/wcm/templates'
Path format in general is : /conf/<your-folder>/settings/wcm/templates/.*
Add this path to page properties of the content root where you are creating page. I have selected 'we-retail' as may content root for ease(/content/we-retail/language-masters/en).
Here is how you can do this, open page from site admin, go to page properties, > advanced > Template settings and add allowed templates with current template path as shown below.
Template property in AEM 6.4
We are done with the template creation now. In next post, we will try to create a page using this template.
As we know a bigger portion of the global audience accessing digital content doesn't speak English. So the content generated in English needs to be converted to other languages as required. In AEM we do this using various methods including manual process.
Necessity of agile global content management
Automate translation management and user experience.
Centralize all translation activity to a cloud based dashboard.
Take help of analytics to improve translation quality.
For almost all companies translation means manual process of copy paste content in spreadsheets.
Common components of a Translation Management System(For E.g: Smartling)
Cloud based and with translation services enabled
Having Workflows
Have a database
Have a good connectivity across channels
Ability to provide reports of any kind
Should be Secure
With a guidance and support
AEM With Smartling - Advantages
AEM with Smartling extend Adobe Experience Manager’s capabilities with seamless access to a powerful translation management platform.
The combination of Adobe Experience Manager and Smartling provides users with a robust solution for translation, with full visibility and control across the entire organization. Smartling builds on Adobe Experience Manager’s localization framework, which enables to request translations with the click of a button.
Smartling has almost all of the common components of a Translation Management System.
Some of the features are listed below.
Helps to create high quality translations automatically
Having a dashboard to control translation process and report generation
Highly customizable
Why Smartling?
Smartling is one of the leading translation management platform to localize almost anything. Smartling's translation management system streamlines the translation process into largely automated and hands free undertaking.
With a focus on automation, scalability, and connectivity, Smartling helps developers tackle translation with technology that addresses current and future requirements
Below are some of the Smartling features
Save Time & Money
Reliable Technology
Status and reporting
omni-channel
Highly extensible and secure
Support for all major localization file formats
Seamless integration with developer environment with Smartling SDK
Automated generation of visual context for dynamic web applications and mobile apps
Yes. Wordbee is one such tool for localization of content. It is a cloud-based collaborative translation and project management platform. Wordbee provides Beebox, a CMS connectivity solution to work with AEM.
Adobe AEM CMS can be integrated with Wordbee Translator via its Beebox connector. The AEM-Beebox helps to localize perfectly with minimal management time.
The Beebox Connector is a regular Adobe AEM package (bundle). This connector lets you automatically apply the right project workflow to the right content source. The package has a UI which enables translation jobs and activities. The AEM Connector communicates to the Beebox middleware.
Advantages
The Beebox server is installed at the AEM/CQ owner’s premises.
A single Beebox server can connect any number of content management systems with any number of Translation Management Systems or translation teams.
Older version of AEM/ CQ, Jackrabbit index the content by default. But Oak doesn't index content by default. We need to do it like how we do indexing for a DataBase.
Why do we need to index?
When a JCR query gets executed, usually it searches the index first. If there is no index, the query executes for the entire content. This is time consuming and an overhead for the AEM. But keep in mind, if the frequency of queries executed are less, we can ignore the indexing.
Let us understand the Oak and AEM indexing in detail here.
In fact, there are three main types of indexes available in Oak
Property
Lucene
Solr
And below are the supported query languages from Oak
XPath (recommended)
SQL-2
SQL (deprecated)
JQOM
AEM allows writing queries in one of three ways:
QueryBuilder APIs (recommended)
Using XPath (recommended)
Using SQL2
Note: all queries are converted to SQL2 before being run,
Indexing modes
Different versions of the node data is compared to find indexes. The indexing mode defines how comparison is performed, and when the index content gets updated. Below given the indexing mode and details.
Sync Vs Async Vs Nrt
Async - When we index in async mode, results returned by index may not always reflect the exact up to date state of the repository.
Sync - Sync Index ensures that index is updated as part of each commit.
NRT - This method indicates that index is a near real time index.
The flow of index is given in below image.
*Click on image to view it big and more clear.
[Indexing in AEM 6.4]
Below given various indexes in detail.
Property Index - Not a full-text indexing method. Index definition is stored in the repository itself.
Configuration
type: property;
propertyNames: jcr:uuid (of type Name)
Ordered Index - [deprecated] - This is an extension of the Property index. It keeps the order of the indexed property persistent in the repository.
The Solr Index - This is a full-text search but it can also be used to index search by path, property restrictions and primary type restrictions, which means the Solr index in Oak can be used for any type of JCR query.
Single Page applications are pages which dynamically update its content using AJAX calls to create a fluid & responsive experience.
In traditional applications, each request reloads/renders the HTML; but in SPA all interactions happens through AJAX calls. The return data is in JSON format. Previous versions of AEM had a miss on the SPA but with upcoming releases AEM SPA Editor provides a wonderful solution for supporting SPAs within AEM.
Single Page Applications - Features
This avoids page reloading.
Reusable Content.
Majority of the work happens in client side.
Good separation between content and UI
Provides interactive experience
RESTFul JSON
SPA(Single Page Applications) Basics
Below image gives an overview on the Single Page Applications in general.
As mentioned, only the first request is responded with a complete HTML. Further requests are made in AJAX way to the server and response in provided in JSON format.
SPA with AEM.
Latest AEM releases are enabling users to develop Single Page Applications using AEM. AEM SPA Editor allows user to author a page with Content Fragments in addition to other normal components like title, footer, images etc and AEM Sling models generate the Page equivalent JSON. This RESTFul JSON can be made available for other SPA frameworks like Angular React etc.
In upcoming posts, I will explain, how to create SPA in AEM.
Brief Overview:
As we all know, Adobe Cloud Manager(ACM) is part of the Adobe Managed Cloud Services. Using Adobe Cloud Manager(ACM) organizations can manage their AEM application in cloud themselves.
-It includes a continuous integration and continuous delivery.
-Code Inspection, performance testing and security validation.
-Automatic, scheduled or manual deployment.
Can we move existing projects in to ACM?
Yes. We can move any existing AEM projects into ACM with recommended option of upgrading AEM version to the latest.
How safe if Adobe cloud service?
Below given the security measures in Adobe Cloud Manager in detail.
Code push to Cloud Manager is encrypted in transit. Cloud Manager build binaries are also encrypted in transit and when stored.
Each customer gets their own Git Repository and code is secure and not shared with any other Organizations.
All the code push happens securely into the Git Repository over HTTPS protocol.
Any service with third party cloud providers are always secured.
ACM(Adobe Cloud Manager) provides Role Based Permissions, which ensure the user action on application is defined within limits, which means developer will not be able to delete the application from cloud, only the authorized product owner or person will have critical permissions.
Quality checks
There are 3 types of check provided by ACM CI/CD process.
Code Quality
Performance Testing
Security Testing
All critical issues reported by system must be fixed.
Technical details of ACM build environment
ACM uses below build environment for managing CI/CD process
Linux based container
Oracle Java version 8
Maven version 3.3.9
Adobe maven repository(repo.adobe.com) included default
Additional system packages include,
Imagemagick, Graphicsmagick, bzip2, unzip etc.
Types of build pipe line configuration
3 Ways we can configure the CI/CD pipeline process on stage.
Manual
On Git Changes
Recurring schedule
For the production deployment, system provides options as below
GoLive approval,
CSE oversight
Scheduled
Code quality in ACM pipeline
The ACM build does code inspection based on SonarQuebe, which includes around 110 rules like standard Sonar Java rules,FindBugs rules, Cognifide AEM Rules, Adobe-created Rules
AEM 6.4 provides headless(Content as a service) CMS capabilities through Content Fragments and Experience Fragments.
What is an experience fragment?
The headless capability to create experiences can be used to deliver content to third party system/touchpoint through various methods. AEM provides experience fragments which has content and layout, and third party applications then deliver to the end user. Experience Fragments helps reuse of content.
An 'Experience Fragment' is a collection of components with its own content and layout.
Each Experience Fragment is based on a template which gives a structure.
Each experience fragment has one/many components with its own layout.
Each experience itself makes sense.
Created with intention of reuse, re ordered, resized.
Experience Fragments works on Caas model, with each fragment can be created with multiple variations.
Scenarios when an AEM Experience Fragment to be used?
There
are times when we need to replicate same type of page section in other
pages. 'Experience Fragments' can help us saving time in this case. Also
cases like AEM is used as headless CMS, where AEM to be just used as
content storage, not for delivery. In this case AEM Experience Fragment
will be available for a third party rendering system for consuming.
Cases when we need multiple version of content, Experience Fragments are a good option.
Additional notes:
Experience
Fragments allow to manage sections of experiences that can easily be
reused and distributed. They are template based and allow live copy
relationship. At present AEM 6.3 supports Experience fragments to html5
web templates, Pinterest and Facebook templates. Custom templates can be
created if required.
Content Services enable the creation of Page-based HTTP end-points. This end points helps to render the content to a normalized JSON format.
How to configure & access the content services in AEM 6.4?
We need to configure content service end points when ever we need to export a Content Fragment data to external applications(Like Single Page Application or mobile app etc). Let us see how it can be done. The end point pages are not to be accessed as HTML pages, they just export the content in JSON Format.
Say we have master, mobile , tab variations as shown below.
[Click om images to see it big]
[Mobile & Tab Content Fragment]
Go to Sites> We-retail, click on 'Create' > 'Page'
Enter details as below and click on create. A new page will be created. (/content/we-retail/content-service-for-sample-fragment.html)
Open the page and author the content fragment in this page(Steps are explained in my previous post).
As you see, I have authored master, variation1(Mobile), Variation 2 (Tab) in the same page.
Now go to the page url and append '.model.json' to invoke JSON exporter. (In my case: content-service-for-sample-fragment.model.json). You can see the JSON with all variations included.
[JSON portion of Content Fragment for Mobile]
[JSON format for tablet]
From this JSON, we can iterate over the content fragments section and by checking for the variation, we can render items across various channels.
Remember I have authored the Content Fragment utilizing an existing we-retail template. So the JSON will have all related items like header , footer etc. In real projects, create a stand alone template and then create a page from this.