Website Redesign: How to Approach Website Versioning in AEM: Part One

Share article

Website in AEM

Working with page versions in AEM is pretty straightforward, but what if you need to maintain two versions of the entire website? We got a request on one of our projects to implement major updates in website design. We were planning to work on what we decided to call “Web Refresh” stories, across several sprints, but we wanted to launch all of the changes together on a specific date.

Before that could happen, we needed to store the changes separately with the functionality to test and demo the changes without it affecting the current site. The changes that we developed for Web Refresh would not apply to the live pages automatically; they would exist as version 2 (v2).

In this series of articles, we’ll walk you through how we approached this challenge.

General solution for site redesign

All the Web Refresh components/templates were developed as a new v2 component library and stored in the same branch as the current sprint. QAs were then able to perform testing by using v2 templates and dragging and dropping components from the v2 library.

If you need to make the whole site use v2 versions of components (for demo purposes or final release), custom “in-code” overlay component logic can be implemented to overlay v1 components with their v2 counterparts. Custom implementation will give full control over the way v1->v2 “in code” transformation happens.

Technically, an overlay component could be implemented in a way where it’s enabled/disabled based on OSGI configs or custom checkbox(es) in page properties. Overlay scope might be the whole application, a particular site (since we have several) or even a particular page/section.

Advantages of an overlay component

  • The overlay component is natively supported by AEM
  • Content editors are able to start building web refresh pages with v2 components in advance
  • You get full control over v1->v2 “in-code” overlay logic. This makes it possible to support custom requirements and gives you more flexibility

Context-aware configuration manager

We’ll start by defining a way to pick the proper configuration based on the site version.

CAConfigurationManager.java

CAConfigurationManagerImpl.java

DelegatingComponentModel.java

Get website redesign right!

This is the first part in our Exadel series on website redesign in AEM.

Stay tuned for the next installments of our story! Catch the second part of the article that tells you how to manage website redesign in AEM with OSGI and dispatcher configurations.

Author: Iryna Ason