Liferay Frontend Client Extensions: An Overview

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

1blade samples client-extensions -l

It will provide a list of client extensions. Now run the following command to create client extensions

1blade 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.

1assemble:
2   -   from: assets
3       hashify: global.css
4       into: static
5ignek-global-css:
6   name: Ignek Global CSS
7   type: globalCSS
8   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.

1assemble:
2   -   from: build/buildTheme/img
3       into: static/img
4   -   from: build/buildTheme/images
5       into: static/images
6ignek-theme-css:
7   clayRTLURL: css/clay_rtl.css
8   clayURL: css/clay.css
9   mainRTLURL: css/main_rtl.css
10   mainURL: css/main.css
11   name: Ignek Theme CSS
12   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

1assemble:
2   -   from: assets
3       hashify: global.js
4       into: static
5ignek-global-js:
6   name: Ignek Global JS
7   type: globalJS
8   url: global.*.js
9

Theme Favicon Client Extension: With Theme Client Extension, you can change the theme favicon of all pages of the site or a single page.

1assemble:
2   -   from: assets
3       hashify: favicon.ico
4       into: static
5ignek-theme-favicon:
6   name: Ignek Theme Favicon
7   type: themeFavicon
8   url: favicon.*.ico
9

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

1assemble:
2   -   from: build/static
3       hashify: spritemap.svg
4       into: static
5ignek-theme-spritemap-2:
6   name: Ignek Theme Spritemap 2
7   type: themeSpritemap
8   url: spritemap.*.svg
9

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.

1assemble:
2   -   from: build/static
3       into: static
4ignek-fds-filter:
5   name: Ignek FDS Filter
6   type: fdsFilter
7   url: index.*.js
8

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.

1assemble:
2   -   from: build
3       into: static
4ignek-editor-config-contributor:
5   editorConfigKeys:
6       -   description
7       -   fragmentEntryLinkRichTextEditor
8       -   sampleAlloyEditor
9       -   sampleClassicEditor
10       -   sampleLegacyEditor
11       -   sampleReactCKEditor5ClassicEditor
12       -   sampleReactClassicEditor
13   name: Ignek Editor Config Contributor
14   type: editorConfigContributor
15   url: index.js
16

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.

1assemble:
2   -   from: build/static
3       into: static
4ignek-fds-cell-renderer:
5   name: Ignek Frontend Data Set Cell Renderer
6 type: fdsCellRenderer
7   url: index.*.js
8

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.

1assemble:
2   -   from: build/static
3       into: static
4lgnek-js-import-maps-entry:
5   bareSpecifier: jquery
6   name: Ignek JS Import Maps Entry
7   type: jsImportMapsEntry
8   url: jquery.*.js
9

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.