Featured post

Docker setup for Liferay 7 with MySQL

Thursday, 2 November 2017

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.............:)


5 comments:

  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. JavaScript Training in Chennai

    ReplyDelete
  2. Your good knowledge and kindness in playing with all the pieces were very useful. I don’t know what I would have done if I had not encountered such a step like this "Devops Training in Bangalore"

    ReplyDelete

There was an error in this gadget