Documentation

Browser-Based Client Extensions

Available Liferay 7.4 U45+/GA45+

Liferay provides a variety of browser-based client extensions for augmenting your pages and integrating functionality. These extension types include CSS, JS, Theme CSS, Theme Favicon, Custom Element, and IFrame.

You can create and deploy these extensions from your Liferay Workspace. To generate a basic version of these browser-based client extensions, run this command using the Blade CLI in your Liferay workspace:

blade create -t client-extension [your-new-folder-name]

See Understanding Custom Element and IFrame Client Extensions to learn more about creating custom element and IFrame client extensions.

Note

You can add JS, 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

JavaScript client extensions are the most straightforward and easy to create. When you deploy a JavaScript client extension to your Liferay instance and configure a page to use it, the JavaScript contained in it automatically runs each time you visit the page. This allows you to add special functionality to your pages without the use of an OSGi module or theme.

See Creating Your First JavaScript Client Extension to get started working with this type.

CSS Client Extensions

CSS client extensions are a way to override CSS styling on your pages. When you deploy a CSS client extension to your Liferay instance and configure a page to use it, the CSS contained in it overrides the styling present on the page, including theme and style book settings.

See Creating Your First CSS Client Extension to get started working with this type.

Theme CSS Client Extensions

Similarly to CSS client extensions, you can also add CSS the same way as you would with a theme without deploying an entire theme. For this type of client extension, you use a clay.css file and a main.css file, which are the same style files generated by a theme by default. You can add this type of client extension as an option from Remote Apps in the Liferay Applications menu.

Add a theme CSS client extension to apply CSS to your pages the same way as you would with a theme, without the rest of the theme itself.

Note

The clay.css and main.css files must be hosted remotely to use this type of client extension.

Theme Favicon Client Extensions

You can also use client extensions to override the favicon for your pages in Liferay. When you deploy a theme favicon client extension, the icon file included with it 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.

Custom Element Client Extensions

Previously named Custom Element Remote Apps

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.

See Understanding Custom Element and IFrame Client Extensions for more information.

IFrame Client Extensions

Previously named IFrame Remote Apps

IFrame client extensions work similarly to custom element client extensions. However, they render external applications as <iframe> HTML elements, which allow for limited interaction from the host page. See Understanding Custom Element and IFrame Client Extensions for more information.

Additional Information