BAS - Consume Library in an App

[Aurelien]

Hello,

I'm building Fiori apps for S4/Hana on premise with the BAS. I've generated an app via the Fiori tools and this one is using a custom control which is develop in an UI5 Library. While launching the app, the library (present as a project in the BAS) can't be retrieved.

Would you have more info on how to configure the run configuration for this case ? What's the best practices ? I've seen Is there a way to consume custom UI5 library from SAP Business Application Studio? - SAP Q&A but i wish to avoid manual steps when deploying if possible...

I used to modify the index.html + run config as explained here Using UI5 Libraries in CF approuter | SAP Blogs but it's not working with Fiori tools.

Thanks

Aurélien

[zdravko_georgiev · Accepted solution]

Hello Aurélien,

in order to be able to load the custom UI5 lib from your workspace, you need to use the fiori-tools-servestatic middleware. Please check the documentation here: https://www.npmjs.com/package/@sap/ux-ui5-tooling

All you need to do is to add the following into the ui5.yaml

- name: fiori-tools-servestatic
    afterMiddleware: compression
    configuration:
      paths:
        - path: /<custom UI5 lib>
          src: "<Path to custom UI5 lib>"

Hope this helps.

Best Regards,

Zdravko

[Aurelien · Accepted solution]

Hi Zdravko,

Thanks for your insights, it's working! I understand this is only for local resources, right ? Is there a way to consume libraries hosted in my on Premise system within BAS without importing them in my workspace?

Thanks

Aurélien

[thomas_knobloch · Accepted solution]

Hi Zdravko,

can you give me an example what to fill in path and src, because for me it doesn't work.

I entered something like /resources/sap/bc/ui5_ui5/sap/z_reuse_lib in path and "../reuselib" in src.

Thanks and regards, Thomas

[thomas_knobloch · Accepted solution]

Hi again,

I found a way how to do it automatically: https://help.sap.com/docs/SAP_FIORI_tools/17d50220bcd848aa854c9c182d65b699/6e99fbb264eb4911a8e01ae58...

Sad thing, it still loads the library from ABAP backend instead local version.

Best regards,

Thomas

[former_member283911 · Accepted solution]

Hi thomas.knobloch,

Sometimes the backend uri is missing the the library config or different than the actual path at runtime. So the library is still loaded from the backend.
After you run the above wizard check the ui5.yaml that the "path" value it should match the uri that the browser is loading the library from.

Something like the example below:

server:
  customMiddleware:
  - name: fiori-tools-servestatic
    afterMiddleware: compression
    configuration:
      paths:
        - path: /resources/libraryname
          src: "Path/To/libary/in/workspace"
        - path: /sap/bc/ui5_ui5/libraryname
          src: "Path/To/libary/in/workspace
"

[zdravko_georgiev]

Hello Aurélien,

yes, with the newest release (which was released today) of the SAP Fiori tools this is also supported.

Unfortunately the easiest way to make use of the feature is to generate a new project, because now some additional files are generated in the project in order to support this feature.

So in order to adapt your project you need to do the following:

1. Create new "dummy" project with the latest SAP Fiori tools

2. In this project you will find the file /webapp/utils/locate-reuse-libs.js

3. Create a utils folder in your application under the webapp folder and copy this file in it.

4. Add this script tag inside of your HTML files: <script src="../utils/locate-reuse-libs.js" data-sap-ui-manifest-uri="../manifest.json">

Hope this helps.

Best Regards,

Zdravko

[Aurelien]

Hi,

I'm not sure i follow. What should contain that "dummy" project ? I've generated an UI5 freestyle app via the template in the BAS but i don't see such files... Where do we make the reference to our Library from on Premise ?

I was hoping to do something like below but doesn't work...

-name: fiori-tools-servestatic
    afterMiddleware:compression
    configuration:
      paths:- path:/<custom UI5 lib>
          src:"<Path to custom UI5 lib on the on Premise system>"

Thanks

Aurélien

[jlongie]

A new blog post has been published that will detail how to generate multiple apps consuming a UI5 reusable component maintained by a managed approuter configuraton.

https://blogs.sap.com/2022/01/14/designing-ui5-apps-for-sap-launchpad-service-part-1/

[jlongie]

Hi,

This flow should work!

The tutorial references a link to a sample library

project; https://github.com/lemaiwo/CFUI5ExampleLibrary/blob/master/mta.yaml#L28

In the mta.yaml you will notice the destinations are created at subaccount level. Thus, these destinations are configured with access to the library for any valid logged in user who has access to your space. Assuming you create a separate Fiori app using its own mta.yaml BUT on the same space, then the following changes can be made to support calling the library using the destination com_balta_exampleLibrary_uaa_ExampleLibrary from your SAPUI5 application;

In your new SAPUI5 application, open the xs-app.json file, add the following route before the existing resources route;

{ "source": "^/resources/bewlexamplelibrary/(.*)$", "target": "/$1", "destination": "com_balta_exampleLibrary_uaa_ExampleLibrary", "authenticationType": "xsuaa", "csrfProtection": false }

Thus any requests to /resources/bewlexamplelibrary from your SAPUI5 will delegate the call to the chosen destination.

Secondly, open View1.view.xml and append/update mvc entity as follows;

xmlns:x="bewlexamplelibrary.controls"

I've removed any dots otherwise the source in the xs-app.json will become "^/resources/be/wl/examplelibrary/(.*)$" which just seems messy!

No other changes are required i.e. you dont need any manifest.json changes etc...rebuild and redeploy your application.

You can confirm the destination com_balta_exampleLibrary_uaa_ExampleLibrary is generated by logging into your SAP BTP cockpit, selecting your subaccount, selecting Destinations and filtering the list with `Ex`.

You can also create your own destination, getting the client id/secret etc from the `ExampleLibrary-xsuaa-service` service. The list of services can be found under instances and subscriptions at the subaccount level. This way you can control the name of the destination but more importantly the destination is not removed if the Library is undeployed! This fascade means, you can change the library endpoint without having to make any changes to your SAPUI5 application.

John

[benlim]

Hi jlongie ,

I followed your advise still not able to load the library from backend. Does the library example from the Github shared is deployed to BTP CF or On-Premise? If loading library from On-Premise is not supported, do you know is there any guide to migrate Library type application from WebIDE to Business Application Studio(BAS) so that I could migrate my Library app to BTP CF? I could not find example that develop Library app using BAS and consume it from BTP Launchpad Service.

Thanks.

Regards,

Ben

[zdravko_georgiev]

HI ben_yslim,

I believe that there is additional configuration missing. From your screenshot I can see that it is trying to load your custom lib from the default UI5 location, hence "/resources/sap/...".

I think that you need to add an additional resource root in your "index.html". Please try the following. open the index.html file and add one additional entry to the "data-sap-ui-resourceroots" property. It should look something like this

"my.custom.lib": "../path/to/my/custom/lib"

Hope this helps!

Best Regards,

Zdravko

[benlim]

Hi @zdravko.georgiev,

No luck on this. Still the same error on it tries to load from default UI5.

The error happens when the app launch from Launchpad service. When I tested in BAS and run locally, the app able to load the library from backend. From the console when launching locally in BAS, the fiori tools is rewriting the path to the backend when it load the library.

Regards,

Ben

[zdravko_georgiev]

Hi ben_yslim,

yes, you need to also define the custom lib in the manifest.json. Like this

"dependencies": {
            "minUI5Version": "1.94.1",
            "libs": {
                "my.custom.lib": {
                    "lazy": false
...

Please also note that the custom libs needs to be also deployed to the backend.

Hope this helps!

Best Regards,

Zdravko

[benlim]

Hi @zdravko.georgiev,

The custom libs had deployed to the backend. I'm still having the same error although had maintained the custom library in manifest. When the application is loaded from the Launchpad service, it tries to load from the resources path of the custom library instead from the backend path. What steps that I missed out?

This is my current UI5.yaml file. Does a new path is needed for backend destination path "/Custom/Library"?

Regards,

Ben

[zdravko_georgiev]

Hi ben_yslim,

what type of project do you have? Is it Fiori elements or SAPUI5?

Also could you please check if you have a file called "locate-reuse-libs.js" in your application?

[benlim]

Hi @zdravko.georgiev,

This is a freestyle SAPUI5 application migrated from Web-IDE to BAS.

Yes, there is a file called "locate-reuse-libs.js" which is automatically generated after I migrated the application to BAS

Regards,

Ben

[zdravko_georgiev]

Hi Aurélien,

OK, now I see what you mean. The "fiori-tools-servestatic" can only be used for serving files from your local machine. Hence src points always to a path on your local machine.

In order to load the custom UI5 lib from the OnPremise system you will need to update the backend configuration of the "fiori-tools-proxy". Hence you need add additional path & url in the backend section.

Please see here: https://www.npmjs.com/package/@sap/ux-ui5-tooling#connecting-to-multiple-back-end-systems

Please check also this here: https://www.npmjs.com/package/@sap/ux-ui5-tooling#changing-the-path-to-which-a-request-is-proxied

Hope this helps.

Best Regards,

Zdravko

[Aurelien]

Thanks it's working fine!

[benlim]

Hi @aualb/@zdravko.georgiev,

I'm having similar requirement to load custom UI5 lib from the OnPremise system.

I'm able to run the app from BAS after migrated from Web IDE. However, when I deployed the app to Launchpad service, the app not able to run and having errors while trying to load the custom UI5 lib. In the console, the errors shows in the manifest when the custom UI5 lib trying to load from "https://sapui5.hana.ondemand.com/1.94.1/resources/CUSTOMPATH/CUSTOMUI5LIB.js

Do I need to maintain the custom UI5 lib in manifest.json file?

How should I maintained the path & URL in the backend section?

Regards,

Ben