Using UI5 Custom Control in BAS with correct UI5 Tooling yaml

[Marian_Zeis]

Hey Experts,

I'm getting a little frustraded right now because I just can't get it to work.
I'm trying to use a UI5 custom control in BAS which I installed with npm.
I can see it in the `resource` folder when i build it. I can use it when i run it locally with VS Code.

So my guess is the YAML configuration in BAS.

I see in the log in BAS that it tries to pull from the UI5 resource the custom control:

/1.96.6/resources/ui5-isu/customControl/excelUpload/ExcelUpload.js

How can I avoid this?
What else can i try? ( to only use VS Code is unfortunately not an option )

I created a simple sample app with the same error: marianfoo/ui5-consumenpm-test (github.com)

I´ve integrated "ui5-cc-md" and when i run the app i can see that the tries to get the custom control from the ui5 cdn

info ui5-proxy-middleware /1.96.14/resources/cc/md/Markdown.js

The `ui5.yaml` of the custom Control:

specVersion: "2.6"
type: module
metadata:
  name: ui5.customControl.excelUpload

resources:
  configuration:
    paths:
      "/resources/ui5-isu/customControl/excelUpload/": "./"<br>

The `ui5.yaml` of the consuming application

specVersion: "2.5"
metadata:
  name: ui5.isu.app
type: application
builder:
  resources:
    excludes:
      - "/localService/**"
      - "/test/**"
server:
  customMiddleware:
    - name: fiori-tools-proxy
      afterMiddleware: compression
      configuration:
        ignoreCertError: true
        ui5:
          path:
            - /resources
            - /test-resources
          url: https://ui5.sap.com
        backend:
          - path: /sap
            url: https://fiori.sap.xx.de:12345/
            client: '100'
    - name: fiori-tools-appreload
      afterMiddleware: compression
      configuration:
        port: 35729
        path: webapp
        delay: 300<br>

The `ui5.yaml` of consuming application for VSC which works

# yaml-language-server: $schema=https://sap.github.io/ui5-tooling/schema/ui5.yaml.json

specVersion: "2.5"
metadata:
  name: ui5.isu.msb.masssmeterread
type: application
server:
  customMiddleware:
    - name: fiori-tools-proxy
      afterMiddleware: compression
      configuration:
        ignoreCertError: true
        backend:
          - path: /sap
            url: https://fiori.sap.xx.de:12345/
            client: '100'
    - name: fiori-tools-servestatic
      afterMiddleware: compression
      configuration:
        paths:
          # local UI5 framework (replaced by framework option - see above)
          - path: /resources
            src: "C:/Users/Zeis.Marian/Documents/ui5-sdk-1-96-6/resources"
          - path: /test-resources
            src: "C:/Users/Zeis.Marian/Documents/ui5-sdk-1-96-6/test-resources"
    - name: fiori-tools-appreload
      afterMiddleware: compression
      configuration:
        port: 35729
        path: webapp
        delay: 300

Package.json off consuming app

{
  "name": "ui5.app",
  "version": "0.0.1",
  "private": true,
  "description": "My Fiori Elements App",
  "keywords": [
    "ui5",
    "openui5",
    "sapui5"
  ],
  "main": "webapp/index.html",
  "dependencies": {
    "ui5.customControl.excelUpload" : "0.0.1"

  },
  "devDependencies": {
    "@sap/ux-specification": "1.96.6",
    "@sap/ux-ui5-fe-mockserver-middleware": "1.6.5",
    "@sap/ux-ui5-tooling": "^1.7.3",
    "@ui5/cli": "^2.14.10",
    "rimraf": "^3.0.2",
    "ui5-task-flatten-library": "0.3.0"
    
  },
  "scripts": {
    "start": "fiori run --open \"test/flpSandbox.html?sap-client=100&sap-ui-xx-viewCache=false#ui5-tile\"",
    "start-local": "fiori run --config ./ui5-local.yaml --open \"index.html?sap-client=100&sap-ui-xx-viewCache=false\"",
    "build": "ui5 build --config=ui5.yaml --all --clean-dest --dest dist",
    "deploy": "npm run build && fiori deploy --config ui5-deploy.yaml -- -y",
    "deploy-config": "fiori add deploy-config",
    "start-noflp": "fiori run --open \"index.html?sap-client=100&sap-ui-xx-viewCache=false\"",
    "start-mock": "fiori run --config ./ui5-mock.yaml --open \"test/flpSandbox.html?sap-client=100&sap-ui-xx-viewCache=false#ui5-tile\"",
    "start-variants-management": "fiori run --open \"preview.html?&sap-client=100&sap-ui-xx-viewCache=false&fiori-tools-rta-mode=true&sap-ui-rta-skip-flex-validation=true#preview-app\""
  },
  "ui5": {
    "dependencies": [
      "@sap/ux-ui5-tooling",
      "@sap/ux-ui5-fe-mockserver-middleware",
      "ui5.customControl.excelUpload"
    ]
  },
  "sapux": true,
  "sapuxLayer": "CUSTOMER_BASE"
}

[Marian_Zeis · Accepted solution]

Thanks to peter.muessig i got it:

The ui5.yaml of the custom control pointing to a "thirdparty" folder instead of "resources" and including the "xlsx" module. This way i can avoid the mixup by the ui5 Tooling with the ui5 resources:

specVersion: "2.6"
type: module
metadata:
  name: ui5.customControl.excelUpload
---
specVersion: "2.6"
kind: extension
type: project-shim
metadata:
  name: thirdparty
shims:
  configurations:
    ui5.customControl.excelUpload:
      specVersion: "2.6"
      type: module
      metadata:
        name: ui5.customControl.excelUpload
      resources:
        configuration:
          paths:
            "/thirdparty/customControl/excelUpload/": "./"
---
specVersion: "2.6"
kind: extension
type: project-shim
metadata:
  name: xlsx
shims:
  configurations:
    "xlsx":
      specVersion: "2.6"
      type: module
      metadata:
        name: "xlsx"
      resources:
        configuration:
          paths:
            "/thirdparty/xlsx/": "./"

The ui5.yaml of the consuming application did not change, but i added in the "manifest.json" under "sap.ui5":

"resourceRoots": {  
            "thirdparty.customControl.excelUpload": "./thirdparty/customControl/excelUpload/",
            "thirdparty.customControl.excelUpload.xlsx": "./thirdparty/xlsx/"
        },

I call this in the controller just with:

sap.ui.define(["sap/ui/core/mvc/Controller", "thirdparty/customControl/excelUpload/ExcelUpload"],
    function (Controller, ExcelUpload) {

[rcaziraghi · Accepted solution]

Hello,

I've tried this option, however it does not work in a standalone application for me. The "thirdparty" folder is not created. Maybe is a problem with my NPM library. Can you share the library repo?

Thank you.

Edit: I found the issue. Without the extra "comma" in the "resourceRoots" tag it does not work for me (".com.rcaziraghi":) . But the "thirdparty" folder is still missing in the sources:

Maybe it is supposed to be like this?

Anyhow, this solution still won't work in a Launchpad environment.

Edit2:

As Peter Muessig mentioned before (https://blogs.sap.com/2021/11/15/using-npm-packages-in-ui5-without-shims/), I think my issue all along has been this:

"For all applications which will be deployed into a Fiori launchpad environment or another SAP system, the OSS libraries will not be loaded automatically as by default modules in the “resources” path will be resolved relative to the bootstrap script (typically sap-ui-core.js). "

However, I have not been able to overcome it, yet. The added control mentioned in the blog post above should work in my case, I'll try it out.

[Marian_Zeis]

Current workaround, which is not ideal, but it works:

- name: fiori-tools-servestatic
  afterMiddleware: compression
  configuration:
	paths:
	  - path: /resources/ui5-isu/
		src: "./dist/resources/ui5-isu/"

- name: fiori-tools-servestatic
      afterMiddleware: compression
      configuration:
        paths:
          - path: /resources/ui5-isu/customControl/excelUpload/
            src: "./node_modules/ui5.customControl.excelUpload/"
          - path: /resources/ui5-isu/customControl/excelUpload/xlsx/
            src: "./node_modules/xslx/"

[rcaziraghi]

Hello 20eed143c19f4b82bc4cf049916102cb

I'm writing/testing a blog post about custom components in UI5. I've made a custom component and managed to use it with a UI5 application. However, it works in a standalone application, not in a launchpad setting. If I switch to Launchpad, the resource does not show. I'm trying a couple of options before I post, to circumvent this limitation.

With that sad, can you share more about your environment? Is it a standalone application you are using? My custom component is an NPM package. How did you import your component?

[Marian_Zeis]

Hi 672cbd118d064be98c30c44331ab059e

i just added a simple sample app: https://github.com/marianfoo/ui5-consumenpm-test
It´s also an ui5 npm component.

When you just run `npm start`, you get the error i have.

Right now i just want to run it in dev enviroment standalone. I guess i need to do something else for launchpad, maybe `resourceroots` like mentioned here.
But i´m not there yet.

[rcaziraghi]

Hello 20eed143c19f4b82bc4cf049916102cb

Yes, I'm using 'resourceRoots'. I've just tested in BAS the scenario below, creating a new project with the easy-ui5 generator. The basic steps I take are:

1. Install the NPM package:

npm install @rcaziraghi/barcodereader4ui5 --save-dev

2. Check the package is in the ui5 dependencies (inside package.json):

"ui5": {
		"dependencies": [
			"@rcaziraghi/barcodereader4ui5"
		]
	},

3. Insert the resource in your manifest.json file (inside tag "sap.ui5"):

"resourceRoots": {  
            ".com.rcaziraghi": "./../node_modules/@rcaziraghi"  
            }

Then I can use the component. First, insert the namespace to the view:

<mvc:View
...
	xmlns="sap.m"
	xmlns:barcodereader4ui5="com.rcaziraghi.barcodereader4ui5"
>

And then insert the control into the view:

<barcodereader4ui5:barcodereader4ui5  id="barCodeReader"
					submit="onBarCodeSubmit"
					detect="onCameraDetection"
					closeOnDetect="true"  />

The repo to my custom controller is:

https://github.com/rcaziraghi/barcodereader4ui5

Please let me know if these adjustments work for you.

[Marian_Zeis]

Hi 672cbd118d064be98c30c44331ab059e ,

you we´re right. I needed the `resourceRoots`. But i did not point to node_modues, see my answer.