Developing a Reusable UI Library

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.

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 Terminal → New Terminal menu option.

   2. Globally install the yarn package by executing the following code:

      Code Snippet

      Copy codeSwitch to dark mode

      1
      npm install -location=global yarn

   3. Globally install the yoman package by executing the following code:

      Code Snippet

      Copy codeSwitch to dark mode

      1
      npm install -location=global yo

   4. Globally install the generator-ui5-library package by executing the following code:

      Code Snippet

      Copy codeSwitch to dark mode

      1
      npm install -location=global generator-ui5-library

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

   Copy codeSwitch to dark mode

   123456789101112
   {
    "name": "test-workspace", 
    "version": "1.0.0", 
    "description": "", 
    "keywords": [], 
    "author": "", 
    "license": "ISC", 
    "private": true, 
    "workspaces": [ 
    "packages/*" 
    ] 
   }

   1. Make sure you are in your projects folder.

      Hint

      To be absolutely sure, you can use the View → Command 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.

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

   Library Creation Wizard

   Question	Answer
   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 File → Preferences → Settings 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

      Copy codeSwitch to dark mode

      123456789
      
      sap.ui.define([
       "sap/m/Button"
      ],
      
       function (Button) {
       "use strict";
      
       return Button.extend("student##.com.sap.training.ux402.controls.HoverButton", {

   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

      Copy codeSwitch to dark mode

      12345678910
      
      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", {

   6. Open the PlaneInfoRenderer.js file and update the namespace.

      Caution

      Remember to use your own group number.
      Code Snippet

      Copy codeSwitch to dark mode

      123456789
      
      sap.ui.define([
       "sap/ui/core/Renderer"
      ],
      
       function (Renderer) {
       "use strict";
      
       var PlaneInfoRenderer = Renderer.extend("student##.com.sap.training.ux402.controls.PlaneInfoRenderer");

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

   Parameter	Value
   controls	Code Snippet Copy codeSwitch to dark mode 123 "student##.com.sap.train­ing.ux402.controls.PlaneInfo", "student##.com.sap.training.ux402.controls.HoverButton", "student##.com.sap.training.ux402.controls.PlaneInfoRenderer"

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

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

      Copy codeSwitch to dark mode

      12345678910
      
      "sap.ui5": {
       "flexEnabled": false,
       "dependencies": {
       "minUI5Version": "1.102.1",
       "libs": {
       ...
       "student##.com.sap.training.ux402.controls" : {}
       }
       },

   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

      Copy codeSwitch to dark mode

      12345678910
      
      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";

   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

      Copy codeSwitch to dark mode

      123456
      
      <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">
      
      

   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

      Copy codeSwitch to dark mode

      1234
      "main": "webapp/index.html",
      "dependencies": {
       "controls":"1.0.0"
      },

   3. Add "controls" to the "ui5": { "dependencies":[]}section as in the following code:

      Code Snippet

      Copy codeSwitch to dark mode

      1234567
      "ui5": {
       "dependencies": [
       "@sap/ux-ui5-tooling",
       "@sap-ux/ui5-middleware-fe-mockserver",
       "controls"
       ]
      },

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.