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.

note

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.

Add a theme CSS client extension to replace CSS provided by your site's theme.

note

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.

When you configure the favicon for a page, access the favicon from your client extension from a special Client Extensions tab.

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.

Front-End Client Extensions

Not finding what you're looking for?