Overlay and Overide in AEM

 

Overlay and Overide in AEM

 

Overlaying means copying component from /libs/ folder to /apps/ folder. After that you can impose your own definitions like you can title, component group, business logic on the newly copied components under /apps/ according to our requirements.

 

Note: You should never change anything under /libs/ as adobe keep providing updates, so changes will be made under /libs/ will be overwritten when you upgrade your AEM.

 

As per the default OSGI preferences AEM uses a search path to find a resource, searching first the /apps/ branch and then the /libs branch so your newly copied components under /apps/ gets priority than the /libs/.

 

We can modify search paths and its priority order by changing it from the Felix console “Apache Sling Resource Resolver Factory” configurations.

 

 

When you are overlaying a component remember that both components can show up in the authors sidekick, For your overlay /apps/ component , if the title, componentgroup are the same as /libs/ component, in design mode of the parsys to enable component distinguish them with different name for your project component.

 

Overriding means creating a custom component manually by creating all necessary nodes and setting value of sling:superResourceType property to that component, so that it will inherit all the feature from component under /libs/ so that even after upgrade you still inherit the features of that component.

 

Note: Here we can use the sling:superResourceType for any component that you want to inherit functionality (example from projectA component to ProjectB etc., not only restricted to libs).

 

Example :

Overlaying node from /libs/ to /apps/ and changing dialog value

Copy following node structure to /apps/:

 /libs/wcm/msm/content/touch-ui/authoring/rolloutdialog/content/items/columns/items/rolloutDeepContainer/items/rolloutDeep

Under /libs/ text value is “Rollout page and all sub pages” as follows:

After overlaying it under /apps/ we can change its value to “Rollout page and all sub pages under it” as follows:

After overlaying the dialog value will be changed

Example:

Overriding AEM Core component

Here we are overriding AEM core text component using sling:superResourceType 

We have changed jcr:title and other properties as per our requirements

Output will be as follows: