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

[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