Component.ts (Typescript version of UI5 component controller)

Component.ts

sap.ui.define([
	"sap/ui/core/UIComponent",
	"sap/ui/Device",
	"sap/ui/model/json/JSONModel",
	"de/tammenit/ui5/AppAdminApp/model/models",
	"sap/base/Log",
	"sap/ui/core/Popup"
], function (UIComponent: typeof sap.ui.core.UIComponent,
	Device: typeof sap.ui.Device,
	JSONModel: typeof sap.ui.model.json.JSONModel,
	models,
	Log,
	Popup: typeof sap.ui.core.Popup,
) {
		"use strict";

		class Component extends UIComponent {
			private _logger;
			private mainModel: sap.ui.model.json.JSONModel;

			constructor(mSettings: object) {
				// it's important to call the extend method here. It creates metadata that is used in UI5 apps via
				// the method getMetadata. Hence we also assign this method to the prototype of our class.
				let fnClass = UIComponent.extend("de.tammenit.ui5.AppAdminApp.Component", {
					metadata: {
						manifest: "json"
					}
				});
				Component.prototype.getMetadata = fnClass.prototype.getMetadata;

				super("de.tammenit.ui5.AppAdminApp.Component", mSettings);
			}

			/**
			 * The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
			 * @public
			 * @override
			 */
			async init() {
				// call the base component's init function
				UIComponent.prototype.init.apply(this);

				this._logger = Log.getLogger("de.tammenit.ui5.AppAdminApp.Component")

				// enable routing
				this.getRouter().initialize();

				// set the device model
				this.setModel(models.createDeviceModel(), "device");

				// initialize the main model
				this.mainModel = new JSONModel({}, false);

				// are there startup parameters?
				await this._analyseStartupParams()
				try {
					await this.getApplications()
				} catch(error) {
					this.displayMessage("backend.getapplications.read.error")
				}
			}

			/**
			 * returns the main Model of the application
			 *
			 * @returns {sap.ui.model.json.JSONModel} the main model of the application
			 * @memberof Component
			 */
			public getMainModel(): sap.ui.model.json.JSONModel {
				return this.mainModel;
			}

			/**
			 * checks if startup parameters were transmitted and sets them in model appParams
			 */
			private _analyseStartupParams(): Promise<void> {
				return new Promise<void>((resolve /*, reject */) => {
					const appParamsModel = new JSONModel({}, false);
					this.setModel(appParamsModel, "appParams");

					const oComponentData = <{startupParameters: {webResourceURI: string, backendContextURI: string}}>this.getComponentData();
					// if parameter direction was set on url we save this in a temporary model, otherwise we set PUSH as default
					if (oComponentData && oComponentData.startupParameters) {
						if (oComponentData.startupParameters.webResourceURI) {
								appParamsModel.setProperty("/webResourceURI", oComponentData.startupParameters.webResourceURI);
						}
						if (oComponentData.startupParameters.backendContextURI) {
							appParamsModel.setProperty("/backendContextURI", oComponentData.startupParameters.backendContextURI);
						}
						this._logger.info("app was started with parameters " + JSON.stringify(oComponentData.startupParameters || {}));
					}
					resolve();
				});
			}
			
			public getApplications(): Promise<Array<de.tammenit.ui5.AppAdminApp.data.ApplicationData>> {
				return new Promise((resolve, reject) => {
					var xhr = new XMLHttpRequest();
					xhr.open('GET', `${this.getBackendContext()}GetAdminApplications`);
					xhr.onload = function() {
						if (xhr.status === 200) {
							let data: Array<de.tammenit.ui5.AppAdminApp.data.ApplicationData> = JSON.parse(xhr.responseText)
							if(!Array.isArray(data)) {data = []}
							const mainData = <de.tammenit.ui5.AppAdminApp.data.MainModelData>this.getMainModel().getData();
							mainData.applications = data;
							this.getMainModel().setData(mainData);

							resolve(data);
						}
						else {
							this._logger.error(JSON.stringify(xhr));
							reject(xhr.statusText);
						}
					}.bind(this);
					xhr.onerror = function(oEvent) {
						reject("Error")
					}
					xhr.send();
				})
			}

		}

		return Component

	});