Liferay provides many ways to override its behavior. Sometimes we need to override javascript files like liferay session, liferay scheduler, liferay dynamic-data-mapping-web and so many. Follow below things, if you want to override javascript file. 

  • A copy of the original module’s javascript file containing your modifications.
  • A config.js file that specifies the modified javascript file’s path and the module it overrides.
  • A bnd.bnd file that tells the OSGi container to override the original.

Prerequisites

  • Java 
  • Liferay portal 7/7.x

Environment Requirement

  • JDK 8
  • Eclipse
  • Liferay Portal

1. Create an OSGi module to override the original file.

  1. Go to Liferay workspace project modules new.
  2. Select other Liferay Liferay Module Project and click on “Next”.
  3. Enter the project name (Ex. give project name “override-ddm-js” to override “dynamic-data-mapping-web.js” portal JavaScript file.)
  4. Select “Project Template Name” as “mvc-portlet” and click on “Next”.
Override Liferay 7 Portal Javascript
  1. Enter a Package name and click on “Finish”.

2. Create a js folder in src/main/resources/META-INF/resources. 

3. Create your custom javascript file in the js folder. File structure of project will look like below.

Override Liferay 7 Portal Javascript

Note :- please make sure, liferay default javascript file name and your javascript file name have different names.

4. Now add config.js file as below.

Follow write your module’s configuration file for your requirement.

5. Now you need to update the module name in your custom javascript file as per your config.js file. (‘liferay-portlet-dynamic-data-mapping-custom-fields-override’ instead of liferay-portlet-dynamic-data-mapping-custom-fields) custom-ddm.js file.

6. Now you need to configure your module’s bnd.bnd file. 

7. Now, deploy the module.

Note:- If javascript changes are not getting reflected, please follow the below steps:-

  1. Give a different group name for every module in config.js file.
  2. Clear browser’s cache.
  3. Login into the liferay portal and clear cache. Goto Control Panel configuration server administration and then click on execute button for below actions.
    1. Clear the direct servlet cache.