Configuring and Instantiating Components

Objective

After completing this lesson, you will be able to Implement and use components.

Components

Components are independent and reusable parts used in SAPUI5 applications. They facilitate the encapsulation of closely related parts of an application. This makes the structure of an application and its code easier to understand and to maintain.

SAPUI5 provides the following two types of components:

  • Faceless components (class: sap.ui.core.Component)

    Faceless components have no user interface and are used for coding when no UI elements are needed, such as for a service that provides data from a back-end system.

  • UI components (class: sap.ui.core.UIComponent)

    UI components extend faceless components and add rendering functionality to the component. They represent a screen area or element on the UI along with the respective settings and metadata. This component type will be covered in the course.

Let's look at the structure of a component.

Using Components

To render UI components, you must wrap them in a sap/ui/core/ComponentContainer. You cannot use the placeAt method to place UI components directly in a page.

The component container separates the application and the nested component. It is an SAPUI5 control that can be nested at any place within the SAPUI5 control tree.

To load and create a UI component, you can use the following options:

  • Create a new component instance asynchronously before creating the container using the create method of sap.ui.core.Component. The separately created component instance can then be passed to the constructor of sap.ui.core.ComponentContainer.
  • Create a new component instance asynchronously when creating the container using the constructor of sap.ui.core.ComponentContainer (see the following example).

Let's look at an example. In the following figure, a component instance is instantiated together with the component container. For this reason, the module in which instantiation takes place is dependent on sap/ui/core/ComponentContainer. The constructor of ComponentContainer is passed a settings object with the following properties:

  • id

  • name

  • manifest

  • async

  • settings

After the component container is created, the placeAt method is called on it to add it to a UI area.

Encapsulate an Application as a Component

Business Scenario

In this exercise, you will rebuild the application from the previous exercise into an SAPUI5 component. The application descriptor (manifest.json file) and the component controller (Component.js file) required for this are already included in the project. For the encapsulation, you will make some adjustments in these files. Finally, you will instantiate the component and embed it in the HTML page.

Template:Git Repository: https://github.com/SAP-samples/sapui5-development-learning-journey.git, Branch: sol/5_controllers
Model solution:Git Repository: https://github.com/SAP-samples/sapui5-development-learning-journey.git, Branch: sol/6_components

Task 1: Adjust the Application Descriptor

Steps

  1. Open the manifest.json file from the webapp folder in the editor.

  2. Set the id property from the sap.app namespace to the value sap.training.exc to specify the ID for the project.

    1. Modify the content of line 4 in the manifest.json file as follows:

      Code Snippet
      Copy code
      Switch to dark mode
      1
       "id": "sap.training.exc",

  3. Set the rootView property from the sap.ui5 namespace to the value sap.training.exc.view.App to specify the App view from the project as the root view that shall be opened.

    1. Modify the content of line 102 in the manifest.json file as follows:

      Code Snippet
      Copy code
      Switch to dark mode
      1
       "viewName": "sap.training.exc.view.App",

Task 2: Maintain the Title and the Description of the Component

Steps

  1. Open the i18n.properties file from the webapp/i18n folder in the editor.

  2. Add the following lines there to maintain a language dependent title as well as a language dependent description for the component:

    Code Snippet
    Copy code
    Switch to dark mode
    123
    # App Descriptor
appTitle=Exercise Application
appDescription=A simple app that demonstrates important concepts of SAPUI5

    Note

    The appTitle and appDescription keys are used in the manifest.json file (properties sap.app/title and sap.app/description) to set the title and description for the component.

Result

The i18n.properties file should now look like this:

Task 3: Adapt the Bootstrap Script

Steps

  1. Open the index.html page from the webapp folder in the editor.

  2. Delete the following attribute in the bootstrap script:

    Code Snippet
    Copy code
    Switch to dark mode
    1
    data-sap-ui-libs="sap.m"

    Note

    The libraries that are required by the component and therefore need to be loaded by SAPUI5 are specified in the application descriptor of the component (property sap.ui5/dependencies). The sap.m library is listed there, so it does not need to be loaded by the bootstrap script anymore.

Result

The bootstrap script should now look like this:

Task 4: Edit the Component Controller

Steps

  1. Open the Component.js file from the webapp folder in the editor.

  2. Add the following code to the component controller implementation to ensure that the application descriptor manifest.json is loaded and used:

    Code Snippet
    Copy code
    Switch to dark mode
    12345678
    metadata: {
  manifest: "json"
},

init: function () {
  // call the base component's init function
  UIComponent.prototype.init.apply(this, arguments);
}

    Note

    The init() method is called by the framework when the component is instantiated. Later, you will implement necessary initializations for the component in this method. It is obligatory to make a super call to the init() function of the base class in the overridden init() method.

Result

The Component.js file should now look like this:

Task 5: Instantiate the Component

Steps

  1. Make sure the index.js module is open in the editor.

  2. Delete the code that instantiates the XML view and places it on the HTML page in the index.js module.

    1. Delete the following lines:

      Code Snippet
      Copy code
      Switch to dark mode
      123456
      XMLView.create({
  id: "App",
  viewName: "sap.training.exc.view.App"
}).then(function (oView) {
  oView.placeAt("content");
});

      Note

      Instead of the XML view, you will instantiate the component in the next step and place it on the HTML page. The component instance will then display the App view as the root view.

    Result

    The index.js module should now look like this:

  3. Now modify the implementation of the index.js module as follows to instantiate the component and place it on the HTML page:

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

  var oContainer = new ComponentContainer({
      id: "container",
      name: "sap.training.exc",
      manifest: true,
      async: true,
      settings: {
        id: "sap.training.exc"
      }
  });
  oContainer.placeAt("content");

});

    Note

    Pay attention to the changed dependency array and parameter of the factory function. index.js now depends on sap/ui/core/ComponentContainer instead of sap/ui/core/mvc/XMLView.

    Result

    The index.js file should be implemented as follows:

  4. 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 component is displayed with the App view as the root view.

Log in to track your progress & complete quizzes