Expand my Community achievements bar.

Submissions are now open for the 2026 Adobe Experience Maker Awards.

Website Redesign: How to Approach Website Versioning in AEM: Part One | AEM Community Blog Seeding

Avatar

Administrator

7/20/22

BlogImage.jpg

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

Abstract

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

Read Full Blog

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

Q&A

Please use this thread to ask the related questions.