Skip to Content
0

How to extend Fiori Apps with custom JavaScript libraries?

Mar 06, 2017 at 02:03 PM

638

avatar image
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

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

5 Answers

Best Answer
Srikanth KV Mar 06, 2017 at 05:14 PM
1

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"
           }]
    }
}
Show 1 Share
10 |10000 characters needed characters left characters exceeded
Former Member

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
0
Jun Wu Mar 06, 2017 at 03:55 PM
0
Show 3 Share
10 |10000 characters needed characters left characters exceeded
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.

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

can you try that in your component js? adjust the path if necessary.
0
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", {
});
});
0
avatar image
Former Member Mar 06, 2017 at 03:50 PM
0

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?

Share
10 |10000 characters needed characters left characters exceeded
Jun Wu Mar 07, 2017 at 09:12 PM
0

what are those script?

Show 2 Share
10 |10000 characters needed characters left characters exceeded
Former Member

manifest, controller & component...

0
Former Member

or do you mean script.js, its an alias

in fact it is the web3.js API

0
avatar image
Former Member Mar 08, 2017 at 12:14 PM
0

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..
);
Share
10 |10000 characters needed characters left characters exceeded