How to extend Fiori Apps with custom JavaScript libraries?

[Former Member]

Hi all,

I want a custom set of JavaScript libraries to be included into my Fiori app, e.g. folder with my libraries and files I want to use within my app.

myLib/myJS.js
myLib/folder/script.js
... etc

In html I would load this via <script> tag and then inline javascript to use it. But as understood I have to rely on component.js usage.

Can somebody please explain me how to include the whole folder (which is representing an API) into my Fiori app?

Thanks in advance

Antoni

[former_member365727 · Accepted solution]

You can use manifest.json --> sap.ui5 --> resources

With the below code its possible to load multiple JS and CSS files as required

"sap.ui5": {
    "resources": {
          "js": [{
               "uri": "/myLib/dist/script.min.js"
           }],
           "css": [{
               "uri": "css/style.css"
           }]
    }
}

[Former Member · Accepted solution]

Hi,

this is what I already tried, but it throws an exception on app start. Log is showing...

found in negative cache: 'cypha/web3/dist/web3.min.js' from undefined/cypha/web3/dist/web3.min.js: SyntaxError: Invalid regular expression flags

[Former Member]

I would suggest that you utilize the following in a BaseController.controller.js file that can be the parent of all other Controllers:

sap.ui.define([
"path/to/third/party/library/script"
],function(script){
..use script methods here..
);

[junwu]

what are those script?

[Former Member]

manifest, controller & component...

[Former Member]

or do you mean script.js, its an alias

in fact it is the web3.js API

[junwu]

https://sapui5.hana.ondemand.com/#docs/guide/be0cf40f61184b358b5faedaec98b2da.html

check resourceRoots

[Former Member]

Hi,

thanks for your answer, but I must admit that I dont understand what to do with it.

I tried so many things now, i'm lost.

In addition, I can only test my dev when i deploy the app into cloud. running sandbox from webide throws so much errors of 404.

It's could be monday.

[junwu]

sap.ui.define(["./mylib/myJS",...

can you try that in your component js? adjust the path if necessary.

[Former Member]

I added this into component.js define & function.

I also provided in manifest.json a "JS" entry.

Now the app is loading without error. It seems it worked at this point.

But once I init a class/object the app dumps again. (run as webidetesting)

Caused by: Error: failed to load 'script.js' from ../../../../../resources/script.js: 404 - Not Found

Find here my code from

Manifest.json

"resources": {
"js": [
{
"uri": "lib/dist/script.js"
}
],
"css": [
{
"uri": "css/style.css"
}
]
},
"resourceRoots": {
".js": "./lib"
}

Component.js

sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
"cyp/model/models",
"./lib/dist/script"
], function(UIComponent, Device, models, script) {

Controller.js

sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";

var Obi = jQuery.sap.require('script');
//jQuery.sap.log.info(script);
return Controller.extend("cyp.controller.Main", {
});
});

[Former Member]

update: I figured out to use jQuery in Component.js to include a script. in project tree I put "myLib" folder into "webapp" folder. but in includeScript I reference only to myLib, as I realized in "dist/Component.js" this path is wrong, while webapp is not available.

jQuery.sap.includeScript("/myLib/dist/script.min.js"); 
sap.ui.define([
"sap/ui/core/UIComponent",...

Once I deploy into launchpad and run the app, console shows an error: file couldnt be found 404.

How to reference correctly to the script? Or how to make it deployed with fiori app?