Technical Articles

Wouter Lemaire

October 25, 2022 4 minute read

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

7 Comments

You must be Logged on to comment or reply to a post.

Andrew Mai

October 31, 2022 at 4:55 am

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.

FIRAT ASAN

November 15, 2022 at 6:33 pm

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?

Jacky Liu

December 15, 2022 at 5:00 am

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

Marian Zeis

December 15, 2022 at 6:28 am

Hi Jacky Liu

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

Jacky Liu

December 16, 2022 at 12:31 am

Hi, Zeis,

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

Marian Zeis

December 16, 2022 at 5:59 am

Hi Jacky Liu

You need to run the transpire before tooling-modules.

name: ui5-tooling-modules-task

afterTask: ui5-tooling-transpile-task

Jacky Liu

December 16, 2022 at 9:31 am

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"

Technical Articles

Third-party libraries in a UI5 TypeScript app

Installation

Configuration

Consume

Run

Build

Deploy

End

Assigned Tags