Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.
SOLVED

overlay vs override

Avatar

Level 10

Hi all,

 

I understand Override is inheriting and Overlay is copying component in to /apps and changing code.

When to use overlay vs override?

What are their relative advantages/disadvantages?

 

Thanks,

Rama.

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

 

Overlaying a Component:

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.

 

 

Extend/Override a Component:

Establish a custom component by creating all necessary nodes and configuring the value of the "sling:resourceSuperType" property as "/libs/foundation/components/image." This approach allows you to inherit all the features of the image component, ensuring that even after an upgrade, you retain the functionalities of the original image component.

 

https://www.aem-blog.com/post/override-and-overlay

When to use Overlay vs. Override:

  • Overide:

    • Use override when you want to make changes to an existing resource, but you want to keep the original intact.
    • This is useful for customization without directly modifying the AEM core components. Thus, you can also enable the OOTB and the extended version.
  • Overlay:

    • Use overlay when you need to modify the behavior or appearance of a component
    • Overlay is generally is used to modify AEM UI, like add a new button to Sites Screen

Aanchal Sikka

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

 

Overlaying a Component:

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.

 

 

Extend/Override a Component:

Establish a custom component by creating all necessary nodes and configuring the value of the "sling:resourceSuperType" property as "/libs/foundation/components/image." This approach allows you to inherit all the features of the image component, ensuring that even after an upgrade, you retain the functionalities of the original image component.

 

https://www.aem-blog.com/post/override-and-overlay

When to use Overlay vs. Override:

  • Overide:

    • Use override when you want to make changes to an existing resource, but you want to keep the original intact.
    • This is useful for customization without directly modifying the AEM core components. Thus, you can also enable the OOTB and the extended version.
  • Overlay:

    • Use overlay when you need to modify the behavior or appearance of a component
    • Overlay is generally is used to modify AEM UI, like add a new button to Sites Screen

Aanchal Sikka