IMPORTANT: As we revamp and transition our documentation to this site, you may find the articles you need on Liferay's Help Center.

Analytics Cloud Commerce DXP / Portal DXP Cloud Reference

Documentation Menu

Highlighting

Remove Highlighting

Go Back

• Getting Started
• Site Building
• Content Authoring and Management
• Process Automation
• Using Search
• Collaboration and Social
• Users and Permissions
• System Administration
• Building Applications
  • Objects
  • Developing a JavaScript Application
  • Developing a REST Web API
  • Developing a Java Web Application
  • Core Frameworks
  • Data Frameworks
  • Remote Apps
    • Understanding Remote App Types
    • Remote Apps Tutorials
    • Remote Apps UI Reference
  • Tooling
  • Reference
  • App Builder
• Liferay Internals
• Headless Delivery
• Installation and Upgrades

English

• Japanese
• English

• Liferay Learn
• DXP
• Building Applications
• Remote Apps
• Remote Apps UI Reference

Remote Apps UI Reference

Remote Apps use Liferay’s front-end infrastructure to register external JavaScript applications and render them as Page widgets. To access Remote Apps, open the Global Menu (), click the Applications tab, and go to Remote Apps.

To add a remote app, click the Add button ().

When creating or editing a remote app, the following fields are available depending on the selected remote app type (i.e., IFrame or Custom Element).

Field	Description
Name	The display name used for the remote app entry and its widget.
Description	A description for the remote app entry.
Source Code URL	A URL to the external application’s source code for convenience.
Type	Currently, Liferay supports two types: IFrame and Custom Element. These types determine the contract between the Liferay platform and the external application.
URL (IFrame)	A URL to where the external application is hosted. The entry’s widget renders the application in an <iframe> element that points to the remote app’s URL.
HTML Element Name (Custom Element)	The name for the custom element that’s declared in its .js file. The .js file that creates the custom element must associate it with a name. This name must match the HTML Element Name value.
Use ES Modules (Custom Element)	Determine whether the browser sees the application’s JS injection as an ES module. When enabled, Liferay uses <script src="js url" type="module"> when building the remote app so the application is treated as an ES6 browser module.
URL (Custom Element)	Enter individual URLs for each of the application’s .js files. Click the Add button () to add more URL fields.
CSS URL (Custom Element)	Enter individual URLs for each of the application’s .css files. Click the Add button () to add more CSS URL fields.
Instanceable	Determine whether the remote app’s widget is instanceable. When enabled, multiple instances of a widget can be added to the same Page.
Portlet Category Name	Enter the widget’s category in the Widget menu. The default value is Remote Apps.
Friendly URL Mapping	Define the widget’s Friendly URL Mapping, so you can refer to it using a more user readable URL.
Properties	Define default properties that are included in all instances of the app’s widget. These properties are passed to the application by the widget as additional URL attributes so they be accessed programmatically. If desired, you can configure individual widget instances to override these entry properties.

Additional Information

• Remote Apps

• Understanding Remote App Types

• Creating a Basic Remote App

Not finding what you're looking for?

Pardon our dust as we revamp and transition our product documentation to this site. If something seems missing, please check Liferay Help Center documentation for Liferay DXP 7.2 and previous versions.

Try Liferay's Help Center