How to reuse a JS library in UI5 app in Web IDE and on the Frontend server?

[flotxi]

We are trying to reuse a JS Library from SAP in our custom UI5 application.

It's working fine in the Web IDE but when I deploy the application to our Frontend Server and run it from there I get a 404 - NOT FOUND error.

Error: failed to load 'hcm/fab/lib/common/util/CommonModelManager.js' from ./resources/hcm/fab/lib/common/util/CommonModelManager.js: 404 - NOT FOUND

The request URL NOT working from FES is:

http://<SERVER:PORT>;/sap/bc/ui5_ui5/atsp/hrxx_apprin/resources/hcm/fab/lib/common/util/CommonModelManager.js

The request URL working in Web IDE is:

https://webidetestingXXXXX.dispatcher.hana.ondemand.com/webapp/resources/hcm/fab/lib/common/util/CommonModelManager.js

I copied some parts from the SAP Standard Leave Request Approval Application, which is working fine in Web IDE and from the FES.

The request URL from FES is:

http://<SERVER:PORT>;/sap/bc/ui5_ui5/sap/hcmfab_common/~198160B89691DBE7FB5433CB077482D2~5/util/CommonModelManager-dbg.js

The request URL from Web IDE is:

https://webidetestingXXXXX.dispatcher.hana.ondemand.com/resources/hcm/fab/lib/common/util/CommonModelManager.js

My bootstrapping script in the index.html file is:

		<script id="sap-ui-bootstrap"
			src="./resources/sap-ui-core.js"
			data-sap-ui-libs="sap.m"
			data-sap-ui-theme="sap_belize"
			data-sap-ui-compatVersion="edge"
			data-sap-ui-resourceroots='{"hrxxapproverin": "./"}'>
		</script>

In my neo-app.json file I have:

{
		"path": "/webapp/resources/hcm/fab/lib/common",
		"target": {
			"type": "destination",
			"name": "<CONNECTION NAME>",
			"entryPath": "/sap/bc/ui5_ui5/sap/hcmfab_common",
			"preferLocal": true
		},
		"description": "hcm/fab/lib/common Reuse Library"
	}

In my manifest.json file I have:

		"dependencies": {
			"minUI5Version": "1.44.27",
			"libs": {
				"sap.ca.ui": {},
				"sap.m": {},
				"sap.ui.core": {},
				"sap.ui.layout": {},
				"sap.uxap": {},
				"hcm.fab.lib.common": {}
			}
		},

And in the controller I have:

sap.ui.define([
		"sap/ui/base/Object",
		"sap/ui/model/json/JSONModel",
		"hrxxapproverin/util/Conversions",
		"hcm/fab/lib/common/util/CommonModelManager"
	],

So how can I reuse a library in Web IDE and from my FES?

I am sure many of you know a solution and I am really helpful for any suggestion.

Best regards,

Florian

[flotxi · Accepted solution]

With Mathieus help I could finally make it work.

There are two cases I had to consider:

1. Testing via Web IDE
2. Running from our onPremise system

First of all:

Add a reference to the library via the rightclick function on our project.

This adds the dependecy to the manifest.json file and two new routes to the neo-app.json file.

		"dependencies": {
			"minUI5Version": "1.42.0",
			"libs": {
				"sap.f": {},
				"sap.m": {},
				"sap.ui.core": {},
				"MY_LIBRARY_NAME": {
					"minVersion": "1.0.0"
				}
			}
		}

MANIFEST.JSON

{
		"path": "/webapp/resources/PATH_TO_MY_LIBRARY",
		"target": {
			"type": "destination",
			"name": "YOUR_DESTINATION",
			"entryPath": "/sap/bc/ui5_ui5/PATH_TO_MY_LIBRARY", 
			"preferLocal": true
		},
		"description": "DESCRIPTION"
	}, {
		"path": "/resources/PATH_TO_MY_LIBRARY",
		"target": {
			"type": "destination",
			"name": "YOUR_DESTINATION",
			"entryPath": "/sap/bc/ui5_ui5/PATH_TO_MY_LIBRARY", 
			"preferLocal": true
		},
		"description": "DESCRIPTION"
	}

NEO-APP.JSON

Testing via Web IDE

We have SAML2 activated. So the first thing we had to do was deactivate it on the /SAP/BC/UI5_UI5 and the /SAP/OPU/ODATA SICF node.

Now for testing the app in Web IDE that's already enough.

Another thing to consider:

We are developing on one client and testing with another client.

If that's your case you have to add the testing clients destination to the Manifest.json routes.

Running from our onPremise system:

To also use the library on production I had to add the code from Mathieus answer to the beginning of my Component.js file.

(function () {
	jQuery.sap.registerModulePath("MY_LIBRARY_NAME", "/sap/bc/ui5_ui5/PATH_TO_MY_LIBRARY");
}());

But that would create a new routing error in Web IDE so I had to add an additional route to the neo-app.json file.

	{
		"path": "/sap/bc/ui5_ui5/PATH_TO_MY_LIBRARY",
		"target": {
			"type": "destination",
			"name": "YOUR_DESTINATION",
			"entryPath": "/sap/bc/ui5_ui5/PATH_TO_MY_LIBRARY", 
			"preferLocal": true
		},
		"description": "DESCRIPTION"
	}

So thanks again for your help and I hope my answer will help you with this problem. 🙂

-Florian

[MVE]

Hi dorf,

I had the same issue as you to reuse the existing hcm.fab.lib.common library and found the solution by reading the following blogs:

• SAPUI5 Custom control library: Web IDE Development, deployment to HCP, and to on-premise ABAP Reposi...
• SAPUI5 custom libraries: Deploy to ABAP Repository and use in applications
• SAP Fiori 2.0 for SAP HCM – How to extend “My Profile” app using SAP Web IDE

After several trials and errors, I used the solution proposed by Mateusz Jarmuzek:

I declared the following instruction at the beginning of the file Component.js:

(function () {
	jQuery.sap.registerModulePath("hcm.fab.lib.common", "/sap/bc/ui5_ui5/sap/hcmfab_common/");
}());

Fyi, I'm deploying and running this app on a SAPUI5 ABAP Repository (and not the SAP Cloud Platform).

Best Regards,

Mathieu

[flotxi]

Hi Mathieu,

thanks for your help your change to Component.js was one thing I had to do.

For all steps I had to do please see my next comment 🙂

Thanks again and best regards,

Florian

[Sharathmg]

check this blog to include external library to your project.

https://blogs.sap.com/2017/09/15/library-manager-for-sap-web-ide/

[flotxi]

Thanks for the fast reply and it look really a cool tool.

But I need to load a SAP Library from /sap/bc/ui5_ui5/sap/hcmfab_common

[EliuGonzalez86]

Hi Florian Dornauer,

did you solve the issue?, I'm having the same problem

best regards

[flotxi]

not yet 😞

[junwu]

if you are running your app with your own html, you have to use registermodulepath to tell the framework where to load the lib.

if you run your app in flp, you don't have to anything.