This project shows how easy it is to use an already hosted custom thirdparty javascript library in an UI5 application.
The magic happens in Component.js where you have to configure a shim in the UI5 Loader:
// Provides a shim for the lodash library
sap.ui.loader.config({
paths: {
"custom/Lodash": "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min"
},
shim: {
"custom/Lodash": {
amd: true,
exports: "_"
}
}
});
Then you can use the external javascript library like you know it already from other UI5 artefacts. See Home.controller.js.
sap.ui.define([
"sap/ui/core/mvc/Controller",
"custom/Lodash"
], function (Controller, Lodash) {
"use strict";
return Controller.extend("com.ui5.test.ui5ExternalLibrary.controller.Home", {
onInit: function () {
// call the thirdparty module via the path mapping
var iResult1 = Lodash.divide(10, 2);
// call the thirdparty module via the global namespace
var iResult2 = _.divide(10, 2);
}
});
});
To run this UI5 application locally follow these steps:
- Open the terminal and execute
npm i
in the root folder - Execute
npm start
in the terminal