Override Liferay Portal JavaScript

Introduction

Liferay modules contains portal default files. For JSPs you can easily override using fragments. But, for default JavaScript files you can not override directly. So, for override JavaScript files requires below things.

• Copy original modules JavaScript file with your customization.
• Create configuration file for configure customised JavaScript file.
• Add config.js file path and WebContext-Path into module bnd file for override original module.

Follow the steps to override Liferay portal default js :

NOTE : Must remember to change the original file name, because the original JS file and your JS file should not be the same name. (E.g. change “session.js” file name to “custom-session.js”.)

1. Create an OSGI module to override original file. (E.g. give module name “override-session-js” to override “session.js” portal JavaScript file.)
2. Create a  js  folder under  WEB-INF/resources/  then add copied original JavaScript file into js folder and rename it.
3. Do the modification in the JavaScript file as per your requirement and save it.
4. Now, you need to configure modules for Liferay Portal’s Loaders. For that add  config.js  file in the JavaScript folder. Modules are defined in config.js file as per the below pattern.
5. For loading custom module you have to update module name in copied JavaScript file as per your config.js file. ( liferay-session-override  instead of  liferay-session ) custom-session.js file: 
   
6. In the final step, you have to configure your bundles  bnd  file. (Add config.js file path and Web-ContextPath). 
7. Now, deploy the module.

If JavaScript changes are not visible then perform the below steps:

1. Use different Group Name for every module in config.js file.
2. Do  Empty Cache and Hard Reload  in browser.
3. Log In with admin user in Liferay Portal then click on Control Panel >> Configuration >> Server Administration and then Click on execute:
   • Run the garbage collector to free up memory.
   • Clear the database cache.
   • Clear the direct servlet cache.

Happy Reading!!