Embedding SAPUI5 Applications

You can embed SAPUI5 applications directly into the SAP Fiori launchpad on Portal to enhance the user experience.

Prerequisites

You are assigned the Content Admin role.

The SAPUI5 component is defined in a file named Component.js, which is located in the root or one of the inner folders of your application. This file is the component controller for the SAPUI5 application.

Context

By embedding SAPUI5 applications directly into the SAP Fiori launchpad on Portal, you achieve a better performance, a harmonized look-and-feel, and good support for mobile browsers.

Procedure

1. Zip the application and upload it to the Fiori Applications folder in the Web Resource Repository. Save the application according to the Web Resource Repository naming guidelines.
2. In the portal, go to Content Administration  Portal Content Management.
3. In the Portal Catalog, go to Portal Applications  com.sap.portal.appintegrator.sap  UI5.
4. In the context menu of the UI5 application view, choose Copy.
5. In the Portal Content folder, choose the location in which you want to create the view, and from the context menu choose Paste as PCD Object.
6. Open the iView that you created, and in the Properties editor, from the Show Category dropdown list, select UI5-FFP Integration.
7. Configure the following properties:

Property Name	Suggested Value
Embed iView in SAP Fiori Launchpad	true If set to false, the iView runs in an iFrame. This is recommended if the application runs with a different UI5 version than the SAP Fiori launchpad.
SAPUI5 Component Name	<the SAPUI5 component name>Examplecom.sap.component
SAPUI5 URL Path	The URL (root path) of the application. This is the path where the component.js file is located.Examplecom.sap.portal.resourcerepository/repo/fioriApplications/myUI5

1. Save your changes.