Skip to Content
Technical Articles
Author's profile photo Wouter Lemaire

Third-party libraries in a UI5 TypeScript app

Using third-party libraries might be a bit more complicated in UI5 with TypeScript. The solution to do this is way easier than you would expect. Around a year ago, Peter Muessig already shared the solution for this. Maybe you’ve already seen this blog post of Peter so you know how to use this:

https://blogs.sap.com/2021/11/15/using-npm-packages-in-ui5-without-shims/

 

It could be that you missed it or just didn’t know it also works for UI5 with TypeScript.

In this blogs, I want to point out that the same approach is valid for UI5 with TypeScript by providing a simple example.

 

Installation

Start by generating a new UI5 TypeScript app following the steps in this blog post:

https://blogs.sap.com/2021/07/01/getting-started-with-typescript-for-ui5-application-development/

 

As an example, I will add the third-party library “mobx” to my project by running the following command from in the project folder:

npm i -D mobx

For making this work in UI5 we need the UI5 middleware and builder taks “ui5-tooling-modules”. This one can also be installed with the following command:

npm i -D ui5-tooling-modules

Configuration

Once both are installed, configure the UI5 tooling to use the middleware and task by adding it to the UI5 dependencies:

https://github.com/lemaiwo/UI5WithThirdPartyLib/blob/560340f6c732d1e473236afea6d7268d065deb1f/package.json#L40

Next, the “ui5-tooling-modules” task and middleware needs to be configured. Actually, you just have to add it as a task for the builder and as a middleware for the server configuration.

This will make sure that the app can load the third-party library when running and it will be added to the “dist” folder when building:

https://github.com/lemaiwo/UI5WithThirdPartyLib/blob/560340f6c732d1e473236afea6d7268d065deb1f/ui5.yaml#L15

Consume

You are ready to use the third-party library like any other control/library of the UI5 framework, check line 5:

https://github.com/lemaiwo/UI5WithThirdPartyLib/blob/560340f6c732d1e473236afea6d7268d065deb1f/src/controller/Main.controller.ts#L5

By importing “mobx” at the top, TypeScript will give me full autocompletion support with syntax checks in case of errors.

I’m simply using “mobx” to observe any changes in the JSONModel:

https://github.com/lemaiwo/UI5WithThirdPartyLib/blob/560340f6c732d1e473236afea6d7268d065deb1f/src/controller/Main.controller.ts#L17

The view will simply show the value of the JSONModel:

https://github.com/lemaiwo/UI5WithThirdPartyLib/blob/main/src/view/Main.view.xml

I also added a button that changes the value of the description which automatically updates the value thanks to “mobx”. Feel free to look a bit deeper into the project.

Run

Simply run “npm start” to test the app:

Result:

Build

Building the app is just as before by running the build script:

The only difference now is that it will also copy the “mobx” library from the node_modules into the “resources” folder of the app:

 

The build process will also handle the third-party library differently compared to UI5 controls/libraries to make it resolvable:

Deploy

All fine until here, you can run and build the app which will work perfect! Although this might fail when running this app from in a Fiori Launchpad on-premise or in BTP. Once deployed, the app will not be able to find the library as it will search in the resources folder. All requests to this folder are forwarded to the UI5 SDK.

As a solution you have to configure the build task as followed: “prependPathMappings”

https://github.com/lemaiwo/UI5WithThirdPartyLib/blob/560340f6c732d1e473236afea6d7268d065deb1f/ui5.yaml#L18

This will add UI5 config in the component.js which maps the third-party library with the path to the library in the project:

End

With this you should be good to go for consuming third-party libraries in UI5 with TypeScript.

 

More information regarding the task and middleware: https://www.npmjs.com/package/ui5-tooling-modules

 

The demo app: https://github.com/lemaiwo/UI5WithThirdPartyLib

Assigned Tags

      7 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Andrew Mai
      Andrew Mai

      Hi,

      It's look like that ui5-tooling-modules not support some type of libraries, for example, Lodash.

      The normal way to import Lodash will be:

      import * as _ from "lodash"

      But if we use it, it will break the Application, so I have to use the Shims for work around. So if would be good to know what kind of libraries will not be supported.

      Author's profile photo FIRAT ASAN
      FIRAT ASAN

      Thank you for detailed blog page. It looks interesting. But i don’t have any idea why we need 3 party libraries. Sap wants standardization everything to avoiding mistakes and error. Can anybody explain what is the advantages of that?

      Author's profile photo Jacky Liu
      Jacky Liu

      Hi, Lemaire,

      I tried as your mentioned  steps, but still failed to build the third party libs . The following are screenshots and code . Your help would be very appreciated !

      package.json

      {
        "name": "cmissearch2",
        "version": "1.0.0",
        "description": "UI5 Application: cmissearch2",
        "author": "jacky liu",
        "license": "Apache-2.0",
        "scripts": {
          "build": "ui5 build --clean-dest",
          "build:opt": "ui5 build self-contained --clean-dest --all",
          "start": "ui5 serve --port 8080 -o index.html",
          "start:dist": "ui5 serve  --port 8080 -o index.html --config ui5-dist.yaml",
          "ts-typecheck": "tsc --noEmit",
          "lint": "eslint src"
        },
        "devDependencies": {
          "@sapui5/ts-types-esm": "1.108.4",
          "@typescript-eslint/eslint-plugin": "^5.42.1",
          "@typescript-eslint/parser": "^5.42.1",
          "@ui5/cli": "^2.14.14",
          "eslint": "^8.27.0",
          "mobx": "^6.7.0",
          "typescript": "^4.8.4",
          "ui5-middleware-livereload": "^0.7.0",
          "ui5-tooling-modules": "^0.7.0",
          "ui5-tooling-transpile": "^0.2.0"
        },
        "ui5": {
          "dependencies": [
            "ui5-middleware-livereload",
            "ui5-tooling-transpile",
            "ui5-tooling-modules",
            "mobx"
          ]
        }
      }
      

      ui5.yaml

      specVersion: "2.6"
      metadata:
        name: com.sap.cmissearch2
      type: application
      framework:
        name: SAPUI5
        version: "1.108.4"
        libraries:
          - name: sap.m
          - name: sap.ui.core
          - name: sap.ui.unified
          - name: themelib_sap_horizon
      builder:
        customTasks:
          - name: ui5-tooling-modules-task
            afterTask: replaceVersion
            configuration:
              prependPathMappings: true
          - name: ui5-tooling-transpile-task
            afterTask: replaceVersion
            configuration: &transpileConfig
              removeConsoleStatements: true
              transpileAsync: true
              transpileTypeScript: true
      server:
        customMiddleware:
          - name: ui5-tooling-modules-middleware
            afterMiddleware: compression
          - name: ui5-middleware-livereload
            afterMiddleware: compression
            configuration:
              debug: true
              extraExts: "xml,json,properties"
              port: 35729
              path: "webapp"
          - name: ui5-tooling-transpile-middleware
            afterMiddleware: compression
            configuration:
              *transpileConfig

       

      screenshot%20of%20build

      screenshot of build

       

       

       

       

      Author's profile photo Marian Zeis
      Marian Zeis

      Hi Jacky Liu

      In your screenshot you can see that the build was successful.
      Don´t worry about these errors

      Author's profile photo Jacky Liu
      Jacky Liu

      Hi,  Zeis,

       

      Thanks for you input! The third party library mobs.js not generated under folder resources . It is a issue .

       

       

      Author's profile photo Marian Zeis
      Marian Zeis

      Hi Jacky Liu

      You need to run the transpire before tooling-modules.

      name: ui5-tooling-modules-task

      afterTask: ui5-tooling-transpile-task

       

       

       

      Author's profile photo Jacky Liu
      Jacky Liu

      Hi, Zeis,

      Thank you very much for your suggestion! But it still does not work . The code is in GitHub

       

      specVersion: "2.6"
      metadata:
        name: com.sap.cmissearch2
      type: application
      framework:
        name: SAPUI5
        version: "1.108.4"
        libraries:
          - name: sap.m
          - name: sap.ui.core
          - name: sap.ui.unified
          - name: themelib_sap_horizon
      builder:
        customTasks:
          - name: ui5-tooling-transpile-task
            afterTask: replaceVersion
            configuration: &transpileConfig
              removeConsoleStatements: true
              transpileAsync: true
              transpileTypeScript: true
          - name: ui5-tooling-modules-task
            afterTask: ui5-tooling-transpile-task
            configuration:
              prependPathMappings: true
      server:
        customMiddleware:
          - name: ui5-tooling-transpile-middleware
            afterMiddleware: compression
            configuration:
              *transpileConfig
          - name: ui5-tooling-modules-middleware
            afterMiddleware: compression
          - name: ui5-middleware-livereload
            afterMiddleware: compression
            configuration:
              debug: true
              extraExts: "xml,json,properties"
              port: 35729
              path: "webapp"