Skip to Content

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

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-1/

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.

Add comment
10|10000 characters needed characters exceeded

  • Follow
  • Get RSS Feed

2 Answers

  • Best Answer
    Sep 26, 2018 at 06:34 PM
    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.

    Add comment
    10|10000 characters needed characters exceeded

  • Aug 24, 2018 at 09:34 PM

    Hi Christian,

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

    Kr, Wouter


    Add comment
    10|10000 characters needed characters exceeded