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
- Create Liferay OSGi module
- Copy original AUI/YUI JavaScript file from source to created module
- Create Config.js file to provide modules information
- 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.
Author
Posts
ReplyDeleteDelving 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.
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.
ReplyDeleteLiferay 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.
ReplyDeleteThese 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