Show TOC

Embedding SAPUI5 Applications into the SAP Fiori Launchpad Application ContainerLocate this document in the navigation structure

The container is able to embed an SAPUI5 component. It is embedded directly into the page; no iFrame is used.

SAPUI5 components are described with applicationType URL, a base URL and the component name in additionalInformation. The format is SAPUI5.Component=componentName. The application container will register a module path for the URL with the component name.

Query parameters from the URL can be retrieved on the component instance using the getComponentData() method. They are set in the "startParameters" property and always passed as arrays.

Example

Let URL be http://anyhost:1234/path/to/app and additionalInformation be "SAPUI5.Component=sap.foo.bar". Then the container registers the path "http://anyhost:1234/path/to/app/" for the namespace "sap.foo.bar", and then loads the component "sap.foo.bar".

Example

Let URL be "http://anyhost:1234/?foo=bar&foo=baz&bar=baz". Then the componentData object will be: 

{startupParameters: {
 foo: ["bar", "baz"], bar: ["baz"]
 }
}
Caution

The container control embeds a component only. This can only work if this component is fully encapsulated and properly declares all dependencies in its metadata object. If you want your component to be able to be embedded into a shell using this container, prepare it as follows:

  • The container control can only embed components that originate on the same server as the shell due to the browser same origin policy. Consider using an SAP Web Dispatcher in this case.

  • If your component relies on some additional JavaScript, declare the dependencies to libraries or other components in the metadata object.

  • Do not use jQuery.sap.registerModulePath() with a relative URL. The base for this relative URL is the Web page. This page is the shell when embedding the component using the container, not the page you used when developing the component.

  • If your component needs additional styles, declare them using the includes property of the component metadata object.

  • Consider calling jQuery.sap.getModulePath(<componentName>) to determine the root path of your component.

  • If any of these requirements is not met, it is still possible to embed this view with its own page using applicationType="URL", no additionalInformation, and the URL of the Web page in url. Then it is embedded using an iFrame. This has many limitations, in particular resource-based navigation using hash changes is not supported.