Bootstrapping SAPUI5

Technology Blogs by Members

Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!

Prerequisite: Set up SAP Business Application Studio.

Use: After completing this blog, you will be able to Load and initialize the SAPUI5 library to use SAPUI5 features.

Before we can do something with SAPUI5, we need to load and initialize it. This process of loading and initializing SAPUI5 is called bootstrapping.

Standard Bootstrap File

id :The id attribute of the <script> tag has to be exactly "sap-ui-bootstrap" to ensure proper booting of the SAPUI5 runtime.
src : 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.
data-sap-ui-theme: The SAPUI5 controls support different themes.

data-sap-ui-libs: We specify the required UI library sap.m, which contains the UI controls we need for this tutorial.
data-sap-ui-compatVersion: To make use of the most recent functionality of SAPUI5 we define the compatibility version as edge.

Load Options

SAPUI5 can either be loaded locally with a relative path from an SAP Web server like :"resources/sap-ui-core.js" 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: https://ui5.sap.com/1.96.16/resources/sap-ui-core.js

Make sure that the index.html page now looks like this:

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.

Add a Text UI Element

Delete the Hello World <div> tag you created in the previous Step
Add the class="sapUiBody" and id="content" attributes to the <body> tag.

Now create a sap.m.Text UI element with the text Hello Word and place it in the <body> of the HTML page using the id of the <body>.
For this purpose, create the following <script> tag as another child of the <head> tag directly behind the bootstrap script created above:

The head and body of the HTML page should now look like this:

Test run your application by starting it from the SAP Business Application Studio. Test run your application by starting it from the SAP Business Application Studio.

Right-click on any subfolder in your project and select Preview Application from the context menu that appears.
Select the npm script named start-noflp in the dialog that appears.

In the opened application, check if the Hello World text of the sap.m.Text UI element is displayed on the HTML page.