{"id":9594,"date":"2024-07-28T10:25:24","date_gmt":"2024-07-28T10:25:24","guid":{"rendered":"https:\/\/axamit.com\/?post_type=glossary-article&#038;p=9594"},"modified":"2024-09-03T12:35:22","modified_gmt":"2024-09-03T12:35:22","slug":"core-components-extension","status":"publish","type":"glossary-article","link":"https:\/\/axamit.com\/glossary\/aem\/core-components-extension\/","title":{"rendered":"Mastering Core Component Extension in Adobe Experience Manager (AEM)"},"content":{"rendered":"<div class=\"custom-toc\"><ul><\/ul><\/div>\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/axamit.com\/blog\/adobe-experience-manager\/what-is-aem\/\" data-type=\"post\" data-id=\"2483\">Adobe Experience Manager\u00a0(AEM)<\/a> uses a component-based\u00a0<a href=\"https:\/\/axamit.com\/blog\/adobe-experience-manager\/aem-architecture\/\" data-type=\"post\" data-id=\"3082\">architecture<\/a>, where each piece of content or functionality is encapsulated within a component. AEM\u2019s Core Components provide a set of standardized, flexible, and easy-to-use base components. However, you might need to extend these core components to meet specific project requirements. This guide will take you through the process of extending core\u00a0components in AEM.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Key Takeaways<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/axamit.com\/blog\/adobe-experience-manager\/aem-core-components\/\">Core components in AEM<\/a> provide a base set of functionality that can be extended to meet unique project requirements.<\/li>\n\n\n\n<li>The process of extending core components involves creating a new component, overlaying the original component, and adding or modifying functionality.<\/li>\n\n\n\n<li>Understanding&nbsp;sling&nbsp;resource resolution and inheritance is crucial for effective component extension.<\/li>\n\n\n\n<li>Extending core components should be done carefully to ensure compatibility and maintainability.<\/li>\n\n\n\n<li>Extending, rather than modifying core components, ensures that you can safely upgrade AEM without losing customizations.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Core Components Extension<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">What is Core Component Extension?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Core component extension is the process of creating a new component that inherits properties and functionality from an existing core component, and then adding or modifying features according to the project\u2019s requirements. This approach maintains the original component\u2019s functionality while allowing for customizations.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Role of Sling Resource Resolution<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Sling resource resolution is crucial in component extension. It is the mechanism that AEM uses to map a URL to a resource, and it plays a key role in determining which component scripts are executed when a component is called.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/aem-development.com\/wp-content\/uploads\/AEM-sling.png\" alt=\"AEM Sling\" class=\"wp-image-680\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Creating a New Component<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To extend a core component, you first need to create a new component:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navigate to the <strong>\/apps<\/strong> directory in CRXDE Lite.<\/li>\n\n\n\n<li>Create a new folder for your component under a suitable project-specific directory.<\/li>\n\n\n\n<li>Add a <strong>.content.xml<\/strong>&nbsp;file to define your component and specify the core component as the \u201c<strong>sling:resourceSuperType<\/strong>\u201d.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Overlaying the Core Component<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Next, you overlay the original component\u2019s scripts in your new component:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Copy the core component\u2019s scripts to your new component\u2019s directory.<\/li>\n\n\n\n<li>Modify the scripts as needed.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Adding Functionality<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can now add or modify functionality in your new component:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Add new scripts or modify existing scripts in your component\u2019s directory.<\/li>\n\n\n\n<li>Test your changes thoroughly to ensure they work as expected.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Inheriting Dialogs<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Your new component will automatically inherit the core component\u2019s dialog. If you want to modify the dialog:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Overlay the dialog in your new component\u2019s directory.<\/li>\n\n\n\n<li>Modify the dialog as needed.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Testing Your Extended Component<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">After extending a core component, it\u2019s crucial to test your new component:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Test all functionality, both inherited and new.<\/li>\n\n\n\n<li>Check that the component renders correctly in various contexts.<\/li>\n\n\n\n<li>Ensure that the component\u2019s dialog works correctly.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Grasping the Implications<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Extending core components has several implications:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Maintainability<\/strong>: Keeping customizations separate from the original core components makes your components easier to maintain.<\/li>\n\n\n\n<li><strong>Compatibility<\/strong>: Properly extended components will be compatible with future upgrades of AEM and core components.<\/li>\n\n\n\n<li><strong>Performance<\/strong>: Adding complex functionality can impact a component\u2019s performance.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion and Next Steps<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Extending core components in AEM is a powerful way to create customized functionality while maintaining compatibility with AEM\u2019s standard features. This process involves a deep understanding of AEM\u2019s component architecture and Sling resource resolution. After mastering core component extension, you might explore more advanced component development techniques or delve deeper into AEM\u2019s underlying technologies. Remember, effective component extension requires careful planning, diligent development, and thorough testing.<\/p>\n","protected":false},"author":12,"featured_media":5015,"menu_order":0,"template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"glossary-category":[43],"class_list":["post-9594","glossary-article","type-glossary-article","status-publish","has-post-thumbnail","hentry","glossary-category-aem"],"acf":{"post_title":"Core Components Extension"},"_links":{"self":[{"href":"https:\/\/axamit.com\/de\/wp-json\/wp\/v2\/glossary-article\/9594","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/axamit.com\/de\/wp-json\/wp\/v2\/glossary-article"}],"about":[{"href":"https:\/\/axamit.com\/de\/wp-json\/wp\/v2\/types\/glossary-article"}],"author":[{"embeddable":true,"href":"https:\/\/axamit.com\/de\/wp-json\/wp\/v2\/users\/12"}],"version-history":[{"count":4,"href":"https:\/\/axamit.com\/de\/wp-json\/wp\/v2\/glossary-article\/9594\/revisions"}],"predecessor-version":[{"id":9785,"href":"https:\/\/axamit.com\/de\/wp-json\/wp\/v2\/glossary-article\/9594\/revisions\/9785"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/axamit.com\/de\/wp-json\/wp\/v2\/media\/5015"}],"wp:attachment":[{"href":"https:\/\/axamit.com\/de\/wp-json\/wp\/v2\/media?parent=9594"}],"wp:term":[{"taxonomy":"glossary-category","embeddable":true,"href":"https:\/\/axamit.com\/de\/wp-json\/wp\/v2\/glossary-category?post=9594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}