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.
- Go to Liferay workspace project → modules → new.
- Select other → Liferay → Liferay Module Project and click on “Next”.
- Enter the project name (Ex. give project name “override-ddm-js” to override “dynamic-data-mapping-web.js” portal JavaScript file.)
- Select “Project Template Name” as “mvc-portlet” and click on “Next”.
- 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.
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.
// config.js
;(function () {
var base = MODULE_PATH + '/js/';
AUI()
.applyConfig({
groups: {
OverrideDDMWeb: {
base: base,
combine: Liferay.AUI.getCombine(),
filter: Liferay.AUI.getFilterConfig(),
modules: {
'liferay-portlet-dynamic-data-mapping-override': { // Override module name
path: 'custom-ddm.js', // Override your custom javascript file name
condition: {
name: 'liferay-portlet-dynamic-data-mapping-override',
trigger: 'liferay-portlet-dynamic-data-mapping', // Give original module name
when: 'instead'
}
},
root: base
}
}
}
})();
})
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.
// custom-ddm.js
AUI.add(
'liferay-portlet-dynamic-data-mapping-custom-fields-override',
function (A) {
... // your logic
})
6) Now you need to configure your module’s bnd.bnd file.
// bnd.bnd
Bundle-Name: override-ddm-js
Bundle-SymbolicName: ….
Bundle-Version: ….
Liferay-JS-Config: /META-INF/resources/js/config.js //your path
Web-ContextPath: /override-ddm-js
7) Now, deploy the module.
Note:- If javascript changes are not getting reflected, please follow the below steps:-
- Give a different group name for every module in config.js file.
- Clear browser’s cache.
- Login into the liferay portal and clear cache. Goto Control Panel → configuration → server administration and then click on execute button for below actions.
- Clear the direct servlet cache.
