Creating Control and Component Libraries

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": "library_test", 
    "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 library_test 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 library_test 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?	uicontrols
   Which namespace do you want to use?	student.com.sap.training.advancedsapui5
   Which framework do you want to use?	SAPUI5
   Which framework version do you want to use?	1.126.0
   Who is the author of the library?	keep default value
   Would you like to create a new directory for the library?	Y (Yes)

   Note

   If you are asked to migrate your library project, go and start the migration.

   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 uicontrols for the library name.

   4. Enter student.com.sap.training.advancedsapui5 for the namespace.

   5. Select SAPUI5 for the framework.

   6. Enter 1.126.0 as framework version.

   7. Keep the default values for 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 fullscreen (or customcontrol) project into the uicontrols folder. Change the namespace of the HoverButton.js, PlaneInfo.js and PlaneInfoRenderer.js files from student.com.sap.training.advancedsapui5.fullscreen.control to student.com.sap.training.advancedsapui5.uicontrols. Be sure to update all of the namespace references.

   1. Open the control folder of the fullscreen (or customcontrol) 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 uicontrols folder of the new library and press Ctrl + V on your keyboard.

      Note

      You'll find this folder in the library_test>packages>student.com.sap.training.advancedsapui5.uicontrols>src>student>com>sap>training>advancedsapui5 folder.

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

      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.advancedsapui5.uicontrols.HoverButton", { 

   5. Open the PlaneInfo.js file and adjust the namespace and the referenced namespace for PlaneInfoRenderer. Use the following code:

      Code Snippet

      Copy codeSwitch to dark mode

      12345678910
      
      sap.ui.define([
        "sap/ui/core/Control",
        "student/com/sap/training/advancedsapui5/uicontrols/PlaneInfoRenderer"
      ],
      
        function (Control, PlaneInfoRenderer) {
          "use strict";
      
          return Control.extend("student.com.sap.training.advancedsapui5.uicontrols.PlaneInfo", { 

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

      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.advancedsapui5.uicontrols.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.training.advancedsapui5.uicontrols.PlaneInfo", "student.com.sap.training.advancedsapui5.uicontrols.HoverButton", "student.com.sap.training.advancedsapui5.uicontrols.PlaneInfoRenderer"

   1. Open the library.js file.

   2. Add the three controls to the control list. Your code should look like the following:

      

In the next step, you must copy and change the fullscreen application to consume the created library.

1. Copy the whole fullscreen (or customcontrol) project folder inside the packages folder.

   Note

   The copy can take some time.

   1. Select the fullscreen (or customcontrol) project folder and press Ctrl + C (on your keyboard) to copy the selected files.

   2. Select the packages folder under library_test and press Ctrl + V on your keyboard.

2. Open the manifest.json file of the fullscreen project and add a dependency to the student.com.sap.training.advancedsapui5.uicontrols library. Then save your changes.

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

   2. Navigate to the sap.ui5 configuration.

   3. Add the dependency to the student.com.sap.training.advancedsapui5.uicontrols 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.advancedsapui5.uicontrols" : {}
          }
        },

   4. Save your changes.

3. Change the namespace of the cust XML alias in the Flights.view.xml file to the new student.com.sap.training.advancedsapui5.uicontrols 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.advancedsapui5.uicontrols. Your code should look like the following:

      Code Snippet

      Copy codeSwitch to dark mode

      123456
      
      <mvc:View controllerName="student.com.sap.training.advancedsapui5.fullscreen.controller.Flights"
          xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
          xmlns="sap.m" xmlns:l="sap.ui.layout" 
          xmlns:cust="student.com.sap.training.advancedsapui5.uicontrols">
      

   2. Save your changes.

4. Add the uicontrols library reference to the package.json file.

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

   2. Add "uicontrols":"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": {
        "uicontrols":"1.0.0"
      },

5. Delete the control folder of your copied fullscreen project.

   1. Select the library_test/packages/fullscreen/webapp/control folder

   2. Press Delete.

6. Resolve local dependencies by executing yarn command in the library_test workspace.

   1. Select the library_test folder and choose Open in Integrated Terminal from the contextual menu.

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

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

   Note

   Be aware that since we are not testing the application in a real SAP Fiori environment you will get errors in the console if you use Dev Tools to debug your application. Please, dismiss any message about resource preload.

   1. Preview your 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.