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

Override ootb js

Avatar

Level 6

Hi Team,

I'm customising ootb tabs component, need to override ootb js, is there a way to override ootb js of tabs component.

Thanks in advance,

Keerthi K.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @Keerthi0555 

 

  1. Identify the JS file: Find the JavaScript file associated with the tabs component that you want to customize. This file is likely included in your project or part of the third-party library used for the tabs.

  2. Create a Custom JS file: Create a new JavaScript file in your project to hold your customizations. This file should contain the modifications you want to make.

  3. Reference Custom JS file: Link your custom JavaScript file after the inclusion of the OOTB tabs JS file in your HTML. This ensures that your customizations override the OOTB behavior.

<script src="path/to/ootb-tabs.js"></script>

<script src="path/to/your-custom-tabs.js"></script>
  1. Implement Customizations: In your custom JavaScript file, implement the necessary customizations. You can override functions, add new functionality, or modify existing behavior as needed
  • // Your custom tabs.js file (function() { // Override or extend OOTB functions as needed // Example: var originalFunction = ootbTabsComponent.someFunction; ootbTabsComponent.someFunction = function() { // Your customization here // ... // Call the original function if needed originalFunction.apply(this, arguments); }; // Add new functionality if necessary // ... })();
Remember to replace "path/to/ootb-tabs.js" and "path/to/your-custom-tabs.js" with the actual paths to the OOTB tabs JavaScript file and your custom JavaScript

 



View solution in original post

2 Replies

Avatar

Level 4

For overriding clientlibs, we create hook clientlibs by adding category:[cq.authoring.editor.sites.page.hook]

 

Here is an example for customing ootb clientlibs

https://sourcedcode.com/blog/aem/aem-touch-ui-show-hide-tabs-by-style-system-configuration

Avatar

Correct answer by
Community Advisor

Hi @Keerthi0555 

 

  1. Identify the JS file: Find the JavaScript file associated with the tabs component that you want to customize. This file is likely included in your project or part of the third-party library used for the tabs.

  2. Create a Custom JS file: Create a new JavaScript file in your project to hold your customizations. This file should contain the modifications you want to make.

  3. Reference Custom JS file: Link your custom JavaScript file after the inclusion of the OOTB tabs JS file in your HTML. This ensures that your customizations override the OOTB behavior.

<script src="path/to/ootb-tabs.js"></script>

<script src="path/to/your-custom-tabs.js"></script>
  1. Implement Customizations: In your custom JavaScript file, implement the necessary customizations. You can override functions, add new functionality, or modify existing behavior as needed
  • // Your custom tabs.js file (function() { // Override or extend OOTB functions as needed // Example: var originalFunction = ootbTabsComponent.someFunction; ootbTabsComponent.someFunction = function() { // Your customization here // ... // Call the original function if needed originalFunction.apply(this, arguments); }; // Add new functionality if necessary // ... })();
Remember to replace "path/to/ootb-tabs.js" and "path/to/your-custom-tabs.js" with the actual paths to the OOTB tabs JavaScript file and your custom JavaScript