Override OOTB javascript in Liferay 7 or LIferay DXP

Liferay becomes modular and it requires more efforts to extend it's functionality. I believe that is for our own good but yeah it becomes complex.

To override a javascript file now requires a bundle with some specific entries.
In this example I am overriding logo editor of Liferay and adding a console log to demonstrate the same.

1. BND
2. CONFIG.JS
3. FILE_TO_OVERRIDE

1.BND

Liferay-JS-Config takes the config file which does the magic to override. Even though this file is useful for multiple occasions, for now we will use it for this purpose only.
Web context path for web resources, in our case it's java script.

Bundle-Name: logo-editor-for-snap

Bundle-SymbolicName: logo-editor-for-snap

Bundle-Version: 1.0.0

Liferay-JS-Config: /META-INF/resources/js/config.js

Web-ContextPath: /logo-editor-web-override

2.CONFIG.JS

• base: File location to override
• path: File Name
• condition: In which scenario this module should be loaded
• name: Name of the module
• trigger: Should trigger when a call made to module, e.g. liferay-logo-editor
• when: This module replace triggered module with value instead. There are multiple values possible for this, subject to explore.

;(function() {

    AUI().applyConfig(

        {

            groups: {

                sessionext: {

                    base: MODULE_PATH + '/js/',

                    combine: Liferay.AUI.getCombine(),

                    filter: Liferay.AUI.getFilterConfig(),

                    modules: {

                        'liferay-logo-editor-override': {

                            path: 'liferay-logo_editor.js',

                            condition: {

                                name: 'liferay-logo-editor-override',

                                trigger: 'liferay-logo-editor',

                                when: 'instead'

                            }

                        }

                    },

                    root: MODULE_PATH + '/js/'

                }

            }

        }

    );

})();

3. FILE TO OVERRIDE [e.g. logo_editor.js renamed to liferay-logo_editor.js]

Change the module name at first line.

AUI.add(
 'liferay-logo-editor-override',
 function(A) {
  var Lang = A.Lang;

....

....

....

renderUI: function() {
    var instance = this;
    console.log("LOGO EDITOR OVERRIDDEN...");

....

....

I took the reference from this post and explained as much I can.

Thanks to Liferay Staff members for the snippets!

You are just done, Try & Enjoy the function.............:)