Introduction
Liferay’s frontend client extensions provide a modern and flexible way to customize your portal’s look and feel. They move beyond traditional methods like themes and hooks, offering a cleaner, more flexible, and upgrade-friendly approach to UI customization. Liferay provides various types of front-end client extensions, including theme favicons, CSS, JavaScript, and other client extensions that you can use as required.
This blog post will provide an overview of every frontend client extension, explaining what it does and how it helps enhance the overall Liferay experience.
Prerequisites
Liferay DXP/Portal
Basic knowledge of Liferay
Experience in developing and deploying Liferay client extensions
Environment Requirements
Java
Liferay
What is a Frontend Client Extension?
A Frontend Client Extension is a decoupled, external module that adds custom UI functionality, styling, or interactive components to Liferay DXP/Portal without residing within the Liferay server’s Java Virtual Machine (JVM). You can create a front-end client extension by creating a .yaml configuration file. This file determines how and where the extension integrates with the portal.
How to create Client Extensions?
You can create Liferay client extensions using Blade CLI. Use the commands below to create client extensions. It provides Liferay’s sample client extensions that you can modify according to your needs.
From your root directory of your Liferay Workspace, run the following command :
blade samples client-extensions -l
- It will provide a list of client extensions. Now run the following command to create client extensions.
blade samples client-extensions client-extension-name
It will create the sample client extension in the root directory under the client-extension folder.
Types of front-end client extensions :
- CSS Client Extension : It allows adding custom CSS that applies to the specific page or site. From the page configuration or site configuration, you can add your CSS Client extension.
assemble:
- from: assets
hashify: global.css
into: static
ignek-global-css:
name: Ignek Global CSS
type: globalCSS
url: global.*.css
- Theme CSS Client Extension : It allows you to override theme CSS files(main.css and clay.css). Using this extension, you can customize the look and feel of the applied theme.
assemble:
- from: build/buildTheme/img
into: static/img
- from: build/buildTheme/images
into: static/images
ignek-theme-css:
clayRTLURL: css/clay_rtl.css
clayURL: css/clay.css
mainRTLURL: css/main_rtl.css
mainURL: css/main.css
name: Ignek Theme CSS
type: themeCSS
- JavaScript Client Extension : It allows for injecting custom JavaScript on over pages of the site. You can add your custom script according to your needs and apply it to the pages.
assemble:
- from: assets
hashify: global.js
into: static
ignek-global-js:
name: Ignek Global JS
type: globalJS
url: global.*.js
- Theme Favicon Client Extension : With Theme Client Extension, you can change the theme favicon of all pages of the site or a single page.
assemble:
- from: assets
hashify: favicon.ico
into: static
ignek-theme-favicon:
name: Ignek Theme Favicon
type: themeFavicon
url: favicon.*.ico
- Theme Sprite Map Client Extension : The SVG sprite map is an image that contains a group of icons. You need to add your custom icons(e.g., Pencil, cog, search) in the src folder and give an ID to that icon, and you can apply those icons by configuring that page and selecting the client extension from the Stripe client extension.
assemble:
- from: build/static
hashify: spritemap.svg
into: static
ignek-theme-spritemap-2:
name: Ignek Theme Spritemap 2
type: themeSpritemap
url: spritemap.*.svg
- Frontend Data Set Filter Client Extension : It allows you to create a custom filter on your dataset by creating a JavaScript function. By adding this client extension to your data set, you can improve user experience by providing filtering capabilities.
assemble:
- from: build/static
into: static
ignek-fds-filter:
name: Ignek FDS Filter
type: fdsFilter
url: index.*.js
- Editor Config Contributor Client Extensions : It allows you to override the existing CKEditor configuration in the ConfigContributor.java file. In yaml file, by adding editorConfigKeys, you can modify the editor with JavaScript.
assemble:
- from: build
into: static
ignek-editor-config-contributor:
editorConfigKeys:
- description
- fragmentEntryLinkRichTextEditor
- sampleAlloyEditor
- sampleClassicEditor
- sampleLegacyEditor
- sampleReactCKEditor5ClassicEditor
- sampleReactClassicEditor
name: Ignek Editor Config Contributor
type: editorConfigContributor
url: index.js
- Frontend Data Set Cell Renderer Client Extension : It allows you to customize your dataset. By applying this extension to your dataset, you can customize the value in the dataset by defining a JavaScript file.
assemble:
- from: build/static
into: static
ignek-fds-cell-renderer:
name: Ignek Frontend Data Set Cell Renderer
type: fdsCellRenderer
url: index.*.js
- JavaScript Import Map Entry Client Extension : It allows you to make JavaScript code or a resource available to any page rendered in a Liferay instance. You can bundle the JavaScript code and resources in this client extension. For example, you can bundle jQuery into the client extension and use it in Fragment.
assemble:
- from: build/static
into: static
lgnek-js-import-maps-entry:
bareSpecifier: jquery
name: Ignek JS Import Maps Entry
type: jsImportMapsEntry
url: jquery.*.js
Conclusion
Liferay Frontend Client Extensions simplify and modernize the way developers customize and extend the user interface of a Liferay DXP portal. By leveraging different client extension types such as CSS, JavaScript, Theme Favicon, Theme Spritemap, and Editor Config Contributors, developers can build more flexible and maintainable front-end solutions that enhance branding, usability, and performance.
