Creating an editable template in AEM 6.4

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'.
• Select Create, Select HTML5 Page template(content page), select 'Next'
• 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.

AEM 6.4 Tutorial Video Series 

 

Creating a sample component & template in AEM 6.4

In this post , we will understand how to create a sample component, template in AEM 6.4. Below given the steps explained in this tutorial.

• Create a template in AEM 6.4
• Create a page from the template in AEM 6.4
• Create a component in AEM 6.4
• Author the component in AEM 6.4
• publish the page and test in AEM 6.4

Template basics in AEM 6.4:
There are 2 types of AEM templates in AEM 6.4, Editable Templates and Static Templates

i) Editable Templates
Now the AEM expects template creation as a combined job of template authors, admin and developer. The editable templates can be created and edited by template authors using the Template console and editor.

ii) Static Templates
Normal way of developing a template. These are developed purely by developers, they cannot be created or edited by authors.

Is there any difference in using editable and static templates while authoring a page?
No. There is no difference and no indication between static and editable templates while creating a page.

Here I will be explaining about working with editable templates.

A template will have below features.

• Structure - Predefined content that cannot be changed on pages created with the template.
• Initial Content - Predefined content that can be changed on pages created with the template.
• Layout - Helps to author for a range of devices by defining various layouts.
• Styles - Define the styles to be used with the template and its components.

• Create an editable template in AEM 6.4 - Steps are in this post 
• Create a page using the template

What is a component?
Components are modular units which realize specific functionality to present the content on a website. They are re-usable.

There are two sets of Adobe-provided AEM components available; Core Components & Foundation Components.

Core Components: Core components are known for flexibility and feature-rich authoring functionality. Core Components were introduced to provide robust and extensible base components.

Features:
-Core components make page authoring more flexible and customizable.
-Built on the latest technology and best practices.
-Extending them to offer custom functionality is simple for the developer.

Examples of AEM 6.4 core components are,

• Breadcrumb
• Form Button
• Form Container
• Content Fragment
• Form Hidden
• Form Options
• Form Text
• Image
• Language Navigation
• List
• Navigation
• Page
• Quick Search
• Social Media Sharing
• Text
• Title

Foundation Components: Out-of-the-box components, which form a subset of the components. Available for a standard installation of AEM.

Note: Foundation components are based on legacy technologies, but are no longer enhanced, so new way is core components.

There are 3 types of foundation components.

• General: For eg. Adaptive Image,Carousel,List
• Columns: For eg. 2 Columns, 3 Columns, Column Control
• Form: For eg. Form (component), Account Name, Address, File Upload,Image Upload

• Steps to create a component and link it with a template and author on a page in AEM 6.4 are given in this post

 Complete AEM 6.4 Tutorial Video Series

  

Useful AEM Consoles in AEM 6.4

 Below given all useful consoles from AEM 6.4. This is valid for versions AEM 6.3, AEM 6.2, AEM 6 etc.

AEM Tutorial Videos

AEM Admin Console
http://localhost:4502/aem/start.html

Site Admin Console
http://localhost:4502/siteadmin

DAM Console
http://localhost:4502/damadmin

Campaigns
http://localhost:4502/mcmadmin#/content/dashboar

Inbox
http://localhost:4502/inbox

User Admin
http://localhost:4502/useradmin

Tools Admin
http://localhost:4502/miscadmin

Tag Admin
http://localhost:4502/tagging

CRXDE Lite  
http://localhost:4502/crx/de/index.jsp

CRX Explorer  
http://localhost:4502/crx/explorer/index.jsp

Package Manager  
http://localhost:4502/crx/packmgr/index.jsp

Package Share Explorer  
http://localhost:4502/crx/packageshare/

Backup Console  
http://localhost:4502/libs/granite/backup/content/admin.html

Web Console  
http://localhost:4502/system/console/configMgr

OSGi Bundles Console/Felix console  
http://localhost:4502/system/console/bundles

Query Debugger Tool  
http://localhost:4502/libs/cq/search/content/querydebug.html

Search UI  
http://localhost:4502/crx/explorer/ui/search.jsp?Path=&Query=

Display Client Libraries in use by Component  
http://localhost:4502/libs/granite/ui/content/dumplibs.html

JVM Memory Usage  
http://localhost:4502/system/console/memoryusage

JVM Runtime Properties  
http://localhost:4502/system/console/jmx/java.lang%3Atype%3DRuntime

Performance profiler  
http://localhost:4502/system/console/profiler

Disk Performance Benchmarking  
http://localhost:4502/system/console/diskbenchmark

Product Version and License Information  
http://localhost:4502/system/console/productinfo

Node Type Administration Console  
http://localhost:4502/crx/explorer/nodetypes/index.jsp

Maintenance Tools  
http://localhost:4502/system/console/jmx/com.adobe.granite%3Atype%3DRepository

http://localhost:4502/libs/cq/workflow/content/console.html

Enhance Language Translation capabilities of Adobe Experience Manager using Smartling’s Connector

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
• Leverages any native frameworks for localization
• Translate page, DAM asset metadata, dictionaries, custom attributes , database content etc,
• 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
• Automatic data capture
• machine learning insights
• APIs with hundreds of endpoints

Site Link: SmartLing

Are there any other such translators?

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. 

Read about Wordbee
AEM connector page

Understanding Indexing in AEM

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.

Configuration
type: ordered;
propertyNames: jcr:lastModified

Lucene Full Text Index - This is a full text index method, which is asynchronous too.

Configuration
type: lucene ;
async: async

Lucene Property Index - This is not a full-text indexing.

Configuration
 type: lucene ;
 async: async ;
 fulltextEnabled: false;
 includePropertyNames: ["alias"]

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.

Configuration
type:solr;
async:async;
reindex:true

Traversal Index - When no indexing is done; All content nodes are traversed to find matches to the query, slower and overhead to AEM.

A tabular version is given below

[AEM Oak Indexing]

Video description of the blog given below.



 Read about AEM 6.4 Oak Queries and Indexing

Best Practices for Queries and Indexing

Single Page Applications and AEM

What is Single Page Applications - SPA?

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.


Video version of the post is available below.

 

AEM 6.4 related posts:
Create Content Fragments : Step By Step Tutorial
Content Fragment out put as JSON

Quality, Security, Performance Checks in Adobe Cloud Manager

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.
Read more: Why you should think of using Adobe Cloud Manager for AEM Projects?

There are 3 types of Quality checks provided by ACM CI/CD process.

• Code Quality
• Performance Testing
• Security Testing

Below given Security & Performance Testing criteria's
1. Security checks

Critical:

Critical security is based on 13 AEM Security health checks.

• AuthorizableNodeName Implementation does not expose authorizable ID in the node name.path
• Dispatcher filtering request validation
• The Adobe Granite HTML library manager is configured appropriately
• Default password must be changed
• Deserialization firewall Attach API readiness is in an acceptable state
• Deserialization firewall is Functional
• Deserialization firewall is Loaded
• Sling default GET servlet is protected from DOS attacks
• The Sling Java Script Handler is configured appropriately
• The Sling JSP Script Handler is configured appropriately
• The Sling referrer filter is configured in order to prevent CSRF Attacks
• Correct SSL configuration
• No Obviously insecure user profile polices found

Important - 6 check points

• CRXDE Support bundle is disabled
• Sling DavEx bundle and servlet are disabled
• Sample content is not installed
• Both the WCM Request Filter and the WCM Debug Filter are disabled
• The web server is configured to prevent clickjacking
• Sling WebDAV bundle and servlet are configured appropriately

Information

• Replication is not using the admin user

2. Performance Tests are based on

Critical

• Error rate is less than 2%
• Total CPU utilization is less than 80%
• Disk I/O wait time s less than 50%

Important

• 95 % response time er page is not longer than 3s
• Peak response time is not longer than 18s
• Page views per minute is greater than or equal to 200
• Disk bandwidth utilization is less than 90%
• Network bandwidth utilization is less than 90%

Information

• Overall requests per minute is less than 6000

3. Code Quality checks
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.

Read More:
Why you should think of using Adobe Cloud Manager for AEM Projects?