Step 2: Bootstrap


Before we can do something with SAPUI5, we need to load and initialize it. This process of loading and initializing SAPUI5 is called bootstrapping. Once this bootstrapping is finished, we simply display an alert.


Step 2: Bootstrap - 第1张  | 优通SAP


You can view and download all files at Walkthrough – Step 2.


SAPUI5 is a JavaScript library that can either be loaded from the same Web server where the app resides, or from a different server. If SAPUI5 is deployed somewhere else on the server or you want to use a different server, then you need to adjust the corresponding paths in the bootstrap (here: src=”/resources/sap-ui-core.js”) in this tutorial according to your own requirements.

You can use this reference to the latest stable version of SAPUI5 for the tutorial or for testing purposes, but never use this for productive use. In an actual app, you always have to specify an SAPUI5 version explicitly.

For more information about the CDN, see Variant for Bootstrapping from Content Delivery Network.

In case you are using SAP Web IDE, you can right-click the project and select Step 2: Bootstrap - 第2张  | 优通SAPNew Step 2: Bootstrap - 第3张  | 优通SAP HTML5 Application DescriptorStep 2: Bootstrap - 第4张  | 优通SAP to make the /resources… reference work. This creates the neo-app.json file, which configures a URL mapping for this path.


In this step, we load the SAPUI5 framework from our local webserver and
initialize the core modules with the following configuration options:

  • The src attribute of the <script> tag tells the browser where to find the SAPUI5 core library – it initializes the SAPUI5 runtime and loads additional resources, such as the
    libraries specified in the data-sap-ui-libs attribute.

  • The SAPUI5 controls support different themes, we choose
    sap_belize as our default theme.

  • We specify the required UI library sap.m containing the UI controls we need for this tutorial.

  • To make use of the most recent functionality of SAPUI5 we
    define the compatibility version as edge.

  • We configure the process of “bootstrapping” to run asynchronously.

    This means that the SAPUI5 resources can be loaded
    simultaneously in the background for performance reasons.

  • We tell SAPUI5 core that resources in the
    sap.ui.demo.walkthrough namespace are located in the same folder as index.html. This
    is, for example, necessary for apps that run in the SAP Fiori launchpad.

5.webapp/index.js (New)

Now, we create a new index.js script that will contain the application logic for this tutorial step. We do this to avoid
having executable code directly in the HTML file for security reasons. This script will be called by the
index.html. We defined it there as a module in a declarative way.



20 − 19 =