This sample shows how to use npm packages. Two examples are shown here:
- How to consume a UI5 AMD style module
- How to consume a classic js class
We will consume @marianfoo/ui5-errorhandler.
Repo is here https://github.com/marianfoo/ui5-errorhandler
The two options are in UI5 style ErrorHandler and js class style ErrorHandler.
In npm package ui5.yaml , the ressource path is defined as:
resources:
configuration:
paths:
"/resources/cc/errorhandler/": "./"In the package.json file, we have the following entries:
"dependencies": {
"@marianfoo/ui5-errorhandler": "^0.0.4"
}, "ui5": {
"dependencies": [
"ui5-middleware-simpleproxy",
"@marianfoo/ui5-errorhandler"
]
}Consume it in the UI5 app with the resource path as defined in the npm package (Component.js):
sap.ui.define(
["sap/ui/core/UIComponent", "sap/ui/Device", "de/marianzeis/npmpackagesample/model/models",
"cc/errorhandler/ErrorHandler"
],
function (UIComponent, Device, models, ErrorHandler) {
"use strict";
return UIComponent.extend("de.marianzeis.npmpackagesample.Component", {
metadata: {
manifest: "json",
},
init: function () {
// call the base component's init function
UIComponent.prototype.init.apply(this, arguments);
// enable routing
this.getRouter().initialize();
// set the device model
this.setModel(models.createDeviceModel(), "device");
this._oErrorHandler = new ErrorHandler(this);
},
});
}
);In the ui5.yaml file, we have the following entries:
server:
customMiddleware:
...
- name: ui5-tooling-modules-middleware
afterMiddleware: compression
builder:
customTasks:
- name: ui5-tooling-modules-task
afterTask: replaceVersionIn package.json:
"devDependencies": {
"ui5-tooling-modules": "^0.1.2",
"@marianfoo/ui5-errorhandler": "^0.0.1"
},
"ui5": {
"dependencies": [
"ui5-tooling-modules"
]
}We consume it in Component.js with the npm package name:
sap.ui.define(
["sap/ui/core/UIComponent", "sap/ui/Device", "de/marianzeis/npmpackagesample/model/models",
"@marianfoo/ui5-cc-errorhandler/ErrorHandlerClass"],
function (UIComponent, Device, models, ErrorHandler) {
"use strict";
return UIComponent.extend("de.marianzeis.npmpackagesample.Component", {
metadata: {
manifest: "json",
},
init: function () {
// call the base component's init function
UIComponent.prototype.init.apply(this, arguments);
// enable routing
this.getRouter().initialize();
// set the device model
this.setModel(models.createDeviceModel(), "device");
this._oErrorHandler = new ErrorHandler(this);
},
});
}
);Now the javaScript class is wrapped:
var BaseObject = require('sap/ui/base/Object');
var MessageBox = require('sap/m/MessageBox');
module.exports = class ErrorHandler extends BaseObject {
// ************************************************************************************************************
// Constructor
// ************************************************************************************************************
/**
* Constructor Method of the error handler. Initialises the error handler for the default model of the component.
* @public
* @constructor
* @param {sap.ui.core.UIComponent} oComponent Reference to the component of the app
* @method module:controller/ErrorHandler#constructor
*/
constructor(oComponent) {sap.ui.define(['sap/ui/base/Object', 'sap/m/MessageBox'], (function (require$$0, require$$1) { 'use strict';
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var require$$0__default = /*#__PURE__*/_interopDefaultLegacy(require$$0);
var require$$1__default = /*#__PURE__*/_interopDefaultLegacy(require$$1);
var BaseObject = require$$0__default["default"];
var MessageBox = require$$1__default["default"];
var ErrorHandlerClass = class ErrorHandler extends BaseObject {
// ************************************************************************************************************
// Constructor
// ************************************************************************************************************
/**
* Constructor Method of the error handler. Initialises the error handler for the default model of the component.
* @public
* @constructor
* @param {sap.ui.core.UIComponent} oComponent Reference to the component of the app
* @method module:controller/ErrorHandler#constructor
*/
constructor(oComponent) {This project has been generated with 💙 and easy-ui5
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent