How to import a non-SAPUI5-library into SAPUI5-App, running in FLP CP

[former_member306541]

Hi everyone,

I followed the instructions to import a non-SAPUI5-library into a SAPUI5-App which is intended to run in a Fiori Launchpad in SAP Cloud Platform:

https://blogs.sap.com/2017/04/30/how-to-include-third-party-libraries-modules-in-sapui5/comment-page...

The library is imported correctly when I run the app in SAP Web IDE. But when I deploy the app to SAP Cloud Platform (CP) and run it within an FLP, nothing happens at all and no error occurs. The author of the linked blog post successfully tested it with FLP onpremise.

First I thought it might be because the lib is loaded within Component-preload.js. But even when I delete the entry in the deployed app with git (you cannot delete it within Web IDE, because everytime you deploy to SAP CP it is generated from scratch), the moment.js file is loaded correctly, but nothing happens. So I think that FLP in CP is doing something in a different way.

Does anybody know, how to import a non-SAPUI5-library into SAPUI5-App, running in FLP CP?

Here you can download my minimal app for testing.

Best regards,

Christian.

[former_member710548]

Hi Christian, I am trying to import external non-sap libraries into a SAP UI-5 Application, I have followed the above instructions and I was able to import moment library. I want to import keytar and nedb packages into the SAP UI-5 Application, but I am unable to import.Attached are the links for the packages and the sample code I am trying to import. Keytar:- https://www.npmjs.com/package/keytar Nedb:- https://www.npmjs.com/package/nedb

jQuery.myTimeEventLib = {
 registerExternalLib: function (oShim) {
 if (sap.ui.loader && sap.ui.loader.config) {
 // official API since 1.56
 sap.ui.loader.config({
 shim: oShim
 });
 } else {
 // internal API before 1.56
 jQuery.sap.registerModuleShims(oShim);
 }
 }
};

jQuery.myUniqueNamespace.registerExternalLib({
   "nxpcm/sample/ExtLibWithinFLP/libs/keytar": {
     "amd": true,
     "export": "keytar"
   }
});

It is giving me 'require is not defined' error. Even I tried to import the require library as well following the above instructions, still I am unable to import keytar and nedb packages. Please help on this.

[former_member34]

Hi there,

You have a question and need help by the community? Instead of posting into an old question thread, it is more helpful for you, if you create your own question. Here is how to get started:

1. Learn about asking and answering questions in SAP Community with this tutorial: https://developers.sap.com/tutorials/community-qa.html
2. Ask your detailed question here: https://answers.sap.com/questions/ask.html
3. Wait for a response.

That's it. Thank you!

This original question will be closed as it has already received a correct answer.

Best regards

Jennifer

Your SAP Community moderator

[former_member306541 · Accepted solution]

Hi everyone,<br>

SAP-Support has given me an answer, why this behavior occurs and how to fix it:

"Problems arise, when require,js is in use AND some script that follows the Unified Module Definition (UMD) pattern is to be loaded. In UMD, a module checks what kind of loader is available, e.g. AMD, CommonJS and uses the export mechanisms of the first loader that it finds. When it finds no loader, it exports to a global variable (window property). This mechanism works fine when there's only one loader, but when there are two (e.g. ui5loader and requirejs), exporting via one loader prevents visibility in the global scope.

And that's exactly what happens to your app: some library (according to our analysis, it is the sap.viz charting library), introduces require.js and when moment.js is loaded by the ui5loader for your app, it detects require.js, registers with it but therefore no longer exports to global."

There is an official solution for this since SAPUI5 1.56, s a p.ui.loader.config. In previous versions, you could use an internal API. But currently, this way is not officially proposed by SAP.

I put this code at the first line of Component.js:

jQuery.myUniqueNamespace = {
	registerExternalLib: function(oShim) {
		if (sap.ui.loader && sap.ui.loader.config) {
			// official API since 1.56
			sap.ui.loader.config({
				shim: oShim
			});
		} else {
			// internal API before 1.56
			jQuery.sap.registerModuleShims(oShim);
		}
	}
};
jQuery.myUniqueNamespace.registerExternalLib({
	"nxpcm/sample/ExtLibWithinFLP/libs/moment": {
		"amd": true,
		"export": "moment"
	}
});

And voila moment.js is loaded.

SAP support says:

"When using this call (sap.ui.loader.config, addition by me) early enough (before requiring moment.js), the loader will know how to load it and it will even provide the export as parameter to the sap.ui.define callback function (something that currently doesn't work for you, I guess)."

I do not get this to run. I still get undefined for my moment-parameter.

It seems to me that it is not possible to import an external within manifest.json. We have to use sap.ui.define.

Best regards,

Christian.

P.S. Sorry but I cannot delete the falsely formatted code sections.

[WouterLemaire]

Hi Christian,

I tried adding your app to Fiori in the Cloud on my trial account it works fine for me...

Kr, Wouter

[former_member306541]

Hi Wouter,

unbelievable! 😉 Thanks for testing!

This is what it looks for me in my default launchpad:

I tested in a fresh launchpad and suddenly it works, too! I think, I will have to open support ticket for this.

Best regards,

Christian.

[janithi]

This will only work once when deploy to fiori launch pad.. once deploy it again this won't work..

Please update if you found something

[WouterLemaire]

Indeed, noticed the same behavior... Looks like something wrong in the UI5 library that's being used by the Fiori Launchpad in the cloud. Support ticket is your best option...

[former_member306541]

I got an answer from SAP support and wrote a new comment to my question.

[ChristianPf]

Finally I could resolve my issues with importing 3rd party libs properly. Thanks for this info.