docs

Bootstrapping: Loading and Initializing

To use OpenUI5 features in your HTML page, you have to load and initialize the SAPUI5 library.

You can use the OpenUI5 bootstrap script in your page to initialize OpenUI5 runtime automatically as soon as the script is loaded and executed by the browser. For simple use cases as well as the default OpenUI5 installation, this is sufficient to build and run UIs.

Note:

If you run your app standalone, the bootstrap is added to your HTML page. In an SAP Fiori launchpad environment, the launchpad executes the bootstrap and no additional HTML page is needed to display the app.

The following code snippet shows a typical bootstrap script tag:

<script id="sap-ui-bootstrap"
     src="resources/sap-ui-core.js"
     data-sap-ui-async="true"
     data-sap-ui-on-init="..."
     data-sap-ui-compat-version="edge"
     data-sap-ui-resource-roots='{ "my.app": "./" }'>
</script>

In addition to the above snippet, you can specify a set of OpenUI5 libraries with data-sap-ui-libs="sap.m, sap.ui.layout, sap.ui.unified, ..." if there is no manifest.json to declare dependent libraries. More options that can be configured with data- can be found in Configuration Options and URL Parameters.

Core.ready State

After bootstrapping, if sap-ui-on-init has not been configured already, you can use the sap/ui/core/Core singleton to either await the Core’s ready state or provide a callback function:

sap.ui.require(["sap/ui/core/Core"], async (Core) => {
    // Either usage of Core.ready() as a Promise
    await Core.ready();
    // ...

    // Or usage of a callback function
    Core.ready(() => {
        // ...
    });
});

Note:

The module export of sap/ui/core/Core is not a class, but the singleton Core instance itself.

The sap.ui.core.Core class must not be instantiated, except by the framework itself.

Overview of Bootstrap Base URLs

OpenUI5 provides several bootstrap URLs for different use cases. The following table gives an overview of the most important bootstrap base URLs:

Resource Description Usage
UI5 Tooling You can access the libraries hosted by UI5 Tooling under `resources/sap-ui-core.js`1. Development
Content Delivery Network \(CDN\) You can access the libraries externally from a CDN, which can be either an SAP-hosted CDN or a custom-hosted CDN. For more information, see [Variant for Bootstrapping from Content Delivery Network](/docs/04_Essentials/variant-for-bootstrapping-from-content-delivery-network-2d3eb2f.html). Development/productive applications
Cache Buster for OpenUI5 You can access the libraries consuming the cache buster for OpenUI5 under `resources/sap-ui-cachebuster/sap-ui-core.js`1. For more information, see [Cache Buster for OpenUI5](/docs/04_Essentials/cache-buster-for-openui5-91f0809.html). Productive applications with available cache buster deployed

1) The sample mentions sap-ui-core.js as a bootstrap file. An overview of more bootstrap files is given in Overview of Bootstrap Files.

Overview of Bootstrap Files

OpenUI5 provides several bootstrap files for different use cases. The following table gives an overview of the most important resources and the respective use cases. The resource names refer to the resources/ folder in the OpenUI5 installation. You can find possible base URLs in Overview of Bootstrap Base URLs.

Resource Description
`sap-ui-core.js` This is the standard bootstrap file, which we recommend to use for typical use cases. It already contains jQuery, `jquery-ui-position` and only the minimum required parts of the core library \(`sap.ui.core`\). Required files are loaded dynamically using XMLHttpRequest \(XHR\). For more information, see [Standard Variant for Bootstrapping](/docs/04_Essentials/standard-variant-for-bootstrapping-91f1f45.html).
`sap-ui-core-nojQuery.js` You use this bootstrap file for applications with their own jQuery version. It also contains the minimum required parts of the core library, but **not** jQuery and `jquery-ui-position`. For more information, see [noJQuery Variant for Bootstrapping](/docs/04_Essentials/nojquery-variant-for-bootstrapping-91f1dd0.html).
`sap/ui/core/library-preload.js` This file contains most of the modules that are contained in the `sap.ui.core` library, but the modules are parsed and executed only on demand, and not immediately. > ### Caution: > An application must not reference this file. If the configuration option is set to `preload`, OpenUI5 automatically loads the file. For more information, see [Standard Variant for Bootstrapping](/docs/04_Essentials/standard-variant-for-bootstrapping-91f1f45.html).
`sap-ui-custom*.js` File names that match this pattern are reserved for custom merged files used by the application. > ### Note: > The proposed naming scheme for these files needs to be adapted in future versions for the same encapsulation reasons as mentioned above.
This site is open source. Improve this page.