top of page
  • Writer's pictureHeena

Concept of Override and Overlay in AEM

Updated: Jul 23, 2023


Overriding/Extend:

You can inherit component properties by using sling:resourceSuperType property.


Example:

In this example we will override image component.

After creating the component, delete .jsp file created under the node. Add the component to the page. This is how the dialog would appear. This dialog is inherited from the image component.

Now, let's say you need to change text of first check box. To do so you need to recreate dialog structure till that checkbox field (You can keep all the created nodes empty and of type nt:unstructured.). To override text of the checkbox add highlighted property.

There you go! We have successfully changed the text.


Overlaying:

In AEM the default functionality is available in "/libs". Overlaying means copying the functionality from "/libs" to "/apps" at exact same path. You can do the desired changes in newly copied functionality under "/apps"

AEM uses search path to find a resource. As per the default OSGI preferences(set in Apache Sling Resource Resolver Configuration), it first searches under /apps and then /libs, so your newly copied component will get priority.


Example:

As we are aware, following screen is a predefined functionality by AEM and thus it resides inside libs(Specifically, at /libs/cq/core/content/nav).

aem start page

Let's say you wish to update label of "Projects" to "My Projects". Updating it directly inside "libs" is not recommended. So, you'll have to overlay this particular node. To do so, right click on the projects node and select "Overlay Node" option.

overlay node option

Upon right click, following window will popup. For Safer side, check the checkbox and Select Ok.

overlay node dialog

Refresh "apps". You will notice node structure is generated to same path("/cq/core/content/nav/projects") in apps .

projects node

To update title of the "Projects" to "My Projects" add following highlighted property to projects node.

projects node

Thats it. Go back to the start page and refresh it. There you go! We have successfully overlayed the projects node.

aem start page

Feel free to ask queries in comment section below, or you can reach me out via chat/contact page.

1,403 views

Related Posts

See All
bottom of page