Skip to Content
avatar image
Former Member

How to extend Fiori Apps with custom JavaScript libraries?

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

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

5 Answers

  • Best Answer
    Mar 06, 2017 at 05:14 PM

    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"
               }]
        }
    }
    Add comment
    10|10000 characters needed 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
  • Mar 06, 2017 at 03:55 PM
    Add comment
    10|10000 characters needed characters exceeded

    • 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", {
      });
      });
  • avatar image
    Former Member
    Mar 06, 2017 at 03:50 PM

    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?

    Add comment
    10|10000 characters needed characters exceeded

  • Mar 07, 2017 at 09:12 PM

    what are those script?

    Add comment
    10|10000 characters needed characters exceeded

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

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