loading third party libraries in SAPUI5

Question

I need to use Here Maps Javascript API library in my application. It works nicely when I run the app standalone(since I include it in index.html). But When I deploy it on HANA Cloud Platform and try to run it inside the HCP Portal site, it fails. I know I need to load the library files in Component.js since index.html is not used. My issue is that I need to load 4 different js files and one stylesheet before starting to draw the map. I am using jQuery.sap.includeScript()and jQuery.sap.includeStyleSheet() functions to do that but my rootview's onInit and onAfterRendering() is called before the library files are loaded(see their status as "pending"in the Networks Tab in chrome).

I followed the below post:

UsingjQuery.sap.includeScript().then() in HCP Firori Launchpad

How can I load/initialize the view only after the library files are loaded.

Is it correct to do all of this in component.js. Does manifest.json play any role in achieving this.

Any example will be helpful. Thanks in Advance.

My Component init code is as below:

init: function() {
            // call the base component's init function
            UIComponent.prototype.init.apply(this, arguments);
            var that = this;
            //Load the here maps library
            jQuery.sap.includeScript("https://js.api.here.com/v3/3.0/mapsjs-core.js", "hereMapsCore", $.proxy(function(succ) {
                jQuery.sap.includeScript("https://js.api.here.com/v3/3.0/mapsjs-service.js", "hereMapsService", $.proxy(function(succ) {
                    jQuery.sap.includeScript("https://js.api.here.com/v3/3.0/mapsjs-ui.js", "hereMapsUi", $.proxy(function(succ) {
                        jQuery.sap.includeScript("https://js.api.here.com/v3/3.0/mapsjs-mapevents.js", "heremapsEvent", $.proxy(function(succ) {
                            jQuery.sap.includeStyleSheet("https://js.api.here.com/v3/3.0/mapsjs-ui.css", "hereMapscss", $.proxy(function() {
                                // UIComponent.prototype.init.apply(this, arguments);
                                // set the device model
                                this.setModel(models.createDeviceModel(), "device");
                                var a = this;
                            }, this));
                        }, this), function(oErr) {
                            MessageBox.alert("Map File not loaded");
                        });
                    }, this), function(oErr) {
                        MessageBox.alert("Map File not loaded");
                    });
                }, this), function(oErr) {
                    MessageBox.alert("Map File not loaded");
                });
            }, this), function(oErr) {
                MessageBox.alert("Map File not loaded");
            });
        }

schnoedel schnoedel · Accepted Answer · 2016-09-08T09:13:58

You can add the needed resources in the component descriptor manifest.json as described in the Developer Guide in table 12:

Relative URLs in the component, taking embeddedBy into account if filled, pointing to js (JavaScript) and css resources that are needed by the app for specifying the mandatory uri and an id (optional) for CSS. The JavaScript files are loaded by the require mechanism. The CSS files are added to the head of the HTML page as a link tag. The resources are resolved relative to the location of the manifest.json file.

If you have problems with the absolute URIs, you could store the JavaScript and CSS files in your UI5 project below your component and use relative paths.

Example: Add this to manifest.json in the sap.ui5/resources section:

"sap.ui5": { 
  "resources":{ 
    "js": [
      {
        "uri": "lib/otherScript.js"
      },
      {
        "uri": "https://js.api.here.com/v3/3.0/mapsjs-core.js" 
      }
    ],
    "css": [
      {
        "id": "myCustomCSS",
        "uri": "css/style.css"
      },
      {
        "uri": "https://js.api.here.com/v3/3.0/mapsjs-ui.css"
      }
    ]
  }
}

loading third party libraries in SAPUI5

1 Answers