Skip to main content
Keerthi0555
Keerthi0555
Level 5
January 4, 2024
Solved

Override ootb js

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Raja_Reddy
Raja_ReddyAccepted solution
Community Advisor
January 4, 2024

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 in thread

2 replies

sarav_prakash
Community Advisor
sarav_prakashCommunity Advisor
Community Advisor
January 4, 2024

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

Translate
    Raja_Reddy
    Community Advisor
    Raja_ReddyCommunity AdvisorAccepted solution
    Community Advisor
    January 4, 2024

    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

     

    Translate
      Terms & ConditionsAccessibility statement

      Loading footer...