在另一个项目中使用SAPUI5库

Question

I am currently trying to understand UI5 libraries and, for the purposes of testing, created a library project from the template that is provided in the Full-Stack-IDE.

From what I saw in various tutorials, you should now deploy the app to the SCP and then declare its existence to the app where you are going to use it. You do this by creating an entry in the neo-app.json like so:

"routes": [
    ...,
    {
        "path": "/resources/my/custom",
        "target": {
            "type": "application",
            "name": "testlibrary",
            "entryPath": "/"
        },
        "description": "Utility library"
    }
]

and in the manifest.json like so:

"dependencies": {
    "libs": {
        ...,
        "my.custom.testlibrary": {}
    }
},

However, when I do this, my app tries to look for the library under this url: https://openui5.hana.ondemand.com/1.52.5/resources/ and not on the SCP where I deployed the app. There seems to be no link between my neo-app.json entry and my manifest.json entry. What am I doing wrong here?

Answer 1

You can add your custom library by right-clicking on your project, and selecting Project > Add Reference to Library . Then select SAP Cloud Platform as repository, and include your library.

The resulting path in the route in neo-app.json , will be /webapp/resources/my/custom - this is required for running local previews in SAP Web IDE. As part of the build process when deploying your consumer app to SAP Cloud Platform, this route will be rewritten to exclude webapp , ie the path will be /resources/my/custom , so that it will also redirect correctly when deployed. This is working for me using "@sap/grunt-sapui5-bestpractice-build": "1.3.64" for the build.

Using the above, you don't need to add a data-sap-ui-resourceroots entry per library in your consumer app's index.html .

Answer 2

Found the answer in the ui5help Slack channel. The issue was that my library needed to be declared in my index.html under resourceroots. Changing my neo-app.json like so:

"routes": [
    ...,
    {
        "path": "/webapp/resources/my/custom",
        "target": {
            "type": "application",
            "name": "testlibrary",
            "entryPath": "/"
        },
        "description": "Utility library"
    }
]

and adding this to my index.html:

data-sap-ui-resourceroots='{
    "docgen": "./",
    "my.custom.testlibrary": "./resources/my/custom"
}'

fixed the problem. I will keep experimenting to see if I have to do this for every library.