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 Start of the navigation pathContent Administration Next navigation step Portal Content ManagementEnd of the navigation path.
  3. In the Portal Catalog, go to Start of the navigation pathPortal Applications Next navigation step com.sap.portal.appintegrator.sap Next navigation step UI5End of the navigation path.
  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>
    SAPUI5 URL Path The URL (root path) of the application. This is the path where the component.js file is located.
  8. Save your changes.
Related Information