SAPUI5 loading multiple external libraries

[smith_john]

Hi,

I'm having a problem loading multiple libraries in my UI5 project, I've tried loading them in the controller, in the component.js and in the manifest and I get the same result each time... it only loads the first library and then I get an error !

the libraries are from amCharts ... https://www.amcharts.com ... has anyone used these successfully in their projects?

Controller example:

sap.ui.define([
	"sap/ui/core/UIComponent",
	"sap/ui/Device",
	"znrw/amCharts/model/models",
        "libs/core",
        "libs/charts",
        "libs/animated:
], function (UIComponent, Device, models, core, charts, animated) {
	"use strict";

etc...

Manifest example:

		"resources": {
			"js": [
				{
            		"uri": "libs/core.js"
        },
        				{
            		"uri": "libs/charts.js"
        },
        				{
            		"uri": "libs/animated.js"
        }
        ],

Both of these methods result int he same problem as reported in the browser console:

The issue is most likely caused by application znrw.amCharts. Please create a support incident and assign it to the support component of the respective application. - Failed to load UI5 component with properties: '{
    "asyncHints": {
        "waitFor": []
    },
    "name": "znrw.amCharts",
    "url": "../../../../../webapp",
    "id": "application-Test-url-component",
    "componentData": {
        "startupParameters": {}
    },
    "async": true
}'. Error likely caused by:
TypeError: Cannot read property '1' of null

[junwu]

did you know how to create lib?

[smith_john]

Sorry Jun, I don't understand what you mean?

[junwu]

i am asking do you have any idea how to create a lib and load it in ui5?

[smith_john]

Jun, see comments below

[junwu]

first wrap your stuff as lib in ui5(google how to make a lib in ui5.), then the loading through manifest will work.

[former_member524685]

Hi Neil,

Have you found out the reason. I am facing exactly the same scenario & error.

Kindly share the solution for this error.

Regards,

Deep

[smith_john]

Hi Deep, there was no solution I'm afraid.

I logged a ticket with SAP and they checked out my issue and we determined that it was not possible to load these libraries using the manifest method...

So I ended up loading them via the main controller in my app.

[AbhishekSharma]

Hi Neil,

You can add dependencies in manifest.js file like below

dependencies: {
    libs: ["sap.m", "sap.ui.layout", "External Lib path"],
    components: ["External Lib path"]
}

your library should be in resources folder.

Once done then you can register (registerModulePath) the path where your external library will be found. Please have a look to documentation below :

https://help.sap.com/saphelp_uiaddon10/helpdata/en/9c/5a9619f69f4a819f91fc89d9ff56f1/content.htm?no_...

Reference link :

https://archive.sap.com/kmuuid2/a0b41949-b803-3210-6bba-dc97da1ac623/SAP%20Fiori%20Launchpad%20for%2...

Hope this helps...

Thanks-

Abhishek

[AbhishekSharma]

Hi Neil,

If my understanding is correct you want to use external JS Libraries in SAPUI5. Try following below steps :

1. Download the minified file of external JS library which you want to use.
2. Create new Folder in SAPui5 application hierarchy under webapp
3. Create new file and paste minified code OR just include that external Minified JS file
4. Now go to the controller.js file of View where you want to use that External JS library functionality and add provide path/location of external JS file under SAP.UI.DEFINE([ "External Lib path" ])
5. You also need to pass new parameter in Function (Controller, ExternalJS)
6. If you still see some Error try adding /* global <External Library Name>:true */ on top of your Controller file where you want to use this External JS

You can follow same approach for all external files you want to use.

Hope this helps.

Thanks-

Abhishek

[smith_john]

Hi and thanks for answering.

I have already created the folder in my project and uploaded the js files for the libraries there.

As you can see from my first code example above, I have tried to load them in the controller using the method you described,this didn't work either... since however, I want to use these libraries in multiple places in my app, I believe loading them in the manifest is the preferred option.

The problem is that only the first library seems to get loaded, and then I get an error message... the second two libraries are dependent on the first.

Perhaps there is more info required in the manifest, resourceroots maybe..? Not sure how to set that?

Interestingly ... if I run the app with the index.html, it works! however since my app will be deployed to the FLP, I cannot use that 😞

Any one got any ideas?