Introduction
When you want to modify JSPs from OSGI module deployed in Liferay bundle, you need to create fragment module which provides you way to modify existing JSPs from OSGI modules deployed in Liferay bundle.
Let’s say you have requirement of modifying login.jsp in order to achieve your custom look and feel for login portlet. Follow below steps to create fragment module (hook) to override login.jsp of login portlet.
Prerequisites
- Java
- Liferay portal 7/7.x
Environment Requirement
Customize the look & feel of login portlet
1) Create new Liferay Fragment Module Project
Using Blade CLI,
blade create -t fragment -h [HOST_BUNDLE_SYMBOLIC_NAME] -H [HOST_SYMBOLIC_VERSION] [PROJECT_NAME]
Using Maven,
mvn archetype:generate \
-DarchetypeGroupId=com.liferay \
-DarchetypeArtifactId=com.liferay.project.templates.fragment \
-DartifactId=[projectName] \
-Dpackage=[packageName] \
-DclassName=[className] \
-DliferayVersion=7.0
Using eclipse IDE,
- Go to liferay workspace project → modules → new
- Select other → Liferay → Liferay Fragment Module Project and Click
- Enter project name
- Select “Liferay runtime name” as select “Liferay 7.x” and Click on “Next”
![Create Liferay Fragment Module in Eclipse | Customize the look & feel of login portlet in Liferay Create Liferay Fragment Module in Eclipse](https://www.ignek.com/wp-content/uploads/2024/03/Create-Liferay-Fragment-Module-in-Eclipse.webp)
- Select “Liferay Portal Bundle Directory ” and click on “finish”
![Choose Liferay Portal Bundle Directory | Customize the look & feel of login portlet in Liferay Choose Liferay Portal Bundle Directory](https://www.ignek.com/wp-content/uploads/2024/03/Choose-Liferay-Portal-Bundle-Directory.webp)
- Click on “next”
- Select “Host OSGi Bundle” we have selected “com.liferay.login.web-4.0.8.jar”
- Select “login.jsp” and click on “Finish”
![Selecting file to override | Customize the look & feel of login portlet in Liferay Selecting file to override](https://www.ignek.com/wp-content/uploads/2024/03/Selecting-file-to-override.webp)
- The necessary file structure as below
![File stucture of a login fregment portlet | Customize the look & feel of login portlet in Liferay File stucture of a login fregment portlet](https://www.ignek.com/wp-content/uploads/2024/03/File-stucture-of-a-login-fregment-portlet.webp)
2) Now open login.jsp, add your changes and save it
3) Now build and deploy “login-fragment” on your Liferay server
![Checking updated login page | Customize the look & feel of login portlet in Liferay Checking updated login page](https://www.ignek.com/wp-content/uploads/2024/03/Checking-updated-login-page.webp)
Note: If changes are not getting reflected in front-end, we need to clear cache of Liferay bundle. You can restart Liferay bundle or you can clear servlet cache from Liferay control panel.