Developing a Reusable UI Library

Objectives

After completing this lesson, you will be able to:

  • Develop a reusable UI library

Implement a Reusable UI Library

Business Example

In this exercise, you will build a reusable UI Library and you will use this library in the ux402_fullscreen application.

Note

SAP Business Technology Platform and its tools are cloud services. Due to the nature of cloud software, step procedures and naming of fields and buttons may differ from the exercise solution.

Note
In the following exercises, replace <L> with the course group and ## with your user group.
Caution
Be aware that in some cases the initial code or code of previous implementation steps is not shown. In the following steps, do not delete any existing code or code that you have added in previous steps if not explicitly asked. Furthermore, be aware that the screenshots show the solutions from student00 namespace; you should then replace this with your own student## one.

Task 1: Create a Yarn Workspace

In order to test the use of a library without having to deploy this library and the project into a backend server, we can use yarn workspaces.

Steps

  1. Log into your SAP Business Application Studio.

    1. Perform this step as done in a previous exercise.

  2. Install the following npm packages (globally) to your development environment : yarn, yoman and generator-ui5-library.

    1. Open a new terminal window.

      Hint
      You can use the TerminalNew Terminal menu option.
    2. Globally install the yarn package by executing the following code:

      Code snippet
      npm install -location=global yarn
      Expand
    3. Globally install the yoman package by executing the following code:

      Code snippet
      npm install -location=global yo
      Expand
    4. Globally install the generator-ui5-library package by executing the following code:

      Code snippet
      npm install -location=global generator-ui5-library
      Expand
  3. Create a new library_test folder in your projects folder and add a packages sub-folder and a package.json file with the following code:

    Code snippet
    {
     "name": "test-workspace", 
     "version": "1.0.0", 
     "description": "", 
     "keywords": [], 
     "author": "", 
     "license": "ISC", 
     "private": true, 
     "workspaces": [ 
     "packages/*" 
     ] 
    }
    Expand
    1. Make sure you are in your projects folder.

      Hint
      To be absolutely sure, you can use the ViewCommand Palette menu option and search for the File: Open Folder... command. Then select your projects folder and select Go.
    2. Click into the blank space in the EXPLORER, to make sure you have not selected an existing project, and create a new folder by selecting the New Folder... icon.

    3. Enter test-workspace as the folder name and press the Enter key (on your keyboard).

    4. Make sure that your new folder is selected and click again on the New Folder... icon.

    5. Enter packages as the folder name and press the Enter key (on your keyboard).

    6. Select the test-workspace folder (it should be underlined) and select the New File... icon.

    7. Enter package.json as the file name and press the Enter key (on your keyboard). You should now see the following structure:

    8. Enter the given code in the package.json file.

Task 2: Create the Reusable UI Library

Steps

  1. Generate a new library inside the packages folder using the yoman ui5-library command and following information:

    Library Creation Wizard

    QuestionAnswer
    How do you want to name this library?controls
    Which namespace do you want to use?student##.com.sap.training.ux402
    Which framework do you want to use?SAPUI5
    Which framework version do you want to use?keep default value
    Who is the author of the library?keep default value
    Would you like to create a new directory for the library?Y (Yes)
    1. Select the new packages folder and select the Open in Integrated Terminal option in the contextual menu.

    2. Enter the following command: yo ui5-library.

    3. Enter controls for the library name.

    4. Enter student##.com.sap.training.ux402 for the namespace.

    5. Select SAPUI5 for the framework.

    6. Keep the default values for version, author and create a new directory.

  2. If you prefer to display the whole folder tree structure, you can change the settings of your Explorer and deselect the compact folder option.

    1. Go to the FilePreferencesSettings menu option.

    2. Select Features/Explorer in the left pane.

    3. Deselect the Compact Folders option.

    4. Close the Settings tab.

  3. Copy the HoverButton.js, PlaneInfo.js, and PlaneInfoRenderer.js files from the ux402_fullscreen project into the controls folder. Change the namespace of the HoverButton.js, PlaneInfo.js and PlaneInfoRenderer.js files from student##.com.sap.training.ux402.fullscreen.ux402_fullscreen.control to student##.com.sap.training.ux402.controls. Be sure to update all of the namespace references.

    1. Open the control folder of the ux402_fullscreen project and select the HoverButton.js, PlaneInfo.js, and PlaneInfoRenderer.js files.

    2. Press Ctrl + C (on your keyboard) to copy the selected files.

    3. Select the controls folder of the new library and press Ctrl + V on your keyboard.

    4. Open the HoverButton.js file and change the namespace like in the following code:

      Caution
      Remember to use your own group number.
      Code snippet
      
      sap.ui.define([
       "sap/m/Button"
      ],
      
       function (Button) {
       "use strict";
      
       return Button.extend("student##.com.sap.training.ux402.controls.HoverButton", {
      Expand
    5. Open the PlaneInfo.js file and adjust the namespace and the referenced namespace for PlaneInfoRenderer. Use the following code:

      Caution
      Remember to use your own group number.
      Code snippet
      
      sap.ui.define([
       "sap/ui/core/Control",
       "student##/com/sap/training/ux402/controls/PlaneInfoRenderer"
      ],
      
       function (Control, PlaneInfoRenderer) {
       "use strict";
      
       return Control.extend("student##.com.sap.training.ux402.controls.PlaneInfo", {
      Expand
    6. Open the PlaneInfoRenderer.js file and update the namespace.

      Caution
      Remember to use your own group number.
      Code snippet
      
      sap.ui.define([
       "sap/ui/core/Renderer"
      ],
      
       function (Renderer) {
       "use strict";
      
       var PlaneInfoRenderer = Renderer.extend("student##.com.sap.training.ux402.controls.PlaneInfoRenderer");
      Expand
  4. Extend the library.js file. Add the following entries to the controls list:

    New Controls for the initLibrary Function within the library.js File

    ParameterValue
    controls
    Code snippet
    "student##.com.sap.train­ing.ux402.controls.PlaneInfo",
    "student##.com.sap.training.ux402.controls.HoverButton",
    "student##.com.sap.training.ux402.controls.PlaneInfoRenderer"
    Expand

Task 3: Copy and Adapt the ux402_fullscreen Project

In the next step, you must copy and change the ux402_fullscreen project to consume the created library.

Steps

  1. Copy the whole ux402_fullscreen project folder inside the packages folder.

    Note
    The copy can take some time.
    1. Select the ux402_fullscreen project folder and press Ctrl + C (on your keyboard) to copy the selected files.

    2. Select the packages folder under test-workspace and press Ctrl + V on your keyboard.

  2. Open the manifest.json file of the ux402_fullscreen project and add a dependency to the student##.com.sap.training.ux402.controls library. Then save your changes.

    1. Open the manifest.json file of your copied ux402_fullscreen project.

    2. Navigate to the sap.ui5 configuration.

    3. Add the dependency to the student##.com.sap.training.ux402.controls library in the dependencies configuration section like in the following code:

      Code snippet
      
      "sap.ui5": {
       "flexEnabled": false,
       "dependencies": {
       "minUI5Version": "1.102.1",
       "libs": {
       ...
       "student##.com.sap.training.ux402.controls" : {}
       }
       },
      Expand
    4. Save your changes.

  3. Change the references to the HoverButton and PlaneInfo controls in your Flights.controller.js file. student##/com/sap/training/ux402/controls should be used. Then save your changes.

    1. Open the Flights.controller.js file, located in the controller folder of your project, and change the references in the sap.ui.define section, as in the following code:

      Code snippet
      
      sap.ui.define([
       "sap/ui/core/mvc/Controller",
       "student##/com/sap/training/ux402/controls/HoverButton",
       "sap/m/MessageToast",
       "student##/com/sap/training/ux402/controls/PlaneInfo" 
      ],
       
       function (Controller, HoverButton, MessageToast, PlaneInfo) {
       "use strict";
      Expand
    2. Save your changes.

  4. Change the namespace of the cust XML alias in the Flights.view.xml file to the new student##.com.sap.training.ux402.controls namespace.

    1. Open the Flights.view.xml file, located in the view folder, with the Code Editor and change the namespace of the cust xml alias to student##.com.sap.training.ux402.controls. Your code should look like the following:

      Code snippet
      
      <mvc:View controllerName="student00.com.sap.training.ux402.fullscreen.ux402fullscreen.controller.Flights" 
       xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:l="sap.ui.layout"
       xmlns:cust="student00.com.sap.training.ux402.controls">
      
      
      Expand
    2. Save your changes.

  5. Add the controls library reference to the package.json file.

    1. Open the package.json file of the ux402_fullscreen copied project.

    2. Add "controls":"1.0.0" to the "dependencies":{} section as in the following code:

      Code snippet
      "main": "webapp/index.html",
      "dependencies": {
       "controls":"1.0.0"
      },
      Expand
    3. Add "controls" to the "ui5": { "dependencies":[]}section as in the following code:

      Code snippet
      "ui5": {
       "dependencies": [
       "@sap/ux-ui5-tooling",
       "@sap-ux/ui5-middleware-fe-mockserver",
       "controls"
       ]
      },
      Expand
  6. Delete the control folder of your copied ux402_fullscreen project.

    1. Select the test-workspace/packages/ux402_fullscreen/webapp/control folder

    2. Press Delete.

  7. Resolve local dependencies by executing yarn command in the test-workspace.

    1. Select the test-workspce folder and choose Open in Integrated Terminal from the contextual menu.

    2. Enter the yarn command and press the Enter key (on your keyboard).

  8. Test your application in Google Chrome. Check also with Chrome DevTools to ensure that the new library is used.

    1. Preview your ux402_fullscreen application, as shown in previous exercises.

    2. In the displayed application, choose a carrier from the list of available carriers.

    3. The carrier details and the available flights are displayed as they are shown in the following figure.

    4. Press F12 (on your keyboard) to access Chrome DevTools. Select the Sources tab in Chrome DevTools. You will see that the new library is used by the application.

Log in to track your progress & complete quizzes