If you want to override more than one Javascript files then you have to add below files in the module:

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

For example, You want to override session.js file from frontend-js-aui-web module and scheduler.js file from calendar-web module.

There are two ways to override Default Liferay Javascript Files:

Override more than one javascript file in same module:

Please follow below steps:

  1. Create OSGI module to override original one. For example, you can give module’s name as override-default-js.
  2. Give package name and Click on Finish button.
  3. Following Module Structure would be displayed. Delete src/main/java Package and content Package from src/main/resources.
  4. Create a js folder in src/main/resources/META-INF/resources path. Create copy of scheduler.js and session.js file and Give the name as custom-scheduler.js and custom-session.js file. Apply your modifications and save the files.
    Note: Please make sure that Liferay Default Javascript File and custom Javascript file’s name must not be same.
  5. Create js file in src/main/resources/META-INF/resources/js folder. Next, you have to mention javascript file in config.js file, which needs to override. Please check comments which is mentioned in config.js file. 
Code Snippet:
 config.js file: ;(function() {AUI().applyConfig({groups: {CalendarWebJsOverride: { // Please make sure to give Different Group Name.Here, We have given group name as CalendarWebJsOverride to override calendar-web module's javascript file.base: MODULE_PATH + '/js/',combine: Liferay.AUI.getCombine(),filter: Liferay.AUI.getFilterConfig(),modules: {'liferay-scheduler-override': { //Override Module Namepath: 'custom-scheduler.js', // Override Javascript File Namecondition: {name: 'liferay-scheduler-override', // Override Module Nametrigger: 'liferay-scheduler', when: 'instead' // Give Original Module Name in trigger},requires: ['async-queue','aui-datatype','aui-scheduler','dd-plugin','liferay-calendar-message-util','liferay-calendar-recurrence-converter','liferay-calendar-recurrence-util','liferay-calendar-util', 'liferay-node','liferay-store','promise','resize-plugin']},},root: MODULE_PATH + '/js/'},FrontendJsAuiWebOverride: { // Here, We have given group name as FrontendJsAuiWebOverride to override front-end-js-aui-web module's javascript file.base: MODULE_PATH + '/js/',combine: Liferay.AUI.getCombine(),filter: Liferay.AUI.getFilterConfig(),modules: {'liferay-session-override': { // Override Module Namepath: 'custom-session.js', // Override Javascript File Namecondition: {name: 'liferay-session-override', // Override Module Nametrigger: 'liferay-session', when: 'instead' // Give Original Module Name}}},root: MODULE_PATH + '/js/'}}});})();  

6. In above example, config.js file specifies the condition that YUI/AUI loader should load custom AUI module – liferay-scheduler-override instead of trigger module liferay-scheduler. Here, instead is indicated when property of config.js file.

custom-scheduler.js file:

Note:

  • liferay-scheduler-override module name of config.js file and custom-scheduler.js file’s module name must be same. Same thing is applied to custom-session.js file.
  • Please make sure to give different Group Name per module in config.js file. In above example, We have given group name as CalendarWebOverride to override calendar-web module’s javascript file and FrontendJsAuiWebOverride to override front-end-js-aui-web module’s javascript file.

7. In bnd.bnd file, you have to specify config.js location and created module name in Web-ContextPath.

bnd.bnd file:

Bundle-Name: override-default-js
Bundle-SymbolicName: com.override.js
Bundle-Version: 1.0.0
Liferay-JS-Config:/META-INF/resources/js/config.js
Web-ContextPath: /override-default-js

8. Deploy the module

 Override more than one javascript file in different module:

Let’s say, you want to override session.js file from frontend-js-aui-web module. Please follow below steps:

1. Create override-session-js OSGI module. Select Project Templete Name as mvc-portlet. Give package name and Click on Finish button.

2. Delete src/main/java Package and content Package from src/main/resources.

3. Create a js folder in src/main/resources/META-INF/resources path. Create copy of session.js file and Give the name as custom-session.js.

Apply your modifications and save the files.

Note: Please make sure that Liferay Default Javascript File and custom Javascript file’s name must not be same.

 

Code Snippet:
 config.js file:
 
;(function() {
AUI().applyConfig({
groups: {
FrontendJsAuiWebOverride: { // Here, We have given group name as FrontendJsAuiWebOverride to override front-end-js-aui-web module's javascript file.
base: MODULE_PATH + '/js/',
combine: Liferay.AUI.getCombine(),
filter: Liferay.AUI.getFilterConfig(),
modules: {
'liferay-session-override': { // Override Module Name
path: 'custom-session.js', // Override Javascript File Name
condition: {
name: 'liferay-session-override', // Override Module Name
trigger: 'liferay-session', when: 'instead' // Give Original Module Name
}
}
},root: MODULE_PATH + '/js/'
}
}
});
})();

custom-session.js file:

bnd.bnd file:

Bundle-Name: override-session-js
Bundle-SymbolicName: override.session.js
Bundle-Version: 1.0.0
Liferay-JS-Config:/META-INF/resources/js/config.js
Web-ContextPath: /override-session-js

Deploy the module.

If you want to override scheduler.js in different module then create another OSGI module and follow same steps which is mentioned above to override session.js file.

Points to be Noted:

Sometimes, Javascript file changes are not reflected so please do below steps:

    1. Please make sure to give different Group Nameper module in config.js file
    2. Clear browser’s cache.
    3. Login through Admin and Go to Control Panel > Configuration > Server Administration >Click on execute button for below actions:
      • Run the garbage collector to free up memory.
      • Generate thread dump.
      • Clear content cached by this VM.
      • Clear content cached across the cluster.
      • Clear the database cache.
      • Clear the direct servlet cache.
    4. Right click on reload icon in browser and Click on Empty Cache and Hard Reload Button.
      This blog has been written by our Associate Consultant Mansi Panchal
Hadoop to Snowflake New Web