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:

  • Static Templates. They are the old style templates (AEM 6.2 will continue to support them in the same way they were supported before).
  • Editable Templates. The new Template Editor allows authors to rearrange the layout and to define configurations of page templates without the intervention of developers. 

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:

  • Single screen display: This will display the content in single screens

  • Dual Screen Display: Displays interactive content within two screens

  • Dual Zoned Display: Allows to display multiple screens on a display

 

Features:

  • It has a custom native player for OSX and iOS (Android version on the way), using PhoneGap and offline mode.

  • Offline mode: in offline mode the content is a package that the box(any device capable of running a screens player) can manage without being connected to the network, Screens content is stored locally and will continue to work even if the content isn't up to date.  

  • Screens Applications come with built-in presets and a JavaScript Library, also a basic set of Transitions (more transitions are expected to be released).

     


 

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:

 

  • A dedicated TOUCH-OPTIMIZED- UI test console for running the tests
  • A Javascript API for writing the tests

 

     


The testing console
 

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:

  • TestCase Methods/Actions. It is the list of functions you can use to build a TestCase (i.e. .click(...), .mouseover(...), navigateTo(...), asserts(...)).
  • Smart Actions & Timeout.
  • jUnit Flavor.
  • Before/After methods, set at TestCase or TestSuite level.
  • Dynamic parameters.
  • Test run result as XML data (i.e. for Jenkins integration).
  • Really lightweight compared to other UI testing automation tools (i.e. Selenium)
  • Tests are executed inside a real browser (not a headless one), not depending on external webdrivers.
  • Easily integrable in your continuous integration environment (i.e. Jenkins) as test outputs are regular jUnit .xml report files. As shown in the next diagram:

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. 

Next Blog Post

by Livia Nassius

News

Netcentric Announces Elian Kool as New CEO

Netcentric has appointed co-founders Elian Kool as new CEO and Gerhard Gerner as COO as of July 1st. Elian Kool will take over the role of CEO from Frank Klinkhammer who is leaving Netcentric.

Read more...
Andres Cenci