Embedding SAPUI5 Applications

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

The application container identifies the application using the name of the SAPUI5 component. Based on the name of the SAPUI5 component, the server-side application index infrastructure provides the application URL as well as any dependencies that need to be loaded.

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.

File Structure

The SAPUI5 component is defined in the Component.js file, which should be located in the root folder of your application. For more information, see Components in the SAPUI5 documentation.

Descriptor for Applications, Components, and Libraries

The descriptor provides a central location for metadata associated with an application, an application component, or a library. For more information, see Descriptor for Applications, Components, and Libraries.

Attributes Used by the SAP Fiori Launchpad

The SAP Fiori launchpad evaluates the following attributes of the descriptor for applications, components and libraries:

title
icons
i18n

Make sure that these attributes are maintained in the descriptor.

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 application, starting with "../"
Relative reference pointing to a location within the application, starting with any file or folder name below the root folder of the application

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.

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.