Show TOC

Embedding SAPUI5 AppsLocate this document in the navigation structure

Apps are embedded into the SAP Fiori launchpad as self-contained SAPUI5 components using DOM injection.

For configuration of the application container, use the following parameters:

  • URL (root path) of the application: This path gives the location of the Component.js file. The Component.js file is the component controller for the SAPUI5 app.
  • Name of the SAPUI5 component.

The application container registers the component namespace as the module path for the application URL. For more information, see Modularization and Dependency Management in the SAPUI5 documentation. As this is a global setting, it is essential that you use fully qualified names for the applications modules, for example, component and views. For a comprehensive example, see Tutorials.

File Structure

The SAPUI5 component is defined in the Component.js file, which should be located in the root folder of your application. In an Eclipse project, it is typically located under src/main/webapp or WebContent. For more information, see Components in the SAPUI5 documentation.

Component Configuration

The config object of the component metadata contains additional information. You use this object to define the configuration for your SAP Fiori launchpad. This configuration is used in several scenarios as described below.

Configuration Properties Used by the SAP Fiori Launchpad

The SAP Fiori launchpad evaluates the following properties of the component configuration:

Properties Description
resourceBundle Path to the resource bundle that holds the translated app title. Example: i18n/i18n.properties
titleResource Key of the app title text in the resource bundle; the title is typically displayed in the browser tab
favIcon Path to the app's favIcon file (*.ico), which is typically displayed in the address bar or next to the window title or tab title

homeScreenIconPhone

homeScreenIconPhone@2

homeScreenIconTablet

homeScreenIconTablet@2

Paths to icons with different resolutions that are used when users add the launchpad page containing the app or the app itself to the home screens of their mobile devices. The properties with an @2 suffix allow you to refer to special icons for high-resolution devices.

Use the following icon sizes:

  • homeScreenIconPhone: 57 x 57 pixels
  • homeScreenIconPhone@2: 114 x 114 pixels
  • homeScreenIconTablet: 72 x 72 pixels
  • homeScreenIconTablet@2: 144 x 144 pixels
Path Resolution

For all properties that reference files, there are several ways to define them:

  • Absolute reference, typically starting with "/", meaning that it is an absolute path on the same host
  • Relative reference pointing to a location outside the app, starting with "../"
  • Relative reference pointing to a location within the app, starting with any file or folder name below the root folder of the app

The SAP Fiori launchpad ensures that relative references are relative to the location of the Component.js file, and not relative to the location of the HTML file displayed by the web browser. This is consistent with the behavior for other references in component metadata, for example the includes property.

Example

The example below shows an example of the Component.js file in an SAPUI5 app:

Note The example shows the standard SAPUI5 use. For SAP Fiori apps using the sap.ca scaffolding layer, the metadata is merged dynamically using the sap.ca.scfld.md.ComponentBase.createMetaData method.
sap.ui.core.UIComponent.extend("mycompany.abc.Component", {
   metadata : {
          name: "Sample Component",
          library : " mycompany.abc",
          includes : [
                 "css/style.css"
          ],
          dependencies : {
          },
          config : {
                 "resourceBundle" : "i18n/i18n.properties",
                 "titleResource" : "shellTitle",
                 // The following properties reference dedicated image files. Note
                 // that relative links are always relative to the location of the
                 // Component.js of the app, NOT to the location of the HTML file that
                 // is displayed in the web browser (typically: FioriLaunchpad.html).
                 "favIcon" : "img/favicon.ico",
                 "homeScreenIconPhone" : "img/57_iPhone_Desktop_Launch.png",
                 "homeScreenIconPhone@2" : "img/114_iPhone-Retina_Web_Clip.png ",
                 "homeScreenIconTablet" : "img/72_iPad_Desktop_Launch.png",
                 "homeScreenIconTablet@2" : "img/144_iPad_Retina_Web_Clip.png",
          }
   },
   (...)
});
Passing Parameters to Components

The shell passes startup parameters to the component instance as part of the componentData, see getComponentData. They are set in the startupParameters property and always passed as arrays. The parameters can either be set as static query parameters in the component URL (as part of the launchpad configuration) or passed dynamically during cross-application navigation as part of the shell's URL hash.

Related Information