Override ootb js

[Keerthi0555]

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.

[sarav_prakash]

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

[Raja_Reddy · Accepted solution]

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