Sunday, March 29, 2020

Liferay 7/DXP Overriding Liferay Portal Default AUI/YUI Modules


Liferay 7/DXP is providing many extension points to override portal sources and modules code. Sometimes we may need to override the default AUI and YUI modules JavaScript. Liferay 7/DXP is already providing way to override JavaScript.  OSGi internally used the extender pattern to override default modules with our changes.

The following are steps to override the default AUI and YUI modules

  1. Create Liferay OSGi module
  2. Copy original AUI/YUI JavaScript file from source to created module
  3. Create Config.js file to provide modules information
  4. Add Liferay-JS-Config header in module bnd file

Create Liferay OSGi module

Create brand new OSGi module with “mvc-portlet” template. Here are more details to create Liferay OSGi Modules with BLADE. You can also use Liferay IDE, Liferay Developer Studio and IntelliJ Liferay. Assume we are creating module name with “liferay72-ddm-custom-field”.


Copy original AUI/YUI JavaScript file from source to created module

Identify the AUI/YUI JavaScript files which contains the modification and copy original java script files from source to created module. Maintain the same path which original files already having in the source code.

All JavaScript files should in module “src/main/resources/META-INF/resources/js” directory and if directory not available in the module, create it in the module.

Take the example that we are trying to create new ddm custom field and its required following two AUI Modules need to override and these are available in “dynamic-data-mapping-web/src/main/resources/META-INF/resources/js

liferay-portlet-dynamic-data-mapping-custom-fields
liferay-portlet-dynamic-data-mapping

These modules are available in portal source code of “dynamic-data-mapping-web”.


copy main.js and custom_field.js files form original module to created module liferay72-ddm-custom-field under “/src/main/resources/META-INF/resources/js




Change names to “custom_fields_override.js” and “main_override.js” and edit the files AUI definition names. It should require to change AUI definition name to distinguish from original AUI/YUI definition names.

Example of “main_override.js” after changing the definition name.


AUI.add(
     'liferay-portlet-dynamic-data-mapping-override',
     A => {


Example of “custom_fields_override.js” after changing the definition name

AUI.add(
     'liferay-portlet-dynamic-data-mapping-custom-fields-override',
     A => {

Now add your JavaScript modification to these files.

Create “config.js” file to provide modules information

Create “config.js” file under module “src/main/resources/META-INF/resources/js”. Config.js files have information like modified AUI/YUI JavaScript file location and its original AUI module definition names. This will help OSGi run time to load modified version AUI JavaScript.


The following example of configuration to consider above changes


;(function() {
     var base = MODULE_PATH + '/js/';

     AUI().applyConfig(
           {
                groups: {
                      liferaysavvymodulesoverride: {
                           base: base,
                           combine: Liferay.AUI.getCombine(),
                           filter: Liferay.AUI.getFilterConfig(),
                           modules: {
                                 'liferay-portlet-dynamic-data-mapping-override': {
                                      path: 'main_override.js',
                                      condition: {
                                            name: 'liferay-portlet-dynamic-data-mapping-override',
                                            trigger: 'liferay-portlet-dynamic-data-mapping',
                                            when: 'instead'
                                      }
                                 },
                                 'liferay-portlet-dynamic-data-mapping-custom-fields-override': {
                                      path: 'custom_fields_override.js',
                                      condition: {
                                            name: 'liferay-portlet-dynamic-data-mapping-custom-fields-override',
                                            trigger: 'liferay-portlet-dynamic-data-mapping-custom-fields'
                                      }
                                 }
                           },
                           root: base
                      }
                }
           }
     );
})();



Trigger is original module AUI definition name and name attribute modified version AUI definition name.
There are many examples can find in Liferay source code foe config.js

Add Liferay-JS-Config header in module bnd file

Liferay-JS-Config” is OSGi header and its based-on extender pattern. At run time with header OSGi container will override the original AUI JavaScript with modified JavaScript.
Example module of bnd.bnd file


Liferay-JS-Config: /META-INF/resources/js/config.js



GitHub Source

Gradle Module


Maven Module



This is the mechanism to apply for any AUI/YUI that required modification in our regular development. This example may not relevant to your needs but it will explain the process of overriding default AUI/YUI.

4 comments :


  1. Delving into Liferay 7/DXP, I explored the intricacies of overriding default AUI/YUI modules in the Liferay Portal. Unraveling this technical maze opened up new possibilities for customization, empowering users to tailor their experience with enhanced modules and functionalities.

    ReplyDelete
  2. Exploring Liferay 7/DXP, I learned about overriding default AUI/YUI modules in the Liferay Portal. This technical journey allowed me to customize and enhance the portal's modules, offering a tailored experience and expanding the platform's capabilities.

    ReplyDelete
  3. Liferay Training and Weekend Liferay Workshops offer an immersive learning experience for individuals keen on mastering Liferay technologies. Led by industry experts, these sessions provide hands-on training, covering everything from basic concepts to advanced techniques. Perfect for professionals seeking to enhance their skills or organizations aiming to optimize their Liferay implementations. Don't miss out on this opportunity to level up your expertise.

    ReplyDelete
  4. These sessions provide hands-on training, covering everything from basic concepts to advanced techniques. Perfect for professionals seeking to enhance their skills or organizations aiming to optimize.

    ReplyDelete

Recent Posts

Recent Posts Widget

Popular Posts