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


8 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
  3. Really cool post, highly informative and professionally written and I am glad to be a visitor of this perfect blog, thank you for this rare info!
    Front end development course in chennai

    ReplyDelete
  4. Thanks for giving a great information about override-javascript Good Explination nice Article
    anyone want to learn advance devops tools or devops online training
    DevOps Online Training DevOps Online Training hyderabadcontact Us: 9704455959

    ReplyDelete
  5. AWS Training in Bangalore - Live Online & Classroom
    myTectra Amazon Web Services (AWS) certification training helps you to gain real time hands on experience on AWS. myTectra offers AWS training in Bangalore using classroom and AWS Online Training globally. AWS Training at myTectra delivered by the experienced professional who has atleast 4 years of relavent AWS experince and overall 8-15 years of IT experience. myTectra Offers AWS Training since 2013 and retained the positions of Top AWS Training Company in Bangalore and India.

    IOT Training in Bangalore - Live Online & Classroom
    IOT Training course observes iot as the platform for networking of different devices on the internet and their inter related communication. Reading data through the sensors and processing it with applications sitting in the cloud and thereafter passing the processed data to generate different kind of output is the motive of the complete curricula. Students are made to understand the type of input devices and communications among the devices in a wireless media.

    ReplyDelete