Loading and Initializing SAPUI5

Modularizing SAPUI5 Applications

Working with Views and Controllers

Structuring Applications via Components

Implementing the UI

Dealing with Fragments as Reusable UI Parts

Models and Data Binding

Localization

OData Model

Routing and Navigation

Bootstrapping SAPUI5

Objective

After completing this lesson, you will be able to load and initialize the SAPUI5 library to use SAPUI5 features.

Bootstrapping

Standard Bootstrap File

To use SAPUI5, you must load and initialize the SAPUI5 library.

The figure, Bootstrapping SAPUI5, shows a typical bootstrap script tag used to load the sap-ui-core.js file. When this script tag is included in a page, the SAPUI5 runtime will automatically be initialized as soon as the script is loaded and executed by the browser.

Note

If you run your application standalone, the bootstrap script 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 application.

SAPUI5 provides several bootstrap files for different use cases. sap-ui-core.js is the standard bootstrap file, which is recommended 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).

Load Options

SAPUI5 can either be loaded locally with a relative path from an SAP Web server (see the figure, Bootstrapping SAPUI5) or externally from a Content Delivery Network (CDN).

You can point to a specific version in a CDN, which allows you to select a fixed version for bootstrapping. To do this, assign a versioned URL like the following to the src attribute in the bootstrap script:

XML

1
https://ui5.sap.com/1.96.16/resources/sap-ui-core.js

The segment of the URL after the host name is used to specify the desired version.

Alternatively, you can use the default version of the SAPUI5 libraries which has the following generic URL:

Code Snippet

1
https://ui5.sap.com/resources/sap-ui-core.js

Caution

The default version is constantly being upgraded and this might have an impact on the stability of your application. Use this version for testing purposes only.

Configuration Options

The SAPUI5 runtime can be configured using so-called configuration options. The complete list of configuration options available in SAPUI5 can be found in the API Reference in the Demo Kit under sap.ui.core.Configuration.

SAPUI5 supports different possibilities to provide values for the available configuration options. Among other things, configuration options can be set via the bootstrap script tag. For this purpose, attributes are added to the script tag whose names are composed of the name of the respective configuration option and the prefix data-sap-ui-.

In the script tag in the figure, Bootstrapping SAPUI5, the following configuration options are used:

theme
The configuration option theme defines the theme that shall be used.
libs
The configuration option libs defines a list of libraries that shall be loaded initially.
Note
An SAPUI5 library bundles a set of controls and related types. There are predefined standard libraries, such as sap.m and sap.ui.layout.
compatVersion
Applications must set this configuration option to edge. Other version definitions are deprecated. This ensures that the latest SAPUI5 features are used.

Application Script

The bootstrap script can be followed by an application script that is used to implement the SAPUI5 application. In the application script, controls such as buttons or input UI elements can be created.

Watch the video to learn how to add a Text UI element to the HTML page via an application script.

Continue to quiz