@sap-ux/fiori-freestyle-writer 0.12.9 → 0.13.2

package/dist/defaults.d.ts

@@ -6,4 +6,5 @@ import type { FreestyleApp } from './types';
  * @param ffApp full config object used by the generate method
  */
 export declare function setDefaults(ffApp: FreestyleApp<unknown>): void;
+export declare const escapeFLPText: (s: string) => string;
 //# sourceMappingURL=defaults.d.ts.map

package/dist/defaults.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setDefaults = void 0;
+exports.escapeFLPText = exports.setDefaults = void 0;
 const read_pkg_up_1 = __importDefault(require("read-pkg-up"));
 const types_1 = require("./types");
 /**
@@ -48,4 +48,7 @@ function setDefaults(ffApp) {
     ffApp.appOptions = Object.assign({ loadReuseLibs: true }, ffApp.appOptions);
 }
 exports.setDefaults = setDefaults;
+// Specific escaping is required for FLP texts in flpSandbox.html template file
+// Escapes '\' with '\\\\' and '"' with '\"' to correctly render inputs in a secure way
+exports.escapeFLPText = (s) => s.replace(/\\/g, '\\\\').replace(/(")/g, '\\$&');
 //# sourceMappingURL=defaults.js.map

package/dist/index.js

@@ -30,7 +30,7 @@ const defaults_1 = require("./defaults");
  * @returns Reference to a mem-fs-editor
  */
 function generate(basePath, data, fs) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g;
     return __awaiter(this, void 0, void 0, function* () {
         // Clone rather than modifying callers refs
         const ffApp = cloneDeep_1.default(data);
@@ -40,14 +40,18 @@ function generate(basePath, data, fs) {
         // add new and overwrite files from templates e.g.
         const tmplPath = path_1.join(__dirname, '..', 'templates');
         // Common files
-        fs.copyTpl(path_1.join(tmplPath, 'common', 'add', '**/*.*'), basePath, ffApp);
-        fs.copyTpl(path_1.join(tmplPath, ffApp.template.type, 'add', `**/*.*`), basePath, ffApp, undefined, {});
+        const ignore = [((_a = ffApp.appOptions) === null || _a === void 0 ? void 0 : _a.typescript) ? '**/*.js' : '**/*.ts'];
+        fs.copyTpl(path_1.join(tmplPath, 'common', 'add'), basePath, Object.assign(Object.assign({}, ffApp), { escapeFLPText: defaults_1.escapeFLPText }), undefined, {
+            globOptions: { ignore }
+        });
+        fs.copyTpl(path_1.join(tmplPath, ffApp.template.type, 'add'), basePath, ffApp, undefined, { globOptions: { ignore } });
         if (ffApp.template.type === types_1.TemplateType.Basic) {
             const viewName = ffApp.template.settings.viewName;
             const viewTarget = path_1.join(basePath, 'webapp', 'view', `${viewName}.view.xml`);
             fs.copyTpl(path_1.join(tmplPath, ffApp.template.type, 'custom/View.xml'), viewTarget, ffApp);
-            const controllerTarget = path_1.join(basePath, `webapp/controller/${viewName}.controller.js`);
-            fs.copyTpl(path_1.join(tmplPath, ffApp.template.type, 'custom/Controller.js'), controllerTarget, ffApp);
+            const ext = ((_b = ffApp.appOptions) === null || _b === void 0 ? void 0 : _b.typescript) ? 'ts' : 'js';
+            const controllerTarget = path_1.join(basePath, `webapp/controller/${viewName}.controller.${ext}`);
+            fs.copyTpl(path_1.join(tmplPath, ffApp.template.type, `custom/Controller.${ext}`), controllerTarget, ffApp);
         }
         // Add template specific manifest settings
         const manifestPath = path_1.join(basePath, 'webapp', 'manifest.json');
@@ -60,12 +64,12 @@ function generate(basePath, data, fs) {
         fs.extendJSON(packagePath, JSON.parse(ejs_1.render(fs.read(path_1.join(tmplPath, 'common', 'extend', 'package.json')), ffApp, {})));
         const packageJson = JSON.parse(fs.read(packagePath));
         packageJson.scripts = Object.assign(packageJson.scripts, Object.assign({}, packageConfig_1.getPackageJsonTasks({
-            localOnly: !((_a = ffApp.service) === null || _a === void 0 ? void 0 : _a.url),
-            addMock: !!((_b = ffApp.service) === null || _b === void 0 ? void 0 : _b.metadata),
-            sapClient: (_c = ffApp.service) === null || _c === void 0 ? void 0 : _c.client,
+            localOnly: !((_c = ffApp.service) === null || _c === void 0 ? void 0 : _c.url),
+            addMock: !!((_d = ffApp.service) === null || _d === void 0 ? void 0 : _d.metadata),
+            sapClient: (_e = ffApp.service) === null || _e === void 0 ? void 0 : _e.client,
             flpAppId: ffApp.app.flpAppId,
-            startFile: (_d = data === null || data === void 0 ? void 0 : data.app) === null || _d === void 0 ? void 0 : _d.startFile,
-            localStartFile: (_e = data === null || data === void 0 ? void 0 : data.app) === null || _e === void 0 ? void 0 : _e.localStartFile
+            startFile: (_f = data === null || data === void 0 ? void 0 : data.app) === null || _f === void 0 ? void 0 : _f.startFile,
+            localStartFile: (_g = data === null || data === void 0 ? void 0 : data.app) === null || _g === void 0 ? void 0 : _g.localStartFile
         })));
         fs.writeJSON(packagePath, packageJson);
         // Add service to the project if provided

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sap-ux/fiori-freestyle-writer",
   "description": "SAP Fiori freestyle application writer",
-  "version": "0.12.9",
+  "version": "0.13.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/SAP/open-ux-tools.git",
@@ -21,7 +21,7 @@
   ],
   "dependencies": {
     "@sap-ux/odata-service-writer": "0.14.6",
-    "@sap-ux/ui5-application-writer": "0.14.6",
+    "@sap-ux/ui5-application-writer": "0.15.1",
     "@sap-ux/ui5-config": "0.14.5",
     "ejs": "3.1.7",
     "i18next": "20.3.2",

package/templates/basic/add/webapp/Component.ts

@@ -0,0 +1,28 @@
+import BaseComponent from "<%- app.baseComponent %>";
+import { createDeviceModel } from "<%=app.id.replace(/\./g, '/')%>/model/models";
+
+/**
+ * @namespace <%- app.id %>
+ */
+export default class Component extends BaseComponent {
+
+	public static metadata = {
+		manifest: "json"
+	};
+
+    /**
+     * The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
+     * @public
+     * @override
+     */
+	public init() : void {
+		// call the base component's init function
+		super.init();
+
+        // enable routing
+        this.getRouter().initialize();
+
+        // set the device model
+        this.setModel(createDeviceModel(), "device");
+	}
+}

package/templates/basic/add/webapp/controller/App.controller.ts

@@ -0,0 +1,11 @@
+import Controller from "sap/ui/core/mvc/Controller";
+
+/**
+ * @namespace <%- app.id %>.controller
+ */
+export default class App extends Controller {
+
+    public onInit(): void {
+
+    }
+}

package/templates/basic/custom/Controller.ts

@@ -0,0 +1,11 @@
+import Controller from "sap/ui/core/mvc/Controller";
+
+/**
+ * @namespace <%- app.id %>.controller
+ */
+export default class <%- template.settings.viewName %> extends Controller {
+
+    public onInit(): void {
+
+    }
+}

package/templates/common/add/webapp/model/models.ts

@@ -0,0 +1,8 @@
+import JSONModel from "sap/ui/model/json/JSONModel";
+import Device from "sap/ui/Device";
+
+export function createDeviceModel () {
+    var model = new JSONModel(Device);
+    model.setDefaultBindingMode("OneWay");
+    return model;
+}

package/templates/common/add/webapp/test/flpSandbox.html

@@ -44,8 +44,8 @@
             },
             applications: {
                 "<%- app.flpAppId %>": {
-                    title: "<%- app.title %>",
-                    description: "<%- app.description %>",
+                    title: "<%- escapeFLPText(app.title) %>",
+                    description: "<%- escapeFLPText(app.description) %>",
                     additionalInformation: "SAPUI5.Component=<%- app.id  %>",
                     applicationType: "URL",
                     url: "../"
@@ -55,7 +55,7 @@
     </script>
 
     <script src="../test-resources/sap/ushell/bootstrap/sandbox.js" id="sap-ushell-bootstrap"></script>
-    <!-- Bootstrap the UI5 core library -->
+    <!-- Bootstrap the UI5 core library. 'data-sap-ui-frameOptions="allow"'' is a NON-SECURE setting for test environments -->
     <script id="sap-ui-bootstrap"
         src="../resources/sap-ui-core.js"
         data-sap-ui-libs="<%- ui5.ui5Libs %>"
@@ -65,10 +65,15 @@
         data-sap-ui-compatVersion="edge"
         data-sap-ui-language="en"
         data-sap-ui-resourceroots='{"<%- app.id  %>": "../"}'
-        data-sap-ui-frameOptions="allow"> // NON-SECURE setting for testing environment
-        </script><% if (appOptions.loadReuseLibs) { %>
-        <script id="locate-reuse-libs" src="../utils/locate-reuse-libs.js" data-sap-ui-manifest-uri="../manifest.json">
-        </script><% } %>
+        data-sap-ui-frameOptions="allow">
+    </script><% if (appOptions.loadReuseLibs) { %>
+    <script id="locate-reuse-libs" src="../utils/locate-reuse-libs.js" data-sap-ui-manifest-uri="../manifest.json">
+    </script><% } else { %>
+    <script>
+        sap.ui.getCore().attachInit(function () {
+            sap.ushell.Container.createRenderer().placeAt("content");
+        });
+    </script><% } %>
 </head>
 
 <!-- UI Content -->

package/templates/listdetail/add/webapp/Component.ts

@@ -0,0 +1,68 @@
+import UIComponent from "sap/ui/core/UIComponent";
+import { support } from "sap/ui/Device";
+import ErrorHandler from "./controller/ErrorHandler";
+import ListSelector from "./controller/ListSelector";
+import { createDeviceModel } from "./model/models";
+
+/**
+ * @namespace <%- app.id %>
+ */
+export default class Component extends UIComponent {
+
+    public static metadata = {
+        manifest: "json"
+    };
+
+    public listSelector: ListSelector;
+    private errorHandler: ErrorHandler;
+    private contentDensityClass: string;
+
+    /**
+     * The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
+     */
+    public init(): void {
+        // call the base component's init function
+        super.init();
+
+        this.listSelector = new ListSelector();
+        this.errorHandler = new ErrorHandler(this);
+
+        // enable routing
+        this.getRouter().initialize();
+
+        // set the device model
+        this.setModel(createDeviceModel(), "device");
+    }
+
+    /**
+     * The component is destroyed by UI5 automatically.
+     * In this method, the ListSelector and ErrorHandler are destroyed.
+     */
+    public destroy() {
+        this.listSelector.destroy();
+        this.errorHandler.destroy();
+        // call the base component's destroy function
+        super.destroy();
+    }
+
+    /**
+     * This method can be called to determine whether the sapUiSizeCompact or sapUiSizeCozy
+     * design mode class should be set, which influences the size appearance of some controls.
+     * @return css class, either 'sapUiSizeCompact' or 'sapUiSizeCozy' - or an empty string if no css class should be set
+     */
+    public getContentDensityClass(): string {
+        if (this.contentDensityClass === undefined) {
+            // check whether FLP has already set the content density class; do nothing in this case
+            // eslint-disable-next-line sap-no-proprietary-browser-api
+            if (document.body.classList.contains("sapUiSizeCozy") || document.body.classList.contains("sapUiSizeCompact")) {
+                this.contentDensityClass = "";
+            } else if (!support.touch) { // apply "compact" mode if touch is not supported
+                this.contentDensityClass = "sapUiSizeCompact";
+            } else {
+                // "cozy" in case of touch support; default for most sap.m controls, but needed for desktop-first controls like sap.ui.table.Table
+                this.contentDensityClass = "sapUiSizeCozy";
+            }
+        }
+        return this.contentDensityClass;
+    }
+}

package/templates/listdetail/add/webapp/controller/App.controller.ts

@@ -0,0 +1,39 @@
+import JSONModel from "sap/ui/model/json/JSONModel";
+import ODataModel from "sap/ui/model/odata/v2/ODataModel";
+import BaseController from "./BaseController";
+
+/**
+ * @namespace <%- app.id %>
+ */
+export default class App extends BaseController {
+
+    public onInit(): void {
+        const originalBusyDelay = this.getView()!.getBusyIndicatorDelay();
+
+        const viewModel = new JSONModel({
+            busy : true,
+            delay : 0,
+            layout : "OneColumn",
+            previousLayout : "",
+            actionButtonsInfo : {
+                midColumn : {
+                    fullScreen : false
+                }
+            }
+        });
+        this.setModel(viewModel, "appView");
+
+        const fnSetAppNotBusy = function() {
+            viewModel.setProperty("/busy", false);
+            viewModel.setProperty("/delay", originalBusyDelay);
+        };
+
+        // since then() has no "reject"-path attach to the MetadataFailed-Event to disable the busy indicator in case of an error
+        const mainModel: ODataModel = this.getUIComponent().getModel() as ODataModel;
+        mainModel.metadataLoaded().then(fnSetAppNotBusy);
+        mainModel.attachMetadataFailed(fnSetAppNotBusy);
+
+        // apply content density mode to root view
+        this.getView()!.addStyleClass(this.getUIComponent().getContentDensityClass());
+    }
+}

package/templates/listdetail/add/webapp/controller/BaseController.ts

@@ -0,0 +1,82 @@
+import ResourceBundle from "sap/base/i18n/ResourceBundle";
+import Model from "sap/ui/model/Model";
+import ResourceModel from "sap/ui/model/resource/ResourceModel";
+import Controller from "sap/ui/core/mvc/Controller";
+import View from "sap/ui/core/mvc/View";
+import History from "sap/ui/core/routing/History";
+import Router from "sap/ui/core/routing/Router";
+import AppComponent from "../Component";
+import { currencyValue } from "../model/formatter";
+
+/**
+ * @namespace <%- app.id %>
+ */
+export default class BaseController extends Controller {
+
+    public readonly formatter = {
+        currencyValue
+    };
+
+    /**
+     * Convenience method for accessing the owner component.
+     *
+     * @returns the owner component
+     */
+    protected getUIComponent(): AppComponent {
+        return super.getOwnerComponent() as AppComponent;
+    }
+
+    /**
+     * Convenience method for accessing the router in every controller of the application.
+     *
+     * @returns the router for this component
+     */
+    protected getRouter(): Router {
+        return this.getUIComponent().getRouter();
+    }
+
+    /**
+     * Convenience method for getting the view model by name in every controller of the application.
+     *
+     * @param name the model name
+     * @returns the model instance
+     */
+    protected getModel<T extends Model>(name?: string): T {
+        return this.getView()!.getModel(name) as T;
+    }
+
+    /**
+     * Convenience method for setting the view model in every controller of the application.
+     *
+     * @param model the model instance
+     * @param name the model name
+     * @returns the view instance
+     */
+    protected setModel(model: Model, name: string): View {
+        return this.getView()!.setModel(model, name);
+    }
+
+    /**
+     * Convenience method for getting the resource bundle.
+     *
+     * @returns the resourceBundle of the component
+     */
+     protected getResourceBundle(): ResourceBundle {
+        return (this.getUIComponent().getModel("i18n") as ResourceModel).getResourceBundle() as ResourceBundle;
+    }
+
+    /**
+     * Event handler for navigating back.
+     * It there is a history entry we go one step back in the browser history
+     * If not, it will replace the current entry of the browser history with the list route.
+     * 
+     */
+     protected onNavBack() {
+        if (History.getInstance().getPreviousHash() !== undefined) {
+            // eslint-disable-next-line sap-no-history-manipulation
+            history.go(-1);
+        } else {
+            this.getRouter().navTo("list", {});
+        }
+    }
+}

package/templates/listdetail/add/webapp/controller/Detail.controller.ts

@@ -0,0 +1,184 @@
+import { URLHelper } from "sap/m/library";<%if (template.settings.lineItem.name) {%>
+import Table from "sap/m/Table";<%}%>;
+import Event from "sap/ui/base/Event";
+import JSONModel from "sap/ui/model/json/JSONModel";
+import ListBinding from "sap/ui/model/ListBinding";
+import ODataModel from "sap/ui/model/odata/v2/ODataModel";
+import BaseController from "./BaseController";
+
+/**
+ * @namespace <%- app.id %>
+ */
+export default class Detail extends BaseController {
+
+    public onInit(): void {
+        // Model used to manipulate control states. The chosen values make sure,
+        // detail page is busy indication immediately so there is no break in
+        // between the busy indication for loading the view's meta data
+        const viewModel = new JSONModel({
+            busy: false,
+            delay: 0<%if (template.settings.lineItem.name) {%>,
+            lineItemListTitle: this.getResourceBundle().getText("detailLineItemTableHeading")<%}%>
+        });
+
+        this.getRouter().getRoute("object")!.attachPatternMatched(this.onObjectMatched, this);
+
+        this.setModel(viewModel, "detailView");
+
+        (this.getUIComponent().getModel() as ODataModel).metadataLoaded().then(this.onMetadataLoaded.bind(this));
+    }
+
+    /**
+     * Event handler when the share by E-Mail button has been clicked
+     */
+    public onSendEmailPress() {
+        const viewModel = this.getModel("detailView");
+
+        URLHelper.triggerEmail(
+            undefined,
+            viewModel.getProperty("/shareSendEmailSubject"),
+            viewModel.getProperty("/shareSendEmailMessage")
+        );
+    }
+
+    <%if (template.settings.lineItem.name) {%>
+    /**
+     * Updates the item count within the line item table's header
+     * @param event an event containing the total number of items in the list
+     */
+     public onListUpdateFinished(event: Event) {
+        const viewModel = this.getModel<JSONModel>("detailView");
+        const totalItems = event.getParameter("total") as number;
+        let title: string;
+        // only update the counter if the length is final
+        if ((this.byId("lineItemsList")!.getBinding("items") as ListBinding).isLengthFinal()) {
+            if (totalItems) {
+                title = this.getResourceBundle().getText("detailLineItemTableHeadingCount", [totalItems]);
+            } else {
+                //Display 'Line Items' instead of 'Line items (0)'
+                title = this.getResourceBundle().getText("detailLineItemTableHeading");
+            }
+            viewModel.setProperty("/lineItemListTitle", title);
+        }
+    }<%}%>
+
+    /**
+     * Binds the view to the object path and expands the aggregated line items.
+     * @function
+     * @param event pattern match event in route 'object'
+     * @private
+     */
+     private onObjectMatched(event: Event) {
+        const objectId = event.getParameter("arguments").objectId;
+        this.getModel<JSONModel>("appView").setProperty("/layout", "TwoColumnsMidExpanded");
+        this.getModel<ODataModel>().metadataLoaded().then(function (this: Detail) {
+            const objectPath = this.getModel<ODataModel>().createKey("Suppliers", {
+                SupplierID: objectId
+            });
+            this.bindView("/" + objectPath);
+        }.bind(this));
+    }
+
+    /**
+     * Binds the view to the object path. Makes sure that detail view displays
+     * a busy indicator while data for the corresponding element binding is loaded.
+     * @function
+     * @param objectPath path to the object to be bound to the view.
+     */
+    private bindView(objectPath: string) {
+        // Set busy indicator during view binding
+        const viewModel = this.getModel<JSONModel>("detailView");
+
+        // If the view was not bound yet its not busy, only if the binding requests data it is set to busy again
+        viewModel.setProperty("/busy", false);
+
+        this.getView()!.bindElement({
+            path: objectPath,
+            events: {
+                change: this.onBindingChange.bind(this),
+                dataRequested: function () {
+                    viewModel.setProperty("/busy", true);
+                },
+                dataReceived: function () {
+                    viewModel.setProperty("/busy", false);
+                }
+            }
+        });
+    }
+
+    private onBindingChange() {
+        const view = this.getView()!;
+        const elementBinding = view.getElementBinding();
+
+        // No data for the binding
+        if (!elementBinding.getBoundContext()) {
+            this.getRouter().getTargets()!.display("detailObjectNotFound");
+            // if object could not be found, the selection in the list
+            // does not make sense anymore.
+            this.getUIComponent().listSelector.clearListSelection();
+            return;
+        }
+
+        const path = elementBinding.getPath();
+        const resourceBundle = this.getResourceBundle();
+        const detailObject = view.getModel().getObject(path);
+        const viewModel = this.getModel<JSONModel>("detailView");
+
+        this.getUIComponent().listSelector.selectAListItem(path);
+
+        viewModel.setProperty("/shareSendEmailSubject",
+            resourceBundle.getText("shareSendEmailObjectSubject", [detailObject.<%=template.settings.entity.key%>]));
+        viewModel.setProperty("/shareSendEmailMessage",
+            resourceBundle.getText("shareSendEmailObjectMessage", [detailObject.<%=template.settings.entity.idProperty%>, detailObject.<%=template.settings.entity.key%>, location.href]));
+    }
+
+    protected onMetadataLoaded() {
+        // Store original busy indicator delay for the detail view
+        const originalViewBusyDelay = this.getView()!.getBusyIndicatorDelay();
+        const viewModel = this.getModel<JSONModel>("detailView");<%if (template.settings.lineItem.name) {%>
+        const lineItemTable = this.byId("lineItemsList") as Table;
+        const originalLineItemTableBusyDelay = lineItemTable.getBusyIndicatorDelay();<%}%>;
+
+        // Make sure busy indicator is displayed immediately when
+        // detail view is displayed for the first time
+        viewModel.setProperty("/delay", 0);<%if (template.settings.lineItem.name) {%>
+        viewModel.setProperty("/lineItemTableDelay", 0);
+
+        lineItemTable.attachEventOnce("updateFinished", function () {
+            // Restore original busy indicator delay for line item table
+            viewModel.setProperty("/lineItemTableDelay", originalLineItemTableBusyDelay);
+        });<%}%>
+
+        // Binding the view will set it to not busy - so the view is always busy if it is not bound
+        viewModel.setProperty("/busy", true);
+        // Restore original busy indicator delay for the detail view
+        viewModel.setProperty("/delay", originalViewBusyDelay);
+    }
+
+    /**
+     * Set the full screen mode to false and navigate to list page
+     */
+    protected onCloseDetailPress() {
+        this.getModel<JSONModel>("appView").setProperty("/actionButtonsInfo/midColumn/fullScreen", false);
+        // No item should be selected on list after detail page is closed
+        this.getUIComponent().listSelector.clearListSelection();
+        this.getRouter().navTo("list");
+    }
+
+    /**
+     * Toggle between full and non full screen mode.
+     */
+    protected toggleFullScreen() {
+        const viewModel = this.getModel<JSONModel>("appView");
+        const fullScreen = viewModel.getProperty("/actionButtonsInfo/midColumn/fullScreen");
+        viewModel.setProperty("/actionButtonsInfo/midColumn/fullScreen", !fullScreen);
+        if (!fullScreen) {
+            // store current layout and go full screen
+            viewModel.setProperty("/previousLayout", viewModel.getProperty("/layout"));
+            viewModel.setProperty("/layout", "MidColumnFullScreen");
+        } else {
+            // reset to previous layout
+            viewModel.setProperty("/layout", viewModel.getProperty("/previousLayout"));
+        }
+    }
+}

package/templates/listdetail/add/webapp/controller/DetailObjectNotFound.controller.ts

@@ -0,0 +1,8 @@
+import BaseController from "./BaseController";
+
+/**
+ * @namespace <%- app.id %>
+ */
+export default class DetailObjectNotFound extends BaseController {
+
+}

package/templates/listdetail/add/webapp/controller/ErrorHandler.ts

@@ -0,0 +1,61 @@
+import MessageBox, { Action } from "sap/m/MessageBox";
+import UI5Object from "sap/ui/base/Object";
+import Event from "sap/ui/base/Event";
+import ODataModel from "sap/ui/model/odata/v2/ODataModel";
+import AppComponent from "../Component";
+import ResourceModel from "sap/ui/model/resource/ResourceModel";
+import ResourceBundle from "sap/base/i18n/ResourceBundle";
+
+/**
+ * @namespace <%- app.id %>
+ */
+export default class ErrorHandler extends UI5Object {
+
+    protected readonly component: AppComponent;
+    protected messageOpen = false;
+
+    /**
+     * Handles application errors by automatically attaching to the model events and displaying errors when needed.
+     * @param component reference to the app's component
+     */
+    public constructor(component: AppComponent) {
+        super();
+        this.component = component;
+        const model = component.getModel() as ODataModel;
+        model.attachMetadataFailed(this.showServiceError);
+        model.attachRequestFailed(function (this: ErrorHandler, event: Event) {
+            const params = event.getParameters() as { response: XMLHttpRequest['response'] };
+            // An entity that was not found in the service is also throwing a 404 error in oData.
+            // We already cover this case with a notFound target so we skip it here.
+            // A request that cannot be sent to the server is a technical error that we have to handle though
+            if (params.response.statusCode !== "404" || (params.response.statusCode === 404 && params.response.responseText.indexOf("Cannot POST") === 0)) {
+                this.showServiceError(event);
+            }
+        }, this);
+    }
+
+    /**
+     * Shows a {@link sap.m.MessageBox} when a service call has failed.
+     * Only the first error message will be display.
+     * @param {string} sDetails a technical error to be displayed on request
+     */
+    private showServiceError(event: Event) {
+        if (this.messageOpen) {
+            return;
+        }
+        this.messageOpen = true;
+        MessageBox.error(
+            ((this.component.getModel("i18n") as ResourceModel).getResourceBundle() as ResourceBundle).getText("errorText"),
+            {
+                id: "serviceErrorMessageBox",
+                details: (event.getParameters() as XMLHttpRequest['response']).response,
+                styleClass: this.component.getContentDensityClass(),
+                actions: [Action.CLOSE],
+                onClose: function (this: ErrorHandler) {
+                    this.messageOpen = false;
+                }.bind(this)
+            }
+        );
+    }
+
+}