Front-End Client Extensions
Available Liferay 7.4 U45+/GA45+
Front-end client extensions augment your pages and integrate new functionality. Available types include CSS, JavaScript, Theme CSS, Theme JS, Theme Favicon, Custom Element, and IFrame.
You can create and deploy these extensions from your Liferay Workspace.
See Understanding Custom Element and IFrame Client Extensions to learn more about creating custom element and IFrame client extensions.
You can add JavaScript, CSS, or Theme CSS client extensions to layout sets (i.e., page sets), master templates, page templates, and individual content pages. The level at which you add the extension determines which entities inherit the extension’s code. For example, if you add extensions to a master template, all page templates and content pages using the master template inherit its extensions.
JavaScript Client Extensions
Liferay Experience Cloud and Liferay DXP 7.4+ (on-premises)
JavaScript client extensions provide global JavaScript libraries and logic throughout your Liferay instance. When you deploy a JavaScript client extension and configure a page to use it, its JavaScript runs automatically each time you visit the page (in the page’s header or footer).
Specify a JavaScript client extension in your client-extension.yaml
file:
type: globalJS
See Using a JavaScript Client Extension to get started.
CSS Client Extensions
Liferay Experience Cloud and Liferay DXP 7.4+ (on-premises)
CSS client extensions introduce new CSS styling to pages. A deployed CSS client extension on a page adds to the page’s existing styling, including theme and style book settings.
Specify a CSS client extension in your client-extension.yaml
file :
type: globalCSS
See Using a CSS Client Extension to get started.
Theme JavaScript Client Extensions
Liferay Experience Cloud and Liferay DXP 7.4+ (on-premises)
As with JavaScript client extensions, you can add JavaScript libraries and logic to replace the ones provided by your site’s theme.
Specify a Theme JavaScript client extension in your client-extension.yaml
file:
type: themeJS
Theme CSS Client Extensions
{bdg-secondaryLiferay Experience Cloud and Liferay DXP 7.4+ (on-premises)
While CSS client extensions add styling to pages, theme CSS client extensions override styling on the page, including from the site’s theme. The client extension uses a clay.css
file and a main.css
file to replace the identically named files normally used in your site’s theme.
You can add this type of client extension as an option from Client Extensions in the Liferay Applications menu.
The clay.css
and main.css
files must be hosted remotely to use this type of client extension.
Specify a Theme CSS client extension in your client-extension.yaml
file:
type: themeCSS
Theme Favicon Client Extensions
Liferay Experience Cloud and Liferay DXP 7.4+ (on-premises)
Override the favicon for your pages in Liferay. When deployed, the provided icon file becomes available for any page in Liferay. You can access it in a separate Client Extensions tab when you configure the favicon for a page from the Page Design Options menu.
Theme Sprite Map Client Extensions
Liferay Experience Cloud and Liferay DXP 7.4+ (on-premises)
Theme sprite map client extensions override the sprite map for site pages. Define the sprite map as an .svg
image, and it replaces the one used by your site’s current theme.
Specify a theme sprite map client extension in your client-extension.yaml
file:
type: themeSpritemap
Custom Element Client Extensions
Liferay Experience Cloud and Liferay DXP 7.4+ (on-premises)
Previously named Custom Element Remote App
Custom element client extensions use Liferay’s front-end infrastructure to integrate external applications with the platform and render them as page widgets. They can integrate applications from any domain accessible outside of Liferay.
To use custom element client extensions, you create entries at the company level with the necessary URLs and details to register them with Liferay. Liferay then generates a unique widget for each entry and renders the application as a custom HTML element.
Specify a custom element client extension in your client-extension.yaml
file:
type: customElement
See Understanding Custom Element and IFrame Client Extensions for more information.
IFrame Client Extensions
Liferay Experience Cloud and Liferay DXP 7.4+ (on-premises)
Previously named IFrame Remote Apps
IFrame client extensions work like custom element client extensions. However, they render external applications as <iframe>
HTML elements, which allow for limited interaction from the host page. Unlike other front-end client extensions, these do not provide a static resource.
Specify IFrame client extensions in your client-extension.yaml
file:
type: iframe
See Understanding Custom Element and IFrame Client Extensions for more information.
Front-end Client Extension Properties
Set these properties in the client-extension.yaml
file of any front-end client extension:
Name | Data Type | Default Value | Description |
---|---|---|---|
baseURL |
String | Derived from site URL | The base path from which all of the client extension’s defined resources are served. |
description |
String | The client extension’s description. | |
name |
String | The client extension’s name (as it appears in the UI). A name is required for front-end client extensions. | |
sourceCodeURL |
URL | https://www.liferay.com | The address to the client extension’s source repository. |
typeSettings |
String[] | [] | A list of strings that are processed with Liferay’s UnicodeProperties syntax. Type-specific client extension properties are copied automatically into this when the client extension is built. |
See Configuring Client Extensions in client-extension.yaml
for more information.