Defining and Using Modules

Objective

After completing this lesson, you will be able to Modularize SAPUI5 applications.

Modularization

The SAPUI5 framework provides built-in support for application modularization. That is, instead of defining and loading a large bundle of JavaScript code, an application can be split into smaller parts that can then be loaded at runtime when they are needed.

Watch the video to understand important features of this modularization concept.

For details, see the API Reference in the Demo Kit and the example in the following section.

Module Definition

As mentioned previously, an SAPUI5 module is defined by calling the sap.ui.define method. The implementation made via sap.ui.define determines the so-called export value of a module. This export value is typically a JavaScript object that represents the value of a module from a usage perspective. Usually, the export value is determined via a function.

The typical use of sap.ui.define is a single top level call to this method in a JavaScript file. When a module is requested for the first time, the JavaScript file is loaded and executed, which in turn executes the top level call to sap.ui.define.

Time to look at an example of a simple module definition!

Loading of Modules

In the bootstrap script shown in the figure, Asynchronous Loading of Modules, the default bootstrap file sap-ui-core.js is loaded from the resources folder. By default, SAPUI5 therefore loads all modules relative to this folder. This works for modules that are part of the SAPUI5 delivery. However, it fails for those modules that are created by the developer in an SAPUI5 project.

Let's look at configurations options related to asynchronous loading of modules.

Work with Modules

Business Scenario

In this exercise, you will move the logic for creating and placing the Hello World Text UI element that you implemented in the previous exercise out of the HTML page and into a separate module. You will then call this module declaratively from the index.html page.

Template:Git Repository: https://github.com/SAP-samples/sapui5-development-learning-journey.git, Branch: sol/2_bootstrapping
Model solution:Git Repository: https://github.com/SAP-samples/sapui5-development-learning-journey.git, Branch: sol/3_modules

Task 1: Delete the <script> Tag

Steps

  1. Make sure that the index.html page is open in the editor.

  2. Delete the <script> tag used to create and place the Hello World Text UI element in the file.

    1. Delete the following lines:

      Code Snippet
      Copy code
      Switch to dark mode
      1234
      <script>
  var oText = new sap.m.Text({text: "Hello World"});
  oText.placeAt("content");
</script>

Result

The <head> tag of the HTML page should now look like this:

Task 2: Implement a Module

Steps

  1. Create a new file named index.js in the webapp folder.

    1. Open the context menu for the webapp folder in the project structure.

    2. Select New File.

    3. In the New File dialog that appears, type index.js and choose OK.

    Result

    The index.js file is created and displays in the editor.

  2. Add the following code to the index.js file to define a module through which the Hello World Text UI element is created and placed on the HTML page:

    Code Snippet
    Copy code
    Switch to dark mode
    123456
    sap.ui.define(["sap/m/Text"], function (Text) {
  "use strict";

  new Text({ text: "Hello World" }).placeAt("content");

});

Result

The index.js file should be implemented as follows:

Task 3: Load the Module Declaratively

Steps

  1. Make sure the index.html page is open in the editor.

  2. Add the following attributes to the bootstrap script:

    Code Snippet
    Copy code
    Switch to dark mode
    123
    data-sap-ui-async="true"
data-sap-ui-onInit="module:sap/training/exc/index"
data-sap-ui-resourceroots='{"sap.training.exc": "./"}'

    Note

    The added configuration tells SAPUI5 that resources in the sap.training.exc namespace are in the same directory as index.html. The namespace is used to initially load the index.js module. For performance reasons, SAPUI5 is enabled to load modules and library-preload files asynchronously.

    1. The <head> tag of the HTML page should now look like this:

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

    1. Right-click on any subfolder in your sapui5-development-learning-journey project and select Preview Application from the context menu that appears.

    2. Select the npm script named start-noflp in the dialog that appears.

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

Log in to track your progress & complete quizzes