cancel
Showing results for 
Search instead for 
Did you mean: 

Is there a way to consume custom UI5 library from SAP Business Application Studio?

MioYasutake
Active Contributor

Hi experts,

In Web IDE, we had this nice feature where you can reference a custom library sitting in the same workspace as the consumer app.

We would set "Use my workspace first" in run configurations, and this enabled running the app on WebIDE, referencing the custom library.

In Business Application Studio, can we do the same sort of thing?

I thought of using a separate approuter, but it didn't work.

Regards,

Mio

Accepted Solutions (1)

Accepted Solutions (1)

MioYasutake
Active Contributor
0 Kudos

I'm able to use custom library by the following settings.

1. Add "libs" folder under webapp and import library resource into this folder.

2. Add below configuration to ui5.yaml so that "libs" folder will not be deployed to ABAP server.

builder:
  resources:
    excludes:
      - "/libs/**"   

3. Add resourceRoots to manifest.json.

  "sap.ui5": {
    ...
    "dependencies": {
      "minUI5Version": "1.60.1",
      "libs": {
        "sap.ui.core": {},
        "sap.m": {},
        "sap.ui.layout": {}    
      }
    },
    "resourceRoots": {
      "demo.library-template": "./libs/library-template/src/demo/mylibrary" 
    },

This enables consuming the library in BAS.

Before deploying, I need to remove resourceRoots and add the library to dependencies.

Answers (3)

Answers (3)

maheshpalavalli
Active Contributor

Did you check this:

https://sap.github.io/ui5-tooling/pages/Workflows/#linking-projects

npm link reuselibrary

Regards,

Mahesh

MioYasutake
Active Contributor
0 Kudos

Hi Mahesh,

Thank you for this information.

I tried, and it added my library to node_modules folder.

I could use this like normal node modules, but I'm using my library inside UI5 app.

    "dependencies": {
      "minUI5Version": "1.60.1",
      "libs": {
        "sap.ui.core": {},
        "sap.m": {},
        "sap.ui.layout": {},    
        "zlib.mylibrary": {
            "minVersion": "1.0.0"
        }    
      }
    }

Can I achieve this using npm link?

As this is just for local (BAS) development, I'd like to avoid treating it like a third party library, which requires modifications to the project structure.

Regards,

Mio

ennoury
Participant
0 Kudos

Hi,

1. From the menu bar, click View Find Command Consume SAP Services .

2. From the drop down list, select the project type to which you want to bind the service.

3. Select the project's module.

4. Select the location of your data source.

○ If your data source resides within one of your SAP systems:

1. From the list of sources (destinations) displayed, select the relevant source: System URL, Service URL, or Catalog System URL.

2. If you selected System URL, enter the path to the specific service.

3. If you selected Catalog System URL, select the desired service from the list of exposed services displayed.

○ If your data source resides in the SAP API Business Hub:

1. Select the relevant API package (API Business Hub destination).

2. Select the desired API from the list displayed.

Once you select a data source, the metadata is retrieved and output is created depending on the project type you chose.

● If you bound a service for a Business Application project, a folder called external is created. This folder contains 2 sub folders:

○ edmx - Contains the retrieved data

○csn - Contains a JSON file representing the CDS version of the metadata.xml file.

If you bound a service for an SAP Fiori UI application, all the necessary configurations are automatically added to the SAP Fiori app using the service in your UI.

Regards.

MioYasutake
Active Contributor
0 Kudos

Hi ennoury,

Thanks for your suggestion.

However, it looks like how to add a data source to an existing project.

I need add reference to my custom library.

Regards,

Mio

yuval_morad
Employee
Employee
0 Kudos

Hi

We need to check

Please share:

1. Target runtime: ABAP/CF

2. manifest.json

3. xs-app.json and reuse-lib route

4. package.json of the Fiori app

5. UI5.yaml of the Fiori app

MioYasutake
Active Contributor
0 Kudos

Hi Yuval

Thanks for your attention. Target runtime is ABAP.

I've uploaded my project including Fiori app and library to Git repository.

Regarding the library, I created it in WebIDE and just imported to BAS.

Regards,

Mio