Overlay and Override Concept in aem
In this post we will se the very basic question which is almost hit everyone’s mind who start exploring the aem.
What is the basic difference between Overlay and Override in aem?
both way allow us to use the aem foundation components, but both has their own significance.
Overlay– Suppose we have a requirement to create a custom component (no matter whether it is a Simple Component or Multifield Component), So we can create them by using the Overlay and overriding. We have to copy the Foundation component and use in the our component as.
In overlay suppose we are going to use the text, foundation component and we are copying that from this path “/libs/foundation/components/text” to your aem project folder like “/apps/myproject/components/mytextcomponent” So the new Component will the same as the text foundational component. But there is one limitation here which is if there is any update came in future in aem then we have to update/upgrade the our custom component as per the new Changes. All of them we have to do manually which can become vey hectic and time consuming.
Overriding/Extending– In this approach suppose we have to create the custom component which contains the headline, image, CTA’s and some text, then after creating the rest of the Component nodes we will use the sling:resourceSuperType as “/libs/foundation/components/text” by using this way we can achieve our requirement and then there will be no need to do any changes manually in case of any future update in foundation components.
And this concept is not only applicable for Foundation Components. We can also have our custom components and in the same pattern we can utilize the behavior of extending the components which is preferable and best practice.
For Example: we have a custom page component which has many html and js files rendered and we are using that component some where is where there might be the need to do enhance the functionality or modification etc. then there is no need to do the changes every where, the changes will require only in the relative page components files.