frontend (#1572)

* update

* update

* update camera

* update

* Update ui5lint.yml

.github/workflows/ui5lint.yml

@@ -16,4 +16,4 @@ jobs:
       with:
         node-version: '20.11.0'
     - run: cd app && npm i
-    - run: npm install --global @ui5/linter && ui5lint --details
+    - run: cd app && npm install --global @ui5/linter && ui5lint --details

app/package.json

@@ -9,14 +9,14 @@
   ],
   "main": "webapp/index.html",
   "devDependencies": {
-    "@abaplint/cli": "^2.113.30",
+    "@abaplint/cli": "^2.113.67",
     "@sap/ui5-builder-webide-extension": "^1.1.9",
-    "@sap/ux-ui5-tooling": "1",
+    "@sap/ux-ui5-tooling": "1.15.4",
-    "@ui5/cli": "^3.0.0",
+    "@ui5/cli": "^4.0.10",
-    "@ui5/linter": "^1.0.0",
+    "@ui5/linter": "^1.3.1",
-    "mbt": "^1.2.27",
+    "mbt": "^1.2.33",
-    "rimraf": "^5.0.5",
+    "rimraf": "^6.0.1",
-    "ui5-task-zipper": "^3.1.3"
+    "ui5-task-zipper": "^3.3.1"
   },
   "scripts": {
     "start": "fiori run --open \"test/flpSandbox.html?sap-ui-xx-viewCache=false#z2ui5-display\"",

app/webapp/Component.js

@@ -1,7 +1,5 @@
-sap.ui.define(["sap/ui/core/UIComponent", "z2ui5/model/models",
+sap.ui.define(["sap/ui/core/UIComponent", "z2ui5/model/models","z2ui5/cc/Server", "sap/ui/VersionInfo"
-      "z2ui5/cc/DebugTool","z2ui5/cc/Server", "sap/base/Log","sap/ui/VersionInfo"
+    ], function (UIComponent, Models, Server, VersionInfo) {
-  
-    ], function (UIComponent, models, DebugTool, Server, Log, VersionInfo) {
     return UIComponent.extend("z2ui5.Component", {
         metadata: {
             manifest: "json"
@@ -12,8 +10,7 @@ sap.ui.define(["sap/ui/core/UIComponent", "z2ui5/model/models",
 
             this.getRouter().initialize();
             z2ui5.oRouter = this.getRouter();
-            this.setModel(models.createDeviceModel(), "device");
+            this.setModel(Models.createDeviceModel(), "device");
-            this._oLogger = Log.getLogger("abap2UI5");
 
             z2ui5.oConfig = {};
             z2ui5.oConfig.ComponentData = this.getComponentData();

app/webapp/cc/DebugTool.js

@@ -144,6 +144,8 @@ sap.ui.define(["sap/ui/core/Control", "sap/ui/core/Fragment", "sap/ui/model/json
                 this.oDialog.close();
                 this.oDialog.destry();
             }
+        },
+        renderer(){
         }
     });
 });

app/webapp/controller/App.controller.js

@@ -252,7 +252,7 @@ sap.ui.define("z2ui5/Scrolling", ["sap/ui/core/Control"], (Control) => {
 
 
 
-sap.ui.define("z2ui5/Info", ["sap/ui/core/Control", "sap/ui/VersionInfo", "sap/ui/Device"], (Control, VersionInfo, Device) => {
+sap.ui.define("z2ui5/Info", ["sap/ui/core/Control", "sap/ui/VersionInfo", "sap/ui/Device"], (Control) => {
   "use strict";
 
   return Control.extend("z2ui5.Info", {
@@ -305,10 +305,10 @@ sap.ui.define("z2ui5/Info", ["sap/ui/core/Control", "sap/ui/VersionInfo", "sap/u
     onAfterRendering() {
     },
 
-    async renderer(oRm, oControl) {
+    async renderer(_, oControl) {
 
       let oDevice = z2ui5.oView.getModel("device").oData;
-      oControl.setProperty("ui5_version", sap.ui.version);
+      oControl.setProperty("ui5_version", z2ui5.oConfig.UI5VersionInfo.version);
       oControl.setProperty("device_phone", oDevice.system.phone);
       oControl.setProperty("device_desktop", oDevice.system.desktop);
       oControl.setProperty("device_tablet", oDevice.system.tablet);
@@ -317,7 +317,7 @@ sap.ui.define("z2ui5/Info", ["sap/ui/core/Control", "sap/ui/VersionInfo", "sap/u
       oControl.setProperty("device_width", oDevice.resize.width);
       oControl.setProperty("device_os", oDevice.os.name);
       oControl.setProperty("device_browser", oDevice.browser.name);
-       oControl.fireFinished();
+      oControl.fireFinished();
 
     }
   });
@@ -377,7 +377,6 @@ sap.ui.define("z2ui5/Geolocation", ["sap/ui/core/Control"], (Control) => {
 
     callbackPosition(position) {
 
-      var test = position.coords.longitude
       this.setProperty("longitude", position.coords.longitude, true);
       this.setProperty("latitude", position.coords.latitude, true);
       this.setProperty("altitude", position.coords.altitude, true);
@@ -386,24 +385,22 @@ sap.ui.define("z2ui5/Geolocation", ["sap/ui/core/Control"], (Control) => {
       this.setProperty("speed", position.coords.speed, true);
       this.setProperty("heading", position.coords.heading, true);
       this.fireFinished();
-      //this.getParent().getParent().getModel().refresh();
 
     },
 
     async init() {
 
       navigator.geolocation.getCurrentPosition(this.callbackPosition.bind(this));
-      //navigator.geolocation.watchPosition(this.callbackPosition.bind(this));
 
     },
 
-    exit() {//clearWatch
+    exit() {
     },
 
     onAfterRendering() {
     },
 
-    renderer(oRm, oControl) {
+    renderer() {
     }
   });
 }
@@ -670,6 +667,110 @@ sap.ui.define("z2ui5/MultiInputExt", ["sap/ui/core/Control", "sap/m/Token", "sap
 }
 );
 
+sap.ui.define("z2ui5/CameraPicture" , [
+  "sap/ui/core/Control"
+], function (Control) {
+  "use strict";
+  return Control.extend("z2ui5.CameraPicture", {
+      metadata: {
+          properties: {
+              id: { type: "string" },
+              value: { type: "string" },
+              press: { type: "string" },
+              autoplay: { type: "boolean", defaultValue: true }
+          },
+          events: {
+              "OnPhoto": {
+                  allowPreventDefault: true,
+                  parameters: {
+                      "photo": {
+                          type: "string"
+                      }
+                  }
+              }
+          },
+      },
+
+      capture: function (oEvent) {
+
+          var video = document.querySelector("#zvideo");
+          var canvas = document.getElementById('zcanvas');
+          var resultb64 = "";
+          canvas.width = 200;
+          canvas.height = 200;
+          canvas.getContext('2d').drawImage(video, 0, 0, 200, 200);
+          resultb64 = canvas.toDataURL();
+          this.setProperty("value", resultb64);
+          this.fireOnPhoto({
+              "photo": resultb64
+          });
+      },
+
+      onPicture: function (oEvent) {
+
+          if (!this._oScanDialog) {
+              this._oScanDialog = new sap.m.Dialog({
+                  title: "Device Photo Function",
+                  contentWidth: "640px",
+                  contentHeight: "480px",
+                  horizontalScrolling: false,
+                  verticalScrolling: false,
+                  stretchOnPhone: true,
+                  content: [
+                      new sap.ui.core.HTML({
+                          id: this.getId() + 'PictureContainer',
+                          content: '<video width="600px" height="400px" autoplay="true" id="zvideo">'
+                      }),
+                      new sap.m.Button({
+                          text: "Capture",
+                          press: function (oEvent) {
+                              this.capture();
+                              this._oScanDialog.close();
+                          }.bind(this)
+                      }),
+                      new sap.ui.core.HTML({
+                          content: '<canvas hidden id="zcanvas" style="overflow:auto"></canvas>'
+                      }),
+                  ],
+                  endButton: new sap.m.Button({
+                      text: "Cancel",
+                      press: function (oEvent) {
+                          this._oScanDialog.close();
+                      }.bind(this)
+                  }),
+              });
+          }
+
+          this._oScanDialog.open();
+
+          setTimeout(function () {
+              var video = document.querySelector('#zvideo');
+              if (navigator.mediaDevices.getUserMedia) {
+                 navigator.mediaDevices.getUserMedia({video: { facingMode: { exact: "environment" } } })
+                      .then(function (stream) {
+                          video.srcObject = stream;
+                      })
+                      .catch(function (error) {
+                          console.log("Something went wrong!");
+                      });
+              }
+          }.bind(this), 300);
+
+      },
+
+      renderer: function (oRM, oControl) {
+
+          var oButton = new sap.m.Button({
+              icon: "sap-icon://camera",
+              text: "Camera",
+              press: oControl.onPicture.bind(oControl),
+          });
+          oRM.renderControl(oButton);
+
+      },
+  });
+});
+
 sap.ui.define("z2ui5/UITableExt", ["sap/ui/core/Control"], (Control) => {
   "use strict";
 
@@ -713,11 +814,11 @@ sap.ui.define("z2ui5/UITableExt", ["sap/ui/core/Control"], (Control) => {
 }
 );
 
-sap.ui.define("z2ui5/Util", [], () => {
+sap.ui.define("z2ui5/Util", ["sap/gantt/misc/Format/abapTimestampToDate"], (abapTimestampToDate) => {
   "use strict";
   return {
     DateCreateObject: (s) => new Date(s),
-    DateAbapTimestampToDate: (sTimestamp) => new sap.gantt.misc.Format.abapTimestampToDate(sTimestamp),
+    DateAbapTimestampToDate: (sTimestamp) => new abapTimestampToDate(sTimestamp),
     DateAbapDateToDateObject: (d) => new Date(d.slice(0, 4), parseInt(d.slice(4, 6)) - 1, d.slice(6, 8)),
     DateAbapDateTimeToDateObject: (d, t = '000000') => new Date(d.slice(0, 4), parseInt(d.slice(4, 6)) - 1, d.slice(6, 8), t.slice(0, 2), t.slice(2, 4), t.slice(4, 6)),
   };

app/webapp/controller/View1.controller.js

@@ -248,12 +248,10 @@ sap.ui.define(["sap/ui/core/mvc/Controller", "sap/ui/core/mvc/XMLView", "sap/ui/
                         a.click();
                         break;
                     case 'CROSS_APP_NAV_TO_PREV_APP':
-                        // oCrossAppNavigator = Container.getService("CrossApplicationNavigation");
                         oCrossAppNavigator = sap.ushell.Container.getService("CrossApplicationNavigation");
                         oCrossAppNavigator.backToPreviousApp();
                         break;
                     case 'CROSS_APP_NAV_TO_EXT':
-                        // oCrossAppNavigator = Container.getService("CrossApplicationNavigation");
                         oCrossAppNavigator = sap.ushell.Container.getService("CrossApplicationNavigation");
                         const hash = (oCrossAppNavigator.hrefForExternal({
                             target: args[1],

app/webapp/index.html

@@ -14,13 +14,13 @@
         id="sap-ui-bootstrap"
         src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
         data-sap-ui-theme="sap_horizon"
-        data-sap-ui-resourceroots='{
+        data-sap-ui-resource-roots='{
             "z2ui5": "./"
         }'
-        data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
+        data-sap-ui-on-init="module:sap/ui/core/ComponentSupport"
-        data-sap-ui-compatVersion="edge"
+        data-sap-ui-compat-version="edge"
         data-sap-ui-async="true"
-        data-sap-ui-frameOptions="trusted"
+        data-sap-ui-frame-options="trusted"
     ></script>
 </head>
 <body class="sapUiBody sapUiSizeCompact" id="content">

src/01/03/z2ui5_cl_app_app_js.clas.abap

@@ -272,7 +272,7 @@ CLASS z2ui5_cl_app_app_js IMPLEMENTATION.
              `` && |\n| &&
              `` && |\n| &&
              `` && |\n| &&
-             `sap.ui.define("z2ui5/Info", ["sap/ui/core/Control", "sap/ui/VersionInfo", "sap/ui/Device"], (Control, VersionInfo, Device) => {` && |\n| &&
+             `sap.ui.define("z2ui5/Info", ["sap/ui/core/Control", "sap/ui/VersionInfo", "sap/ui/Device"], (Control) => {` && |\n| &&
              `  "use strict";` && |\n| &&
              `` && |\n| &&
              `  return Control.extend("z2ui5.Info", {` && |\n| &&
@@ -325,10 +325,10 @@ CLASS z2ui5_cl_app_app_js IMPLEMENTATION.
              `    onAfterRendering() {` && |\n| &&
              `    },` && |\n| &&
              `` && |\n| &&
-             `    async renderer(oRm, oControl) {` && |\n| &&
+             `    async renderer(_, oControl) {` && |\n| &&
              `` && |\n| &&
              `      let oDevice = z2ui5.oView.getModel("device").oData;` && |\n| &&
-             `      oControl.setProperty("ui5_version", sap.ui.version);` && |\n| &&
+             `      oControl.setProperty("ui5_version", z2ui5.oConfig.UI5VersionInfo.version);` && |\n| &&
              `      oControl.setProperty("device_phone", oDevice.system.phone);` && |\n| &&
              `      oControl.setProperty("device_desktop", oDevice.system.desktop);` && |\n| &&
              `      oControl.setProperty("device_tablet", oDevice.system.tablet);` && |\n| &&
@@ -337,7 +337,7 @@ CLASS z2ui5_cl_app_app_js IMPLEMENTATION.
              `      oControl.setProperty("device_width", oDevice.resize.width);` && |\n| &&
              `      oControl.setProperty("device_os", oDevice.os.name);` && |\n| &&
              `      oControl.setProperty("device_browser", oDevice.browser.name);` && |\n| &&
-             `       oControl.fireFinished();` && |\n| &&
+             `      oControl.fireFinished();` && |\n| &&
              `` && |\n| &&
              `    }` && |\n| &&
              `  });` && |\n| &&
@@ -397,7 +397,6 @@ CLASS z2ui5_cl_app_app_js IMPLEMENTATION.
              `` && |\n| &&
              `    callbackPosition(position) {` && |\n| &&
              `` && |\n| &&
-             `      var test = position.coords.longitude` && |\n| &&
              `      this.setProperty("longitude", position.coords.longitude, true);` && |\n| &&
              `      this.setProperty("latitude", position.coords.latitude, true);` && |\n| &&
              `      this.setProperty("altitude", position.coords.altitude, true);` && |\n| &&
@@ -406,24 +405,22 @@ CLASS z2ui5_cl_app_app_js IMPLEMENTATION.
              `      this.setProperty("speed", position.coords.speed, true);` && |\n| &&
              `      this.setProperty("heading", position.coords.heading, true);` && |\n| &&
              `      this.fireFinished();` && |\n| &&
-             `      //this.getParent().getParent().getModel().refresh();` && |\n| &&
              `` && |\n| &&
              `    },` && |\n| &&
              `` && |\n| &&
              `    async init() {` && |\n| &&
              `` && |\n| &&
              `      navigator.geolocation.getCurrentPosition(this.callbackPosition.bind(this));` && |\n| &&
-             `      //navigator.geolocation.watchPosition(this.callbackPosition.bind(this));` && |\n| &&
              `` && |\n| &&
              `    },` && |\n| &&
              `` && |\n| &&
-             `    exit() {//clearWatch` && |\n| &&
+             `    exit() {` && |\n| &&
              `    },` && |\n| &&
              `` && |\n| &&
              `    onAfterRendering() {` && |\n| &&
              `    },` && |\n| &&
              `` && |\n| &&
-             `    renderer(oRm, oControl) {` && |\n| &&
+             `    renderer() {` && |\n| &&
              `    }` && |\n| &&
              `  });` && |\n| &&
              `}` && |\n| &&
@@ -518,11 +515,11 @@ CLASS z2ui5_cl_app_app_js IMPLEMENTATION.
              `` && |\n| &&
              `            this.setProperty("path", this.oFileUploader.getProperty("value"));` && |\n| &&
              `` && |\n| &&
-             |\n|.
-    result = result &&
              `            var file = z2ui5.oUpload.oFileUpload.files[0];` && |\n| &&
              `            var reader = new FileReader();` && |\n| &&
              `` && |\n| &&
+             |\n|.
+    result = result &&
              `            reader.onload = function (evt) {` && |\n| &&
              `              var vContent = evt.currentTarget.result;` && |\n| &&
              `              this.setProperty("value", vContent);` && |\n| &&
@@ -692,6 +689,110 @@ CLASS z2ui5_cl_app_app_js IMPLEMENTATION.
              `}` && |\n| &&
              `);` && |\n| &&
              `` && |\n| &&
+             `sap.ui.define("z2ui5/CameraPicture" , [` && |\n| &&
+             `  "sap/ui/core/Control"` && |\n| &&
+             `], function (Control) {` && |\n| &&
+             `  "use strict";` && |\n| &&
+             `  return Control.extend("z2ui5.CameraPicture", {` && |\n| &&
+             `      metadata: {` && |\n| &&
+             `          properties: {` && |\n| &&
+             `              id: { type: "string" },` && |\n| &&
+             `              value: { type: "string" },` && |\n| &&
+             `              press: { type: "string" },` && |\n| &&
+             `              autoplay: { type: "boolean", defaultValue: true }` && |\n| &&
+             `          },` && |\n| &&
+             `          events: {` && |\n| &&
+             `              "OnPhoto": {` && |\n| &&
+             `                  allowPreventDefault: true,` && |\n| &&
+             `                  parameters: {` && |\n| &&
+             `                      "photo": {` && |\n| &&
+             `                          type: "string"` && |\n| &&
+             `                      }` && |\n| &&
+             `                  }` && |\n| &&
+             `              }` && |\n| &&
+             `          },` && |\n| &&
+             `      },` && |\n| &&
+             `` && |\n| &&
+             `      capture: function (oEvent) {` && |\n| &&
+             `` && |\n| &&
+             `          var video = document.querySelector("#zvideo");` && |\n| &&
+             `          var canvas = document.getElementById('zcanvas');` && |\n| &&
+             `          var resultb64 = "";` && |\n| &&
+             `          canvas.width = 200;` && |\n| &&
+             `          canvas.height = 200;` && |\n| &&
+             `          canvas.getContext('2d').drawImage(video, 0, 0, 200, 200);` && |\n| &&
+             `          resultb64 = canvas.toDataURL();` && |\n| &&
+             `          this.setProperty("value", resultb64);` && |\n| &&
+             `          this.fireOnPhoto({` && |\n| &&
+             `              "photo": resultb64` && |\n| &&
+             `          });` && |\n| &&
+             `      },` && |\n| &&
+             `` && |\n| &&
+             `      onPicture: function (oEvent) {` && |\n| &&
+             `` && |\n| &&
+             `          if (!this._oScanDialog) {` && |\n| &&
+             `              this._oScanDialog = new sap.m.Dialog({` && |\n| &&
+             `                  title: "Device Photo Function",` && |\n| &&
+             `                  contentWidth: "640px",` && |\n| &&
+             `                  contentHeight: "480px",` && |\n| &&
+             `                  horizontalScrolling: false,` && |\n| &&
+             `                  verticalScrolling: false,` && |\n| &&
+             `                  stretchOnPhone: true,` && |\n| &&
+             `                  content: [` && |\n| &&
+             `                      new sap.ui.core.HTML({` && |\n| &&
+             `                          id: this.getId() + 'PictureContainer',` && |\n| &&
+             `                          content: '<video width="600px" height="400px" autoplay="true" id="zvideo">'` && |\n| &&
+             `                      }),` && |\n| &&
+             `                      new sap.m.Button({` && |\n| &&
+             `                          text: "Capture",` && |\n| &&
+             `                          press: function (oEvent) {` && |\n| &&
+             `                              this.capture();` && |\n| &&
+             `                              this._oScanDialog.close();` && |\n| &&
+             `                          }.bind(this)` && |\n| &&
+             `                      }),` && |\n| &&
+             `                      new sap.ui.core.HTML({` && |\n| &&
+             `                          content: '<canvas hidden id="zcanvas" style="overflow:auto"></canvas>'` && |\n| &&
+             `                      }),` && |\n| &&
+             `                  ],` && |\n| &&
+             `                  endButton: new sap.m.Button({` && |\n| &&
+             `                      text: "Cancel",` && |\n| &&
+             `                      press: function (oEvent) {` && |\n| &&
+             `                          this._oScanDialog.close();` && |\n| &&
+             `                      }.bind(this)` && |\n| &&
+             `                  }),` && |\n| &&
+             `              });` && |\n| &&
+             `          }` && |\n| &&
+             `` && |\n| &&
+             `          this._oScanDialog.open();` && |\n| &&
+             `` && |\n| &&
+             `          setTimeout(function () {` && |\n| &&
+             `              var video = document.querySelector('#zvideo');` && |\n| &&
+             `              if (navigator.mediaDevices.getUserMedia) {` && |\n| &&
+             `                 navigator.mediaDevices.getUserMedia({video: { facingMode: { exact: "environment" } } })` && |\n| &&
+             `                      .then(function (stream) {` && |\n| &&
+             `                          video.srcObject = stream;` && |\n| &&
+             `                      })` && |\n| &&
+             `                      .catch(function (error) {` && |\n| &&
+             `                          console.log("Something went wrong!");` && |\n| &&
+             `                      });` && |\n| &&
+             `              }` && |\n| &&
+             `          }.bind(this), 300);` && |\n| &&
+             `` && |\n| &&
+             `      },` && |\n| &&
+             `` && |\n| &&
+             `      renderer: function (oRM, oControl) {` && |\n| &&
+             `` && |\n| &&
+             `          var oButton = new sap.m.Button({` && |\n| &&
+             `              icon: "sap-icon://camera",` && |\n| &&
+             `              text: "Camera",` && |\n| &&
+             `              press: oControl.onPicture.bind(oControl),` && |\n| &&
+             `          });` && |\n| &&
+             `          oRM.renderControl(oButton);` && |\n| &&
+             `` && |\n| &&
+             `      },` && |\n| &&
+             `  });` && |\n| &&
+             `});` && |\n| &&
+             `` && |\n| &&
              `sap.ui.define("z2ui5/UITableExt", ["sap/ui/core/Control"], (Control) => {` && |\n| &&
              `  "use strict";` && |\n| &&
              `` && |\n| &&
@@ -735,11 +836,11 @@ CLASS z2ui5_cl_app_app_js IMPLEMENTATION.
              `}` && |\n| &&
              `);` && |\n| &&
              `` && |\n| &&
-             `sap.ui.define("z2ui5/Util", [], () => {` && |\n| &&
+             `sap.ui.define("z2ui5/Util", ["sap/gantt/misc/Format/abapTimestampToDate"], (abapTimestampToDate) => {` && |\n| &&
              `  "use strict";` && |\n| &&
              `  return {` && |\n| &&
              `    DateCreateObject: (s) => new Date(s),` && |\n| &&
-             `    DateAbapTimestampToDate: (sTimestamp) => new sap.gantt.misc.Format.abapTimestampToDate(sTimestamp),` && |\n| &&
+             `    DateAbapTimestampToDate: (sTimestamp) => new abapTimestampToDate(sTimestamp),` && |\n| &&
              `    DateAbapDateToDateObject: (d) => new Date(d.slice(0, 4), parseInt(d.slice(4, 6)) - 1, d.slice(6, 8)),` && |\n| &&
              `    DateAbapDateTimeToDateObject: (d, t = '000000') => new Date(d.slice(0, 4), parseInt(d.slice(4, 6)) - 1, d.slice(6, 8), t.slice(0, 2), t.slice(2, 4), t.slice(4, 6)),` && |\n| &&
              `  };` && |\n| &&

src/01/03/z2ui5_cl_app_component_js.clas.abap

@@ -18,10 +18,8 @@ CLASS z2ui5_cl_app_component_js IMPLEMENTATION.
 
   METHOD get.
 
-    result = `sap.ui.define(["sap/ui/core/UIComponent", "z2ui5/model/models",` && |\n| &&
+    result = `sap.ui.define(["sap/ui/core/UIComponent", "z2ui5/model/models","z2ui5/cc/Server", "sap/ui/VersionInfo"` && |\n| &&
-             `      "z2ui5/cc/DebugTool","z2ui5/cc/Server", "sap/base/Log","sap/ui/VersionInfo"` && |\n| &&
+             `    ], function (UIComponent, Models, Server, VersionInfo) {` && |\n| &&
-             `` && |\n| &&
-             `    ], function (UIComponent, models, DebugTool, Server, Log, VersionInfo) {` && |\n| &&
              `    return UIComponent.extend("z2ui5.Component", {` && |\n| &&
              `        metadata: {` && |\n| &&
              `            manifest: "json"` && |\n| &&
@@ -32,8 +30,7 @@ CLASS z2ui5_cl_app_component_js IMPLEMENTATION.
              `` && |\n| &&
              `            this.getRouter().initialize();` && |\n| &&
              `            z2ui5.oRouter = this.getRouter();` && |\n| &&
-             `            this.setModel(models.createDeviceModel(), "device");` && |\n| &&
+             `            this.setModel(Models.createDeviceModel(), "device");` && |\n| &&
-             `            this._oLogger = Log.getLogger("abap2UI5");` && |\n| &&
              `` && |\n| &&
              `            z2ui5.oConfig = {};` && |\n| &&
              `            z2ui5.oConfig.ComponentData = this.getComponentData();` && |\n| &&

src/01/03/z2ui5_cl_app_debugtool_js.clas.abap

@@ -164,6 +164,8 @@ CLASS z2ui5_cl_app_debugtool_js IMPLEMENTATION.
              `                this.oDialog.close();` && |\n| &&
              `                this.oDialog.destry();` && |\n| &&
              `            }` && |\n| &&
+             `        },` && |\n| &&
+             `        renderer(){` && |\n| &&
              `        }` && |\n| &&
              `    });` && |\n| &&
              `});` && |\n| &&

src/01/03/z2ui5_cl_app_index_html.clas.abap

@@ -34,13 +34,13 @@ CLASS z2ui5_cl_app_index_html IMPLEMENTATION.
              `        id="sap-ui-bootstrap"` &&
              `        src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"` &&
              `        data-sap-ui-theme="sap_horizon"` &&
-             `        data-sap-ui-resourceroots='{` &&
+             `        data-sap-ui-resource-roots='{` &&
              `            "z2ui5": "./"` &&
              `        }'` &&
-             `        data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"` &&
+             `        data-sap-ui-on-init="module:sap/ui/core/ComponentSupport"` &&
-             `        data-sap-ui-compatVersion="edge"` &&
+             `        data-sap-ui-compat-version="edge"` &&
              `        data-sap-ui-async="true"` &&
-             `        data-sap-ui-frameOptions="trusted"` &&
+             `        data-sap-ui-frame-options="trusted"` &&
              `    ></script>` &&
              `</head>` &&
              `<body class="sapUiBody sapUiSizeCompact" id="content">` &&

src/01/03/z2ui5_cl_app_view1_js.clas.abap

@@ -268,12 +268,10 @@ CLASS z2ui5_cl_app_view1_js IMPLEMENTATION.
              `                        a.click();` && |\n| &&
              `                        break;` && |\n| &&
              `                    case 'CROSS_APP_NAV_TO_PREV_APP':` && |\n| &&
-             `                        // oCrossAppNavigator = Container.getService("CrossApplicationNavigation");` && |\n| &&
              `                        oCrossAppNavigator = sap.ushell.Container.getService("CrossApplicationNavigation");` && |\n| &&
              `                        oCrossAppNavigator.backToPreviousApp();` && |\n| &&
              `                        break;` && |\n| &&
              `                    case 'CROSS_APP_NAV_TO_EXT':` && |\n| &&
-             `                        // oCrossAppNavigator = Container.getService("CrossApplicationNavigation");` && |\n| &&
              `                        oCrossAppNavigator = sap.ushell.Container.getService("CrossApplicationNavigation");` && |\n| &&
              `                        const hash = (oCrossAppNavigator.hrefForExternal({` && |\n| &&
              `                            target: args[1],` && |\n| &&