Inheritance in AEM Editable Templates

Overview

This article describes how inheritance can be achieved in the Adobe Experience Manager (AEM) editable templates with minimum customizations.

Prerequisites

1. AEM Server (author server) with core components
2. Latest AEM server (this is validated on AEM 6.5 but can be implemented on older or cloud versions)

Problem

In legacy CQ/AEM versions, inheritance in AEM works through iParsys. However, this is deprecated in the latest AEM versions and editable templates. It is best to use Experience Fragments (EFs) for inheritance or for re-usable content where is possible. Still, there are few business use cases which requires a customization to achieve the inheritance.

One of them is: Authors requires a in-page authoring and child pages should inherit that content.

Solution

The approach to achieve the inheritance without using inheritance or EFs is:

1. Provide an authoring field to configure the root path at a parent page or a specific page
2. Develop a new component for authors select which component they want to inherit
3. If authors want to break the inheritance and inherit from another child page vs parent page then they just need to re-author the root path again at the sub-level page and all other child pages inherits the configure component content.

List of Code Changes:

1. Injecting a new tab with a pathbrowser field to select the resource which will have all the content i.e. select the parsys node if you want to inherit the components authored inside that parsys: https://github.com/singaiahc/editable-templates-inheritance/blob/master/ui.apps/src/main/content/jcr_root/apps/editableTemplateInheritance/components/page/_cq_dialog/.content.xml.

Figure 1: Inheritance property in the page properties

2. Maintaining a new ACS-Commons Generic to author the list of components. List name should be: component-inheritance. This will allows you to dynamically author the list without any code deployment. The value should be the component resource type value.

Figure 2: Sample values

3. Creating a new component which pulls the dropdown values from ACS-Commons list.

4. Allowing this new component wherever required i.e. specific editable templates

5. I am using InheritanceValueMap so it looks for the configured property from bottom-up.

6. Go to page properties and configure the root path for inheritance. Make sure you point to the parsys not the page.

Demo:

1. Below is validated on AEM 6.5 (SP7)
2. Check out the code from my github: https://github.com/singaiahc/editable-templates-inheritance/tree/master
3. Install the code
4. Check the configured rootpath for child page inheritance (go to Inheritance tab): http://localhost:4502/mnt/overlay/wcm/core/content/sites/properties.html?item=/content/editableTemplateInheritance/us/en/home
5. Look at the text and download component content on the below page and this content will be inherited to all child pages. http://localhost:4502/editor.html/content/editableTemplateInheritance/us/en/home.html
6. Open the below page and you can see: I’ve authored couple of inheritance components to inherit both text and download components content from parent page. http://localhost:4502/editor.html/content/editableTemplateInheritance/us/en/home/page1.html

Conclusion

The above approach will allow authors to author the content within a page without authoring in a separate editable template or EFs for specific use cases and other child pages can inherit this content. If you have larger site and number of authors, this approach might help to reduce creating number of EFs especially if authors want the capability for in-page authoring experience or if you want to keep them in the page authoring.