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


37 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
    Replies
    1. Great Article Cloud Computing Projects

      Networking Projects

      Final Year Projects for CSE

      JavaScript Training in Chennai

      JavaScript Training in Chennai

      The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

      Delete
  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
  6. Thanks for your post. This is excellent information. The list of your blogs is very helpful for those who want to learn, It is amazing!!! You have been helping many application.
    best selenium training in chennai | best selenium training institute in chennai selenium training in chennai | best selenium training in chennai | selenium training in Velachery

    ReplyDelete
  7. Such a Great Article!! I learned something new from your blog. Amazing stuff. I would like to follow your blog frequently. Keep Rocking!!
    Blue Prism training in chennai | Best Blue Prism Training Institute in Chennai

    ReplyDelete
  8. Great Post,really it was very helpful for us.
    Thanks a lot for sharing!
    I found this blog to be very useful!!
    JAVA training in Bangalore

    ReplyDelete
  9. This is an awesome post.Really very informative and creative contents. These concept is a good way to enhance the knowledge.I like it and help me to article very well.Thank you for this brief explanation and very nice information.Well, got a good knowledge.
    DedicatedHosting4u.com

    ReplyDelete
  10. Great. It is good to constantly coming up with creative ideas. Provides much needed knowledge. goal oriented blog posts and always tried to find creative ways to meet goals.

    Thanks
    Online affiliates

    ReplyDelete

  11. Your post is very good. I got to learn a lot from your post. Thank you for sharing your article for us. it is amazing post
    what is seo
    types of seo

    ReplyDelete

  12. This is a fantastic idea! I like it a lot because it's super easy for the audience to see the value of opting in. wonderful and amazing post very use full your post thanks for sharing your article
    Android Application development
    Web application

    ReplyDelete


  13. Get the most advanced Hadoop Course by Professional expert. Just attend a FREE Demo session.
    call us @ 9884412301 | 9600112302
    Hadoop training in chennai | Hadoop training in velachery

    ReplyDelete
  14. This blog is the general information for the feature. You got a good work for these blog.We have a developing our creative content of this mind.Thank you for this blog. This for very interesting and useful.
    Apache Spark with Scala online training
    AWS online training

    ReplyDelete
  15. Nice post...Thanks for sharing...
    Best AWS with Devops Training in Bangalore | AWS with Devops Training Course Content | AWS with Devops Training Institutes | AWS with Devops Online Training - Elegant IT Services
    - Elegant IT Services provides Best AWS with Devops Training in Bangalore with expert real-time trainers who are working Professionals with min 8 + years of experience in AWS with Devops Training Industry, we also provide 100% Placement Assistance with Live Projects on AWS with Devops Training.

    ReplyDelete
  16. I’d should talk to you here. Which is not some thing I do! I quite like reading a post which will make people believe. Also, many thanks permitting me to comment! webflow agency

    ReplyDelete
  17. Hey There. I found your blog using msn. This is an extremely well written article. I’ll be sure to bookmark it and return to read more of your useful info. Thanks for the post. I’ll definitely comeback. webflow development agency

    ReplyDelete
  18. And Im running from a standard users account with strict limitations, which I think may be the limiting factor, but Im running the cmd as the system I am currently working on. ui/ux design

    ReplyDelete
  19. This content is written very well. Your use of formatting when making your points makes your observations very clear and easy to understand. Thank you. best brand agencies

    ReplyDelete
  20. Cheers for this excellent. I was wondering whether you were planning of publishing similar posts to this. .Keep up the excellent articles! top front end developers

    ReplyDelete
  21. Enjoyed reading this, very good stuff, thankyou . website designer nyc

    ReplyDelete
  22. I had been honored to receive a call coming from a friend as he observed the important points shared in your site. Looking at your blog publication is a real great experience. Thank you for thinking of readers like me, and I desire for you the best of achievements for a professional surface area. resorts in cuba new york web design company

    ReplyDelete
  23. There is noticeably a lot to realize about this. I suppose you made certain nice points in features also. san francisco brand agency

    ReplyDelete
  24. Outstanding post, I think blog owners should larn a lot from this blog its really user genial . branding sf

    ReplyDelete
  25. I believe that your blog will surely help the readers who are really in need of this vital piece of information. Waiting for your updates
    AWS training in chennai | AWS training in annanagar | AWS training in omr | AWS training in porur | AWS training in tambaram | AWS training in velachery

    ReplyDelete


  26. Thank you for sharing such a great information.Its really nice and informative.hope more posts from you. I also want to share some information recently i have gone through and i had find the one of the best
    DevOps Training in Chennai | DevOps Training in anna nagar | DevOps Training in omr | DevOps Training in porur | DevOps Training in tambaram | DevOps Training in velachery

    ReplyDelete
  27. Wow, amazing weblog format! How lengthy have you been running a blog for? you make running a blog look easy. The total glance of your website is wonderful, let alone the content!
    oracle training in chennai

    oracle training in velachery

    oracle dba training in chennai

    oracle dba training in velachery

    ccna training in chennai

    ccna training in velachery

    seo training in chennai

    seo training in velachery

    ReplyDelete
  28. Successful visual communication is seen as reasonable, fitting, and valuable.Professional graphic design

    ReplyDelete