What's New in AEM 6.2

Adobe Experience Manager 6.2 was recently released. Here are the top new features, like template editor and screens, that are useful for developers and digital marketers alike.

Last winter I had the chance to spend some time with our partners at Adobe to work on the new release of Adobe Experience Manager (AEM) 6.2.

As you all probably know, AEM allows you to create a complete web experience, including a powerful CMS, reusable components, user management, very easy content activation, approval workflows, security etc. The new release aims to improve many of the existing features, and also to give developers and authors even more tools to complement that.

Here are a few features of the recently released version that I find particularly useful and interesting:

Template editor

AEM 6.2 supports two types of templates:

This new template system changes how cq:templates work. It is a more flexible and powerful concept of page templates. Currently the templates and the policies are stored under /etc/designs but with AEM 6.2 this has been moved to /conf. There is a new UI to create/modify/publish templates from author and three different editing levels:

  1. Fully locked elements, which are not editable on the page created from that template.
  2. Editable mandatroy elements, which are modifiable on the page, but cannot be moved or removed.
  3. Fully editable initial page content, which are in the full control of the page author.

To create a new template go to Tools -> Sites -> Templates and click on Create, then choose the Template Type (Template for a HTML5 content page, or Template for an Adaptive Form Content Page), and give a name to the new template.

In the Template Editor there are three layers:

Structure Mode: Provides structure to the template. Typically, components which are not yet allowed to be edited should be part of this structure. This layer provides template authors the ability to restrict content which is to be made available for page authors to edit. The allowed list of components -content policies- on a container is configured using this layer.

Initial Content: Provides the actual content of the template and allows the actual editing of the template.

Layouting: Provides a final view of how the template will be, like the design layout in editing page mode.

The Template Editor also provides a devices simulator for testing the template in different layouts.

After creating the new template it is necessary to enable it from the Sites template console, and then it will be available in pages creation forms.

Screens

Screens is a new feature that brings AEM content to the screens, providing a new custom experience by displaying your applications content in touch screens or displays composed of multiple screens.

Originally planned for the 6.1 release, AEM screens delivers content across the web, mobile platforms and displays connected to the internet, allowing to build cross-platform interactive experiences.

AEM Screens is divided in three main items which are: Applications, Locations and Channels.

Application: is a standard AEM 6.2 project, with all its assets and components. Fully editable by authors. For example, the product comes with a in-store demo application that showcases a store-like interface where the user can browse between products and different offers.

Channels: Channels are a stream of content that will be displayed on the screen. The authors can define multiple channels for different targets or for different periods of time during the day. There also are roles that help defining the purpose of the channel (e.g. an Idle channel)

Locations: This is, basically, where the content will be displayed. It's a group of channels that can be defined to be played or triggered under certain conditions (e.g. after 6pm a certain channel will be displayed, or a certain offer during winter). A location can be a single display, or it can be a combination of any number of displays arrayed together.

Some of the standard AEM Screens display options include:

Features:

AEM UI test automation framework - Hobbes.js

Originally built by Adobe’s in-house testing team as part of the development process, AEM 6.2 comes with an improved version of Hobbes.js testing framework.

Hobbes.js enables developers to easily write and run UI tests directly in a browser, using modern Javascript. The testing framework consists of two main parts:

The framework relies on jQuery library, and enables developers to create Test Cases. A Test Case is a chain of actions that the developer defines, and is later automatically executed. Different Test Cases can be grouped together in Test Suites.

Every action in a Test Case is a step that has to be executed only after previous step has finished, in a synchronous way.

For example:

Main Advantages and key concepts:

More details can be found here: https://docs.adobe.com/docs/en/aem/6-2/develop/components/hobbes.html

In this article we have seen that with AEM 6.2 we have a new integrated framework that aims to facilitate the creation of automatic tests. We also saw new tools for editors to handle templates in a much easier and visual way. Furthermore, there is a new platform that allows us to target new devices and achieve new ways of interaction between our apps and final users.

Those are only the top new features I wanted to point out about AEM 6.2, but they are only a small piece of all that is new in AEM 6.2.