Overriding Liferay DXP's Default YUI and AUI Modules

Liferay DXP contains several default YUI/AUI modules. You may need to override functionality provided by these module’s scripts. To do this, you must create a custom AUI module containing three things:

  • 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

Follow these steps:

  1. Create an OSGi module to override the original one. For example, you can create a module named session-js-override-web to override Liferay DXP’s session.js file.

  2. Create a src/main/resources/META-INF/resources/js folder in your module, copy the original JavaScript file into it, and rename it. For example, create a copy of the session.js module and rename it session-override.js.

  3. Apply your modifications and save the file.

  4. Next, write your module’s configuration file (config.js) to apply your override. Add the config.js file to the module’s src/main/resources/META-INF/resources/js folder. The example config.js file below specifies the condition that the YUI/AUI Loader should load the custom AUI module (liferay-session-override) instead (indicated with the when property) of the trigger module (liferay-session). You can follow this same pattern to create your module’s config.js file:

    ;(function() {
        var base = MODULE_PATH + '/js/';
                groups: {
                    mymodulesoverride: { //mymodulesoverride
                        base: base,
                        combine: Liferay.AUI.getCombine(),
                        filter: Liferay.AUI.getFilterConfig(),
                        modules: {
                            'liferay-session-override': { //my-module-override
                                path: 'session-override.js', //my-module.js
                                condition: {
                                    name: 'liferay-session-override', //my-module-override
                                    trigger: 'liferay-session', //original module
                                    when: 'instead'
                        root: base
  5. Finally, you must configure your bnd.bnd file. For the system to apply the changes, you must specify the config.js’s location with the Liferay-JS-Config BND header. The liferay-session-override module from the previous example has the configuration below in its bnd.bnd file:

    Bundle-Name: session-js-override
    Bundle-SymbolicName: session.js.override.web
    Bundle-Version: 1.0.0
    Web-ContextPath: /liferay-session-override-web

Now you know how to override Liferay DXP’s default YUI/AUI modules!

Customizing JSPs

« Overriding MVCResourceCommandsOverriding lpkg files »
Was this article helpful?
0 out of 0 found this helpful