diff --git a/run/input/UPSTREAM_COMMIT b/run/input/UPSTREAM_COMMIT
index 3200be2..0e2ab86 100644
--- a/run/input/UPSTREAM_COMMIT
+++ b/run/input/UPSTREAM_COMMIT
@@ -1 +1 @@
-df978ccebf3bef0d72ac2a03c08f7d2f9a230f87
+504ece74ae6cd2b5b033c540bb2e1f1910c829d5
diff --git a/run/input/core/app/z2ui5/webapp/cc/CameraPicture.js b/run/input/core/app/z2ui5/webapp/cc/CameraPicture.js
index 5297f64..1b34c3b 100644
--- a/run/input/core/app/z2ui5/webapp/cc/CameraPicture.js
+++ b/run/input/core/app/z2ui5/webapp/cc/CameraPicture.js
@@ -3,10 +3,11 @@ sap.ui.define(
     "sap/ui/core/Control",
     "sap/m/Dialog",
     "sap/m/Button",
+    "sap/m/Text",
     "sap/ui/core/HTML",
     "z2ui5/core/Lib",
   ],
-  (Control, Dialog, Button, HTML, Lib) => {
+  (Control, Dialog, Button, Text, HTML, Lib) => {
     "use strict";
     // Camera button: opens a dialog with the live camera stream, captures
     // a photo on demand and hands it to the backend as a base64 JPEG in
@@ -47,18 +48,28 @@ sap.ui.define(
         },
       },
 
+      // Returns true when a photo was taken, false when it could not be (so
+      // the caller can keep the dialog open and let the status line explain).
       capture() {
         const video = document.getElementById(`${this.getId()}-video`);
         const canvas = document.getElementById(`${this.getId()}-canvas`);
-        if (!video || !canvas) return;
+        if (!video || !canvas) return false;
 
         const videoWidth = video.videoWidth;
         const videoHeight = video.videoHeight;
+        // The camera may not have delivered a frame yet (Capture pressed too
+        // early, or the stream failed): videoWidth/Height are 0, which would
+        // make the canvas 0-sized and drawImage() throw an InvalidStateError.
+        if (!videoWidth || !videoHeight) {
+          this._setStatus("Camera not ready yet - no frame captured.");
+          Lib.logError("CameraPicture: camera not ready, no frame to capture");
+          return false;
+        }
         canvas.width = videoWidth;
         canvas.height = videoHeight;
 
         const ctx = canvas.getContext("2d", _CTX_2D_OPTS);
-        if (!ctx) return;
+        if (!ctx) return false;
         ctx.drawImage(video, 0, 0, videoWidth, videoHeight);
 
         // Full-resolution JPEG (quality 0.85) for the value, plus a small
@@ -67,8 +78,9 @@ sap.ui.define(
         try {
           resultb64 = canvas.toDataURL("image/jpeg", 0.85);
         } catch (e) {
+          this._setStatus("Could not read the captured image.");
           Lib.logError("CameraPicture: canvas toDataURL failed", e);
-          return;
+          return false;
         }
 
         const thumbH = videoWidth
@@ -87,11 +99,12 @@ sap.ui.define(
           Lib.logError("CameraPicture: thumb toDataURL failed", e);
         }
 
-        if (Lib.isDestroyed(this)) return;
+        if (Lib.isDestroyed(this)) return false;
         this.setProperty("value", resultb64);
         this.setProperty("thumbnail", thumbB64);
         this.fireOnPhoto({ photo: resultb64 });
         this._stopCamera();
+        return true;
       },
 
       _stopCamera() {
@@ -107,6 +120,11 @@ sap.ui.define(
       onPicture() {
         if (this._oScanDialog?.isOpen()) return;
         if (!this._oScanDialog) {
+          // Visible status line inside the dialog so the user is told what is
+          // happening (starting, ready, or why the camera stays black).
+          this._oStatus = new Text().addStyleClass(
+            "sapUiSmallMarginBegin sapUiSmallMarginTop",
+          );
           this._oScanDialog = new Dialog({
             title: "Device Photo Function",
             contentWidth: "640px",
@@ -116,15 +134,21 @@ sap.ui.define(
             stretch: true,
             afterClose: () => this._stopCamera(),
             content: [
+              this._oStatus,
               new HTML({
                 id: `${this.getId()}PictureContainer`,
-                content: `<video style="width:100%;height:100%;object-fit:contain;"${this.getAutoplay() ? " autoplay" : ""} id="${this.getId()}-video">`,
+                // playsinline + muted are required for autoplay of a live
+                // stream on iOS/Safari; min-height keeps the preview visible
+                // even if the dialog content box does not give it a height;
+                // the tag must be explicitly closed or the parser mangles it.
+                content: `<video style="width:100%;height:100%;min-height:60vh;object-fit:contain;background:#000;" playsinline muted${this.getAutoplay() ? " autoplay" : ""} id="${this.getId()}-video"></video>`,
               }),
               new Button({
                 text: "Capture",
+                // Keep the dialog open when the capture failed so the status
+                // line stays visible to explain why.
                 press: () => {
-                  this.capture();
-                  this._oScanDialog.close();
+                  if (this.capture()) this._oScanDialog.close();
                 },
               }),
               new HTML({
@@ -141,10 +165,13 @@ sap.ui.define(
           });
         }
 
+        this._setStatus("Starting camera...");
+
         this._oScanDialog.attachEventOnce("afterOpen", async () => {
           if (Lib.isDestroyed(this)) return;
           const video = document.getElementById(`${this.getId()}-video`);
           if (!video) {
+            this._setStatus("Camera preview element not found.");
             Lib.logError(
               "CameraPicture: video element not found after dialog open",
             );
@@ -161,6 +188,9 @@ sap.ui.define(
           try {
             const md = navigator.mediaDevices;
             if (!md?.getUserMedia) {
+              this._setStatus(
+                "Camera not available - a secure (HTTPS) connection is required.",
+              );
               Lib.logError("CameraPicture: mediaDevices API not available");
               return;
             }
@@ -177,13 +207,31 @@ sap.ui.define(
             }
             this._stream = stream;
             video.srcObject = stream;
+            this._setStatus("Camera ready - press Capture to take a photo.");
+            // Some browsers do not honour the autoplay attribute for a
+            // srcObject stream - start playback explicitly.
+            try {
+              await video.play();
+            } catch (e) {
+              Lib.logError("CameraPicture: video.play() failed", e);
+            }
           } catch (error) {
+            this._setStatus(
+              `Camera unavailable: ${error.name || "Error"} - ${error.message}`,
+            );
             Lib.logError("CameraPicture: getUserMedia failed", error);
           }
         });
         this._oScanDialog.open();
       },
 
+      // Update the status line inside the camera dialog, if it exists.
+      _setStatus(message) {
+        if (this._oStatus && !Lib.isDestroyed(this._oStatus)) {
+          this._oStatus.setText(message);
+        }
+      },
+
       exit() {
         this._stopCamera();
         if (this._oButton) this._oButton.destroy();
diff --git a/run/input/core/app/z2ui5/webapp/cc/CameraSelector.js b/run/input/core/app/z2ui5/webapp/cc/CameraSelector.js
index 72a6fd1..fb7ccc3 100644
--- a/run/input/core/app/z2ui5/webapp/cc/CameraSelector.js
+++ b/run/input/core/app/z2ui5/webapp/cc/CameraSelector.js
@@ -10,8 +10,14 @@ sap.ui.define(
     // ComboBox pre-filled with the device's cameras (video inputs) so the
     // user can pick which one the CameraPicture control should use.
     return ComboBox.extend("z2ui5.cc.CameraSelector", {
-      async init() {
+      // init() is a UI5 lifecycle listener and must not return a value, so it
+      // cannot be async - kick off the (async) device enumeration separately.
+      init() {
         ComboBox.prototype.init.call(this);
+        this._loadCameras();
+      },
+
+      async _loadCameras() {
         try {
           const md = navigator.mediaDevices;
           if (!md?.enumerateDevices) return;
diff --git a/run/input/core/app/z2ui5/webapp/cc/Geolocation.js b/run/input/core/app/z2ui5/webapp/cc/Geolocation.js
index e92a80f..eba0472 100644
--- a/run/input/core/app/z2ui5/webapp/cc/Geolocation.js
+++ b/run/input/core/app/z2ui5/webapp/cc/Geolocation.js
@@ -59,6 +59,15 @@ sap.ui.define(["sap/ui/core/Control", "z2ui5/core/Lib"], (Control, Lib) => {
           allowPreventDefault: true,
           parameters: {},
         },
+        // Fired when the position could not be read, so a backend can
+        // react. The control never surfaces any UI itself - handling is
+        // delegated entirely to whoever binds this event.
+        error: {
+          parameters: {
+            code: { type: "string" },
+            message: { type: "string" },
+          },
+        },
       },
     },
 
@@ -71,6 +80,18 @@ sap.ui.define(["sap/ui/core/Control", "z2ui5/core/Lib"], (Control, Lib) => {
       this.fireFinished();
     },
 
+    // Reading the position failed (1 = permission denied, 2 = position
+    // unavailable, 3 = timeout). Log it and fire the `error` event so a
+    // backend can handle it; the control never surfaces UI on its own.
+    callbackError(error) {
+      if (Lib.isDestroyed(this)) return;
+      Lib.logError(`Geolocation error (${error.code}): ${error.message}`);
+      this.fireError({
+        code: String(error.code),
+        message: error.message,
+      });
+    },
+
     init() {
       this._pendingGeolocate = true;
     },
@@ -86,8 +107,7 @@ sap.ui.define(["sap/ui/core/Control", "z2ui5/core/Lib"], (Control, Lib) => {
         if (!navigator.geolocation) return;
         navigator.geolocation.getCurrentPosition(
           this.callbackPosition.bind(this),
-          (error) =>
-            Lib.logError(`Geolocation error (${error.code}): ${error.message}`),
+          this.callbackError.bind(this),
           {
             enableHighAccuracy: this.getProperty("enableHighAccuracy"),
             // Guard against an empty or non-numeric property - NaN or 0
diff --git a/run/input/core/app/z2ui5/webapp/cc/SmartMultiInputExt.js b/run/input/core/app/z2ui5/webapp/cc/SmartMultiInputExt.js
index a70b070..e710ffe 100644
--- a/run/input/core/app/z2ui5/webapp/cc/SmartMultiInputExt.js
+++ b/run/input/core/app/z2ui5/webapp/cc/SmartMultiInputExt.js
@@ -39,17 +39,15 @@ sap.ui.define(
       init() {
         this._setControlBound = this.setControl.bind(this);
         this._oInput = null;
-        this._oPendingInnerControlsCreated = null;
+        this._aPendingInnerControlsCreated = [];
         this._bInnerControlsCreated = false;
         Lib.registerCallback("onAfterRendering", this._setControlBound);
       },
       exit() {
         Lib.unregisterCallback("onAfterRendering", this._setControlBound);
-        // Resolve any still-pending promise so awaiters don't hang.
-        if (this._oPendingInnerControlsCreated) {
-          this._oPendingInnerControlsCreated(null);
-        }
-        this._oPendingInnerControlsCreated = null;
+        // Resolve any still-pending promises so awaiters don't hang.
+        this._aPendingInnerControlsCreated.forEach((resolve) => resolve(null));
+        this._aPendingInnerControlsCreated = [];
       },
 
       onTokenUpdate(oEvent) {
@@ -125,17 +123,17 @@ sap.ui.define(
           if (this._bInnerControlsCreated) {
             resolve(this._oInput);
           } else {
-            this._oPendingInnerControlsCreated = resolve;
+            this._aPendingInnerControlsCreated.push(resolve);
           }
         });
       },
       onInnerControlsCreated(oEvent) {
         this._oInput = oEvent.getSource();
-        if (this._oPendingInnerControlsCreated) {
-          this._oPendingInnerControlsCreated(this._oInput);
-        }
-        this._oPendingInnerControlsCreated = null;
         this._bInnerControlsCreated = true;
+        this._aPendingInnerControlsCreated.forEach((resolve) =>
+          resolve(this._oInput),
+        );
+        this._aPendingInnerControlsCreated = [];
       },
     });
   },
diff --git a/run/input/core/app/z2ui5/webapp/controller/View1.controller.js b/run/input/core/app/z2ui5/webapp/controller/View1.controller.js
index 1ffb309..070187c 100644
--- a/run/input/core/app/z2ui5/webapp/controller/View1.controller.js
+++ b/run/input/core/app/z2ui5/webapp/controller/View1.controller.js
@@ -15,7 +15,6 @@ sap.ui.define(
     "z2ui5/core/Server",
     "sap/ui/model/odata/v2/ODataModel",
     "sap/ui/core/routing/HashChanger",
-    "sap/ui/core/Element",
     "z2ui5/core/Lib",
     "z2ui5/core/FrontendAction",
     "z2ui5/core/ViewSlots",
@@ -32,7 +31,6 @@ sap.ui.define(
     Server,
     ODataModel,
     HashChanger,
-    Element,
     Lib,
     FrontendAction,
     ViewSlots,
@@ -128,6 +126,8 @@ sap.ui.define(
 
         if (S_POPUP?.CHECK_DESTROY) this.destroyPopup();
         if (S_POPOVER?.CHECK_DESTROY) this.destroyPopover();
+        if (S_VIEW_NEST?.CHECK_DESTROY) this.destroyNestView();
+        if (S_VIEW_NEST2?.CHECK_DESTROY) this.destroyNestView2();
 
         if (S_POPUP?.XML) {
           this.destroyPopup();
@@ -205,6 +205,9 @@ sap.ui.define(
           return;
         }
         oFragment.setModel(oModel);
+        // Share the one device model (created once in Component.js, never
+        // destroyed) so {device>...} bindings work in popups too.
+        oFragment.setModel(AppState.state.oDeviceModel, "device");
         ViewSlots.setView("POPUP", oFragment);
         oFragment.open();
       },
@@ -229,30 +232,12 @@ sap.ui.define(
           return;
         }
         oFragment.setModel(oModel);
+        // Shared device model (see displayFragment) - for popovers too.
+        oFragment.setModel(AppState.state.oDeviceModel, "device");
 
-        // Find the control to attach the popover to. We search the main
-        // view first, then any open popup / nested views, then the global
-        // UI5 control registry as a last resort.
-        let oControl =
-          ViewSlots.byId("MAIN", openById) ||
-          ViewSlots.byId("POPUP", openById) ||
-          ViewSlots.byId("NEST", openById) ||
-          ViewSlots.byId("NEST2", openById);
-        if (!oControl) {
-          if (Element.getElementById) {
-            oControl = Element.getElementById(openById);
-          } else {
-            /* ui5lint-disable no-globals, no-deprecated-api --
-               deliberate fallback for UI5 releases that do not provide
-               Element.getElementById yet (added in 1.119); the modern
-               API is used in the branch above. */
-            if (sap.ui.getCore) {
-              const core = sap.ui.getCore();
-              if (core?.byId) oControl = core.byId(openById);
-            }
-            /* ui5lint-enable no-globals, no-deprecated-api */
-          }
-        }
+        // Find the control to attach the popover to: any open slot first,
+        // then the global UI5 control registry as a last resort.
+        const oControl = ViewSlots.resolveById(openById);
 
         if (!oControl) {
           Lib.logError(
@@ -280,6 +265,8 @@ sap.ui.define(
           return;
         }
         oView.setModel(oModel);
+        // Shared device model (see displayFragment) - for nested views too.
+        oView.setModel(AppState.state.oDeviceModel, "device");
 
         const nestParams = AppState.state.oResponse?.PARAMS?.[paramKey];
         if (!nestParams) {
@@ -298,10 +285,18 @@ sap.ui.define(
           return;
         }
 
-        try {
-          oParent[METHOD_DESTROY]();
-        } catch (e) {
-          Lib.logError("displayNestedView: parent destroy method failed", e);
+        // METHOD_DESTROY is optional: only call it when the app asked for a
+        // parent teardown method. An empty value used to reach oParent[""]()
+        // and throw on every render (e.g. app 065 passes only method_insert).
+        if (METHOD_DESTROY) {
+          try {
+            oParent[METHOD_DESTROY]();
+          } catch (e) {
+            Lib.logError(
+              `displayNestedView: parent destroy method '${METHOD_DESTROY}' failed`,
+              e,
+            );
+          }
         }
         try {
           oParent[METHOD_INSERT](oView);
diff --git a/run/input/core/app/z2ui5/webapp/core/DebugTool.fragment.xml b/run/input/core/app/z2ui5/webapp/core/DebugTool.fragment.xml
index 0d05414..01e53ef 100644
--- a/run/input/core/app/z2ui5/webapp/core/DebugTool.fragment.xml
+++ b/run/input/core/app/z2ui5/webapp/core/DebugTool.fragment.xml
@@ -13,8 +13,12 @@
         >
             <items>
                 <IconTabFilter
-                    text="Config"
-                    key="CONFIG"
+                    text="Log"
+                    key="LOG"
+                />
+                <IconTabFilter
+                    text="System"
+                    key="SYSTEM"
                     enabled="true"
                 />
                 <IconTabFilter
diff --git a/run/input/core/app/z2ui5/webapp/core/DebugTool.js b/run/input/core/app/z2ui5/webapp/core/DebugTool.js
index d035939..d334aca 100644
--- a/run/input/core/app/z2ui5/webapp/core/DebugTool.js
+++ b/run/input/core/app/z2ui5/webapp/core/DebugTool.js
@@ -16,13 +16,27 @@ sap.ui.define(
 
     // Pretty-print any value (object, array, primitive) as indented JSON.
     // `null` is used as a fallback so undefined values still produce output.
+    // A replacer drops circular references (the z2ui5 global can hold them,
+    // e.g. via ComponentData) so the output stays useful JSON instead of
+    // throwing and degrading to a bare "[object Object]".
     function toJson(val) {
       const safe = val === undefined ? null : val;
+      const seen = new WeakSet();
       try {
-        return JSON.stringify(safe, null, 3);
+        return JSON.stringify(
+          safe,
+          (key, value) => {
+            if (typeof value === "object" && value !== null) {
+              if (seen.has(value)) return "[Circular]";
+              seen.add(value);
+            }
+            return value;
+          },
+          3,
+        );
       } catch {
-        // e.g. circular references in ComponentData - the debug tool must
-        // never crash the host app, so degrade to the plain string form.
+        // The debug tool must never crash the host app, so degrade to the
+        // plain string form if serialization still fails.
         return String(safe);
       }
     }
@@ -78,6 +92,15 @@ sap.ui.define(
       return view?._xContent?.outerHTML;
     }
 
+    // Minimal text dump of the shared error log (the entries Lib.logError
+    // pushes to AppState.state.errors): one "<ts>  <message>" line per entry,
+    // oldest first. Empty log yields a short placeholder.
+    function formatErrorLog() {
+      const errors = AppState.state.errors || [];
+      if (!errors.length) return "(log is empty)";
+      return errors.map((e) => `${e.ts}  ${e.message}`).join("\n");
+    }
+
     function getResponseXml(key) {
       const params = AppState.state.oResponse?.PARAMS;
       const slot = params?.[key];
@@ -106,7 +129,12 @@ sap.ui.define(
     // (the latter optionally with the rendered DOM for the templating
     // toggle). The "SOURCE" entry is handled separately in onItemSelect.
     const jsonSources = {
-      CONFIG: () => AppState.getGlobal("oConfig"),
+      // The whole public z2ui5 global facade (oConfig, url, checkLocal,
+      // Util, app-registered members, ...). Read directly here on purpose:
+      // this is the debug inspector, whose job is to surface the live global
+      // as-is - functions drop out under JSON.stringify, which is fine.
+      // ui5lint-disable-next-line no-project-globals -- see reason above
+      SYSTEM: () => window.z2ui5,
       MODEL: () => getModelJson(ViewSlots.getView("MAIN")),
       PLAIN: () => AppState.state.responseData,
       REQUEST: () => AppState.state.oBody,
@@ -182,6 +210,11 @@ sap.ui.define(
           return;
         }
 
+        if (selItem === "LOG") {
+          this.displayEditor(oEvent, formatErrorLog(), "text");
+          return;
+        }
+
         if (selItem === "SOURCE") this.showAbapSource(oEvent);
       },
 
diff --git a/run/input/core/app/z2ui5/webapp/core/FrontendAction.js b/run/input/core/app/z2ui5/webapp/core/FrontendAction.js
index 6ba1910..aef0939 100644
--- a/run/input/core/app/z2ui5/webapp/core/FrontendAction.js
+++ b/run/input/core/app/z2ui5/webapp/core/FrontendAction.js
@@ -1,6 +1,9 @@
 sap.ui.define(
   [
     "sap/m/MessageBox",
+    "sap/m/MessageToast",
+    "sap/ui/core/BusyIndicator",
+    "sap/ui/core/Theming",
     "sap/ui/model/odata/v2/ODataModel",
     "sap/m/library",
     "sap/ui/util/Storage",
@@ -10,6 +13,9 @@ sap.ui.define(
   ],
   (
     MessageBox,
+    MessageToast,
+    BusyIndicator,
+    Theming,
     ODataModel,
     mobileLibrary,
     Storage,
@@ -72,6 +78,104 @@ sap.ui.define(
       POPOVER_NAV_CONTAINER_TO: (id) => ViewSlots.byId("POPOVER", id),
     };
 
+    // ------------------------------------------------------------------
+    // control_call / control_call_by_id: call a whitelisted method on a
+    // control (by id) or a global object. The whitelist is the safety
+    // boundary; each entry lists the kind of every positional argument so
+    // string payloads are cast/resolved (never "call anything with
+    // anything"). Scope: imperative methods that have no binding equivalent.
+    // ------------------------------------------------------------------
+
+    // control method -> kinds of its positional args.
+    const CONTROL_METHODS = {
+      to: ["controlId"],
+      back: [],
+      focus: [],
+      scrollToIndex: ["int"],
+      scrollTo: ["int", "int"],
+    };
+
+    // global object -> lazy getter + its allowed methods (with arg kinds).
+    const GLOBAL_TARGETS = {
+      MESSAGE_TOAST: { get: () => MessageToast, methods: { show: ["string"] } },
+      MESSAGE_BOX: {
+        get: () => MessageBox,
+        methods: {
+          show: ["string"],
+          information: ["string"],
+          warning: ["string"],
+          error: ["string"],
+          success: ["string"],
+        },
+      },
+      BUSY_INDICATOR: {
+        get: () => BusyIndicator,
+        methods: { show: ["int"], hide: [] },
+      },
+      THEMING: { get: () => Theming, methods: { setTheme: ["string"] } },
+    };
+
+    // Cast one raw string argument to the kind the whitelist declared.
+    function castArg(kind, raw) {
+      switch (kind) {
+        case "int":
+          return Number(raw);
+        case "bool":
+          return raw === "true" || raw === "X" || raw === true;
+        case "controlId":
+          return ViewSlots.resolveById(raw);
+        case "object":
+          try {
+            return JSON.parse(raw);
+          } catch {
+            return {};
+          }
+        default:
+          return raw;
+      }
+    }
+
+    function castArgs(kinds, rawArgs) {
+      return kinds.map((kind, i) => castArg(kind, rawArgs[i]));
+    }
+
+    // args: [_, id, view, method, ...params]
+    function evControlCallById(oController, args) {
+      const [id, view, method] = [args[1], args[2], args[3]];
+      const kinds = CONTROL_METHODS[method];
+      if (!kinds) {
+        Lib.logError(`control_call_by_id: method '${method}' not allowed`);
+        return;
+      }
+      const control = view
+        ? ViewSlots.byId(view.toUpperCase(), id)
+        : ViewSlots.resolveById(id);
+      if (!control || typeof control[method] !== "function") {
+        Lib.logError(
+          `control_call_by_id: '${method}' not callable on control '${id}'`,
+        );
+        return;
+      }
+      control[method](...castArgs(kinds, args.slice(4)));
+    }
+
+    // args: [_, object, method, ...params]
+    function evControlCall(oController, args) {
+      const [name, method] = [args[1], args[2]];
+      const target = GLOBAL_TARGETS[name];
+      const kinds = target?.methods[method];
+      if (!kinds) {
+        Lib.logError(`control_call: '${name}.${method}' not allowed`);
+        return;
+      }
+      const obj = target.get();
+      if (!obj || typeof obj[method] !== "function") {
+        Lib.logError(`control_call: '${name}.${method}' not available`);
+        return;
+      }
+      obj[method](...castArgs(kinds, args.slice(3)));
+    }
+
     // ------------------------------------------------------------------
     // Individual event handlers - one per entry in the dispatch table at
     // the bottom. Uniform signature (oController, args) so the dispatch
@@ -565,6 +669,8 @@ sap.ui.define(
       Z2UI5: evZ2ui5Custom,
       WIZARD_SET_NEXT_STEP: evWizardSetNextStep,
       PLAY_AUDIO: evPlayAudio,
+      CONTROL_BY_ID: evControlCallById,
+      CONTROL_GLOBAL: evControlCall,
     };
 
     // Entry point called by View1.controller's eF().
diff --git a/run/input/core/app/z2ui5/webapp/core/Lib.js b/run/input/core/app/z2ui5/webapp/core/Lib.js
index d61a164..6da12fe 100644
--- a/run/input/core/app/z2ui5/webapp/core/Lib.js
+++ b/run/input/core/app/z2ui5/webapp/core/Lib.js
@@ -10,357 +10,383 @@
 // state). Renderers must stay cheap and free of visible side effects
 // (rendering API v2); deferring to onAfterRendering also guarantees the
 // control's DOM exists.
-sap.ui.define(["z2ui5/core/AppState"], (AppState) => {
-  "use strict";
+sap.ui.define(
+  ["z2ui5/core/AppState", "sap/ui/core/Element"],
+  (AppState, Element) => {
+    "use strict";
 
-  // Cap the error log so a long-running session cannot grow it unbounded.
-  const MAX_ERRORS = 100;
+    // Resolve a control id to its sap.ui.core.Element via the global registry.
+    // Element.getElementById arrived in UI5 1.119; older bootstraps fall back
+    // to the deprecated sap.ui.getCore().byId. Returns null when the id is
+    // empty or does not resolve, so callers can treat "not found" uniformly.
+    function getElementById(sId) {
+      if (!sId) return null;
+      if (Element.getElementById) return Element.getElementById(sId) || null;
+      /* ui5lint-disable no-globals, no-deprecated-api --
+       deliberate fallback for UI5 releases without Element.getElementById
+       (added in 1.119); the modern API is used in the branch above. */
+      if (sap.ui.getCore) {
+        const core = sap.ui.getCore();
+        if (core?.byId) return core.byId(sId) || null;
+      }
+      /* ui5lint-enable no-globals, no-deprecated-api */
+      return null;
+    }
 
-  // Append an entry to the shared error log and drop the oldest entry once
-  // the cap is reached. In the app the array always exists (AppState
-  // default); the guard keeps the helper usable standalone, e.g. in the
-  // Node specs that load this module with a bare AppState stub.
-  function logError(message, error) {
-    const state = AppState.state;
-    if (!state.errors) state.errors = [];
-    const entry = { message, ts: new Date().toISOString() };
-    if (error !== undefined) entry.error = error;
-    state.errors.push(entry);
-    if (state.errors.length > MAX_ERRORS) state.errors.shift();
-  }
+    // Cap the error log so a long-running session cannot grow it unbounded.
+    const MAX_ERRORS = 100;
 
-  // True when the object supports isDestroyed() and reports destroyed.
-  function isDestroyed(obj) {
-    return Boolean(obj?.isDestroyed && obj.isDestroyed());
-  }
+    // Append an entry to the shared error log and drop the oldest entry once
+    // the cap is reached. In the app the array always exists (AppState
+    // default); the guard keeps the helper usable standalone, e.g. in the
+    // Node specs that load this module with a bare AppState stub.
+    function logError(message, error) {
+      const state = AppState.state;
+      if (!state.errors) state.errors = [];
+      const entry = { message, ts: new Date().toISOString() };
+      if (error !== undefined) entry.error = error;
+      state.errors.push(entry);
+      if (state.errors.length > MAX_ERRORS) state.errors.shift();
+    }
 
-  // True when the object exists and is not destroyed. Used to guard
-  // async continuations (await, FileReader, getUserMedia, ...) against
-  // controls or views that were torn down in the meantime.
-  function isAlive(obj) {
-    return Boolean(obj) && !isDestroyed(obj);
-  }
+    // True when the object supports isDestroyed() and reports destroyed.
+    function isDestroyed(obj) {
+      return Boolean(obj?.isDestroyed && obj.isDestroyed());
+    }
 
-  // Helpers for managing the shared callback arrays (onBeforeRoundtrip,
-  // onAfterRendering, ...). Several custom controls register hooks here in
-  // init() and remove them in exit(). The arrays always exist in the app
-  // (AppState defaults); the guard keeps the helper standalone-safe.
-  function registerCallback(name, fn) {
-    const state = AppState.state;
-    if (!state[name]) state[name] = [];
-    state[name].push(fn);
-  }
+    // True when the object exists and is not destroyed. Used to guard
+    // async continuations (await, FileReader, getUserMedia, ...) against
+    // controls or views that were torn down in the meantime.
+    function isAlive(obj) {
+      return Boolean(obj) && !isDestroyed(obj);
+    }
 
-  function unregisterCallback(name, fn) {
-    const state = AppState.state;
-    if (!state[name]) return;
-    state[name] = state[name].filter((f) => f !== fn);
-  }
+    // Helpers for managing the shared callback arrays (onBeforeRoundtrip,
+    // onAfterRendering, ...). Several custom controls register hooks here in
+    // init() and remove them in exit(). The arrays always exist in the app
+    // (AppState defaults); the guard keeps the helper standalone-safe.
+    function registerCallback(name, fn) {
+      const state = AppState.state;
+      if (!state[name]) state[name] = [];
+      state[name].push(fn);
+    }
 
-  // Read a File object as a data URL and hand the result to onLoaded.
-  // The callback is skipped when `owner` was destroyed while the
-  // FileReader was busy; read errors are logged under `errorContext`.
-  function readFileAsDataURL(file, owner, onLoaded, errorContext) {
-    const reader = new FileReader();
-    reader.onload = () => {
-      if (isDestroyed(owner)) return;
-      onLoaded(reader.result);
-    };
-    reader.onerror = () =>
-      logError(`${errorContext}: FileReader failed`, reader.error);
-    reader.readAsDataURL(file);
-  }
+    function unregisterCallback(name, fn) {
+      const state = AppState.state;
+      if (!state[name]) return;
+      state[name] = state[name].filter((f) => f !== fn);
+    }
 
-  // Shared tokenUpdate handling for the multi-input extensions: map the
-  // added/removed UI5 tokens to plain objects and store them in the
-  // control's addedTokens/removedTokens properties.
-  function applyTokenUpdate(control, oEvent) {
-    const isRemoved = oEvent.getParameter("type") === "removed";
-    const rawList =
-      oEvent.getParameter(isRemoved ? "removedTokens" : "addedTokens") || [];
-    const tokens = rawList.map((item) => ({
-      KEY: item.getKey(),
-      TEXT: item.getText(),
-    }));
-    control.setProperty("addedTokens", isRemoved ? [] : tokens);
-    control.setProperty("removedTokens", isRemoved ? tokens : []);
-  }
+    // Read a File object as a data URL and hand the result to onLoaded.
+    // The callback is skipped when `owner` was destroyed while the
+    // FileReader was busy; read errors are logged under `errorContext`.
+    function readFileAsDataURL(file, owner, onLoaded, errorContext) {
+      const reader = new FileReader();
+      reader.onload = () => {
+        if (isDestroyed(owner)) return;
+        onLoaded(reader.result);
+      };
+      reader.onerror = () =>
+        logError(`${errorContext}: FileReader failed`, reader.error);
+      reader.readAsDataURL(file);
+    }
 
-  // Run every callback in `callbacks` (the shared callback arrays above),
-  // swallowing individual failures so one bad callback cannot break the
-  // whole event sequence.
-  function runCallbacks(callbacks, ...args) {
-    if (!callbacks) return;
-    for (const fn of callbacks) {
-      if (!fn) continue;
-      try {
-        fn(...args);
-      } catch (e) {
-        logError("runCallbacks: callback failed", e);
-      }
+    // Shared tokenUpdate handling for the multi-input extensions: map the
+    // added/removed UI5 tokens to plain objects and store them in the
+    // control's addedTokens/removedTokens properties.
+    function applyTokenUpdate(control, oEvent) {
+      const isRemoved = oEvent.getParameter("type") === "removed";
+      const rawList =
+        oEvent.getParameter(isRemoved ? "removedTokens" : "addedTokens") || [];
+      const tokens = rawList.map((item) => ({
+        KEY: item.getKey(),
+        TEXT: item.getText(),
+      }));
+      control.setProperty("addedTokens", isRemoved ? [] : tokens);
+      control.setProperty("removedTokens", isRemoved ? tokens : []);
     }
-  }
 
-  // Runs `fn` once `control` has a DOM reference: immediately when it is
-  // already rendered, otherwise once after its next rendering. The call
-  // is skipped when `owner` was destroyed in the meantime.
-  function whenRendered(control, owner, fn) {
-    if (control.getDomRef()) {
-      fn();
-      return;
+    // Run every callback in `callbacks` (the shared callback arrays above),
+    // swallowing individual failures so one bad callback cannot break the
+    // whole event sequence.
+    function runCallbacks(callbacks, ...args) {
+      if (!callbacks) return;
+      for (const fn of callbacks) {
+        if (!fn) continue;
+        try {
+          fn(...args);
+        } catch (e) {
+          logError("runCallbacks: callback failed", e);
+        }
+      }
     }
-    const delegate = {
-      onAfterRendering: () => {
-        control.removeEventDelegate(delegate);
-        if (!isDestroyed(owner)) fn();
-      },
-    };
-    control.addEventDelegate(delegate);
-  }
 
-  // Copy text to the clipboard, preferring the async clipboard API with a
-  // fallback to the legacy textarea + execCommand approach.
-  function copyToClipboard(textToCopy) {
-    if (navigator.clipboard?.writeText) {
-      navigator.clipboard.writeText(textToCopy).catch((err) => {
-        logError("Clipboard: writeText failed, falling back", err);
-        copyToClipboardFallback(textToCopy);
-      });
-      return;
+    // Runs `fn` once `control` has a DOM reference: immediately when it is
+    // already rendered, otherwise once after its next rendering. The call
+    // is skipped when `owner` was destroyed in the meantime.
+    function whenRendered(control, owner, fn) {
+      if (control.getDomRef()) {
+        fn();
+        return;
+      }
+      const delegate = {
+        onAfterRendering: () => {
+          control.removeEventDelegate(delegate);
+          if (!isDestroyed(owner)) fn();
+        },
+      };
+      control.addEventDelegate(delegate);
     }
-    copyToClipboardFallback(textToCopy);
-  }
 
-  function copyToClipboardFallback(textToCopy) {
-    const textarea = document.createElement("textarea");
-    textarea.value = textToCopy;
-    textarea.setAttribute("readonly", "");
-    textarea.style.position = "fixed";
-    textarea.style.top = "-1000px";
-    textarea.style.opacity = "0";
-    document.body.appendChild(textarea);
-    textarea.select();
-    try {
-      if (!document.execCommand("copy")) {
-        logError("Clipboard: execCommand('copy') returned false");
+    // Copy text to the clipboard, preferring the async clipboard API with a
+    // fallback to the legacy textarea + execCommand approach.
+    function copyToClipboard(textToCopy) {
+      if (navigator.clipboard?.writeText) {
+        navigator.clipboard.writeText(textToCopy).catch((err) => {
+          logError("Clipboard: writeText failed, falling back", err);
+          copyToClipboardFallback(textToCopy);
+        });
+        return;
       }
-    } catch (err) {
-      logError("Clipboard: execCommand('copy') threw", err);
-    } finally {
-      document.body.removeChild(textarea);
+      copyToClipboardFallback(textToCopy);
     }
-  }
 
-  // ------------------------------------------------------------------
-  // Pure helpers - free of UI5 dependencies so the Node specs under
-  // node/tests/ can load this module with a stubbed sap.ui.define and
-  // test the real implementation instead of a copy.
-  // ------------------------------------------------------------------
+    function copyToClipboardFallback(textToCopy) {
+      const textarea = document.createElement("textarea");
+      textarea.value = textToCopy;
+      textarea.setAttribute("readonly", "");
+      textarea.style.position = "fixed";
+      textarea.style.top = "-1000px";
+      textarea.style.opacity = "0";
+      document.body.appendChild(textarea);
+      textarea.select();
+      try {
+        if (!document.execCommand("copy")) {
+          logError("Clipboard: execCommand('copy') returned false");
+        }
+      } catch (err) {
+        logError("Clipboard: execCommand('copy') threw", err);
+      } finally {
+        document.body.removeChild(textarea);
+      }
+    }
 
-  const SAFE_PROTOCOLS = ["http:", "https:"];
+    // ------------------------------------------------------------------
+    // Pure helpers - free of UI5 dependencies so the Node specs under
+    // node/tests/ can load this module with a stubbed sap.ui.define and
+    // test the real implementation instead of a copy.
+    // ------------------------------------------------------------------
 
-  // Normalizes any value for display: null and undefined become the empty
-  // string, everything else its string representation.
-  function toText(val) {
-    return val == null ? "" : String(val);
-  }
+    const SAFE_PROTOCOLS = ["http:", "https:"];
 
-  // Collapse a UI5 Device `system` flag object into a single label. The
-  // order matters - phone/tablet/combi are mutually exclusive with the
-  // desktop fallback. Shared by Server._getDeviceInfo (request payload) and
-  // the Info control so both report the same value.
-  function deriveSystemType(system) {
-    if (!system) return "desktop";
-    if (system.phone) return "phone";
-    if (system.tablet) return "tablet";
-    if (system.combi) return "combi";
-    return "desktop";
-  }
+    // Normalizes any value for display: null and undefined become the empty
+    // string, everything else its string representation.
+    function toText(val) {
+      return val == null ? "" : String(val);
+    }
 
-  // Shared first step of the URL validators below: resolve the URL against
-  // the current origin, log and return null when it is empty or malformed.
-  function parseUrl(url) {
-    if (!url) return null;
-    try {
-      return new URL(url, window.location.origin);
-    } catch (e) {
-      logError(`Security: Invalid URL format: ${url}`, e);
-      return null;
+    // Collapse a UI5 Device `system` flag object into a single label. The
+    // order matters - phone/tablet/combi are mutually exclusive with the
+    // desktop fallback. Shared by Server._getDeviceInfo (request payload) and
+    // the Info control so both report the same value.
+    function deriveSystemType(system) {
+      if (!system) return "desktop";
+      if (system.phone) return "phone";
+      if (system.tablet) return "tablet";
+      if (system.combi) return "combi";
+      return "desktop";
     }
-  }
 
-  function hasSafeProtocol(parsed) {
-    if (SAFE_PROTOCOLS.includes(parsed.protocol)) return true;
-    logError(
-      `Security: Blocked redirect with invalid protocol: ${parsed.protocol}`,
-    );
-    return false;
-  }
+    // Shared first step of the URL validators below: resolve the URL against
+    // the current origin, log and return null when it is empty or malformed.
+    function parseUrl(url) {
+      if (!url) return null;
+      try {
+        return new URL(url, window.location.origin);
+      } catch (e) {
+        logError(`Security: Invalid URL format: ${url}`, e);
+        return null;
+      }
+    }
 
-  // Returns true only if the URL is on the same origin and uses http/https.
-  function isValidRedirectURL(url) {
-    const parsed = parseUrl(url);
-    if (!parsed) return false;
-    if (parsed.origin !== window.location.origin) {
-      logError(`Security: Blocked redirect to different origin: ${url}`);
+    function hasSafeProtocol(parsed) {
+      if (SAFE_PROTOCOLS.includes(parsed.protocol)) return true;
+      logError(
+        `Security: Blocked redirect with invalid protocol: ${parsed.protocol}`,
+      );
       return false;
     }
-    return hasSafeProtocol(parsed);
-  }
 
-  // Returns true if the URL uses a safe (http/https) protocol. Unlike
-  // isValidRedirectURL this allows cross-origin targets, so it fits
-  // outbound redirects to external sites while still blocking dangerous
-  // schemes such as javascript:, data: or vbscript:.
-  function isSafeRedirectProtocol(url) {
-    const parsed = parseUrl(url);
-    return parsed !== null && hasSafeProtocol(parsed);
-  }
+    // Returns true only if the URL is on the same origin and uses http/https.
+    function isValidRedirectURL(url) {
+      const parsed = parseUrl(url);
+      if (!parsed) return false;
+      if (parsed.origin !== window.location.origin) {
+        logError(`Security: Blocked redirect to different origin: ${url}`);
+        return false;
+      }
+      return hasSafeProtocol(parsed);
+    }
 
-  // Returns true for URLs that are safe as download targets: data: and
-  // blob: (generated content) plus http(s). Blocks javascript: and other
-  // active schemes, consistent with the redirect validators above.
-  function isSafeDownloadURL(url) {
-    const parsed = parseUrl(url);
-    return (
-      parsed !== null &&
-      (parsed.protocol === "data:" ||
-        parsed.protocol === "blob:" ||
-        SAFE_PROTOCOLS.includes(parsed.protocol))
-    );
-  }
+    // Returns true if the URL uses a safe (http/https) protocol. Unlike
+    // isValidRedirectURL this allows cross-origin targets, so it fits
+    // outbound redirects to external sites while still blocking dangerous
+    // schemes such as javascript:, data: or vbscript:.
+    function isSafeRedirectProtocol(url) {
+      const parsed = parseUrl(url);
+      return parsed !== null && hasSafeProtocol(parsed);
+    }
 
-  // A usable stateful session id ("sap-contextid"). We must never put a
-  // missing value on the wire: an empty or - via string coercion of a
-  // JS `undefined` - the literal "undefined" makes the SAP Web Dispatcher /
-  // ICM log "invalid w3c session id" / "HttpExtractSID: SID wrong len: 9"
-  // on every roundtrip. Only forward a real, non-empty id.
-  function isValidContextId(id) {
-    return typeof id === "string" && id !== "" && id !== "undefined";
-  }
+    // Returns true for URLs that are safe as download targets: data: and
+    // blob: (generated content) plus http(s). Blocks javascript: and other
+    // active schemes, consistent with the redirect validators above.
+    function isSafeDownloadURL(url) {
+      const parsed = parseUrl(url);
+      return (
+        parsed !== null &&
+        (parsed.protocol === "data:" ||
+          parsed.protocol === "blob:" ||
+          SAFE_PROTOCOLS.includes(parsed.protocol))
+      );
+    }
 
-  // Parse the path segments behind the attribute into (row, field) steps.
-  // Returns null when the segments do not follow the alternating
-  // <numeric row>/<field name> shape - the caller then ships the whole
-  // attribute. A non-numeric segment after a field (a struct member, e.g.
-  // attr/3/S_ADR/CITY) marks the field as leaf: the whole current value at
-  // row/field is shipped, which always covers the deeper edit too.
-  function parseDeltaSteps(segs) {
-    const steps = [];
-    let i = 0;
-    while (i < segs.length) {
-      const row = segs[i];
-      if (row === "" || Number.isNaN(Number(row))) return null;
-      const field = segs[i + 1];
-      if (field === undefined || field === "" || !Number.isNaN(Number(field))) {
-        return null;
-      }
-      i += 2;
-      if (i >= segs.length || Number.isNaN(Number(segs[i]))) {
-        steps.push({ row, field, leaf: true });
-        return steps;
-      }
-      // a numeric segment follows -> field is a nested table, walk deeper
-      steps.push({ row, field, leaf: false });
+    // A usable stateful session id ("sap-contextid"). We must never put a
+    // missing value on the wire: an empty or - via string coercion of a
+    // JS `undefined` - the literal "undefined" makes the SAP Web Dispatcher /
+    // ICM log "invalid w3c session id" / "HttpExtractSID: SID wrong len: 9"
+    // on every roundtrip. Only forward a real, non-empty id.
+    function isValidContextId(id) {
+      return typeof id === "string" && id !== "" && id !== "undefined";
     }
-    return null;
-  }
 
-  // Build the delta object sent to the backend. `paths` is the set of
-  // /XX/... paths that the user edited; `xx` is the full XX model data.
-  // Table edits become (recursively nested) __delta structures, so a cell
-  // edit in a nested/tree table ships only the changed cell instead of
-  // the whole outer table.
-  function buildDeltaFromPaths(paths, xx) {
-    const delta = {};
-    for (const path of paths) {
-      // path looks like "/XX/<attr>" or "/XX/<attr>/<row>/<field>" with
-      // arbitrarily deep <row>/<subtable> repetitions for nested tables
-      const parts = path.slice(4).split("/");
-      const attr = parts[0];
-      const steps = parseDeltaSteps(parts.slice(1));
-      if (!steps) {
-        // Scalar or unrecognized shape -> ship the whole attribute. The
-        // full value always wins over any queued delta: both read the
-        // same current model data, so it is a superset of every delta.
-        delta[attr] = xx[attr];
-        continue;
-      }
-      // A full attribute queued by another path already carries every
-      // cell (both read the same current model data) - never downgrade
-      // it to a partial delta, regardless of Set iteration order.
-      if (attr in delta && !delta[attr]?.__delta) continue;
-      if (!delta[attr]?.__delta) delta[attr] = { __delta: {} };
-      let node = delta[attr];
-      let model = xx[attr];
-      for (const { row, field, leaf } of steps) {
-        const rows = node.__delta;
-        if (!rows[row]) rows[row] = {};
-        const rowDelta = rows[row];
-        model = model?.[Number(row)]?.[field];
-        if (leaf) {
-          // The leaf value (cell, struct or whole sub-table) replaces any
-          // nested delta queued for the same field - it reads the same
-          // current model data and therefore carries those edits too.
-          rowDelta[field] = model;
-          break;
+    // Parse the path segments behind the attribute into (row, field) steps.
+    // Returns null when the segments do not follow the alternating
+    // <numeric row>/<field name> shape - the caller then ships the whole
+    // attribute. A non-numeric segment after a field (a struct member, e.g.
+    // attr/3/S_ADR/CITY) marks the field as leaf: the whole current value at
+    // row/field is shipped, which always covers the deeper edit too.
+    function parseDeltaSteps(segs) {
+      const steps = [];
+      let i = 0;
+      while (i < segs.length) {
+        const row = segs[i];
+        if (row === "" || Number.isNaN(Number(row))) return null;
+        const field = segs[i + 1];
+        if (
+          field === undefined ||
+          field === "" ||
+          !Number.isNaN(Number(field))
+        ) {
+          return null;
+        }
+        i += 2;
+        if (i >= segs.length || Number.isNaN(Number(segs[i]))) {
+          steps.push({ row, field, leaf: true });
+          return steps;
         }
-        // Nested table step - a whole sub-value queued by another path
-        // already covers this deeper edit.
-        if (field in rowDelta && !rowDelta[field]?.__delta) break;
-        if (!rowDelta[field]?.__delta) rowDelta[field] = { __delta: {} };
-        node = rowDelta[field];
+        // a numeric segment follows -> field is a nested table, walk deeper
+        steps.push({ row, field, leaf: false });
       }
+      return null;
     }
-    return delta;
-  }
 
-  // Turns an HTML "details" snippet from the backend into safe HTML.
-  // Bullet lists are preserved; everything else is reduced to plain text.
-  // The DOM helpers are created lazily so loading this module does not
-  // require a DOM (the Node specs never call this function).
-  let _msgParser = null;
-  let _sanitizeEl = null;
-  function sanitizeMessageDetails(html) {
-    if (!_msgParser) {
-      _msgParser = new DOMParser();
-      _sanitizeEl = document.createElement("div");
+    // Build the delta object sent to the backend. `paths` is the set of
+    // /XX/... paths that the user edited; `xx` is the full XX model data.
+    // Table edits become (recursively nested) __delta structures, so a cell
+    // edit in a nested/tree table ships only the changed cell instead of
+    // the whole outer table.
+    function buildDeltaFromPaths(paths, xx) {
+      const delta = {};
+      for (const path of paths) {
+        // path looks like "/XX/<attr>" or "/XX/<attr>/<row>/<field>" with
+        // arbitrarily deep <row>/<subtable> repetitions for nested tables
+        const parts = path.slice(4).split("/");
+        const attr = parts[0];
+        const steps = parseDeltaSteps(parts.slice(1));
+        if (!steps) {
+          // Scalar or unrecognized shape -> ship the whole attribute. The
+          // full value always wins over any queued delta: both read the
+          // same current model data, so it is a superset of every delta.
+          delta[attr] = xx[attr];
+          continue;
+        }
+        // A full attribute queued by another path already carries every
+        // cell (both read the same current model data) - never downgrade
+        // it to a partial delta, regardless of Set iteration order.
+        if (attr in delta && !delta[attr]?.__delta) continue;
+        if (!delta[attr]?.__delta) delta[attr] = { __delta: {} };
+        let node = delta[attr];
+        let model = xx[attr];
+        for (const { row, field, leaf } of steps) {
+          const rows = node.__delta;
+          if (!rows[row]) rows[row] = {};
+          const rowDelta = rows[row];
+          model = model?.[Number(row)]?.[field];
+          if (leaf) {
+            // The leaf value (cell, struct or whole sub-table) replaces any
+            // nested delta queued for the same field - it reads the same
+            // current model data and therefore carries those edits too.
+            rowDelta[field] = model;
+            break;
+          }
+          // Nested table step - a whole sub-value queued by another path
+          // already covers this deeper edit.
+          if (field in rowDelta && !rowDelta[field]?.__delta) break;
+          if (!rowDelta[field]?.__delta) rowDelta[field] = { __delta: {} };
+          node = rowDelta[field];
+        }
+      }
+      return delta;
     }
-    const doc = _msgParser.parseFromString(html, "text/html");
-    // Only top-level list items: a nested <li>'s text is already part of
-    // its ancestor's textContent, so including it too would duplicate it.
-    const items = Array.from(doc.querySelectorAll("li")).filter(
-      (li) => !li.parentElement?.closest("li"),
-    );
-    if (items.length > 0) {
-      const safeItems = items.map((li) => {
-        _sanitizeEl.textContent = li.textContent;
-        return `<li>${_sanitizeEl.innerHTML}</li>`;
-      });
-      return `<ul>${safeItems.join("")}</ul>`;
+
+    // Turns an HTML "details" snippet from the backend into safe HTML.
+    // Bullet lists are preserved; everything else is reduced to plain text.
+    // The DOM helpers are created lazily so loading this module does not
+    // require a DOM (the Node specs never call this function).
+    let _msgParser = null;
+    let _sanitizeEl = null;
+    function sanitizeMessageDetails(html) {
+      if (!_msgParser) {
+        _msgParser = new DOMParser();
+        _sanitizeEl = document.createElement("div");
+      }
+      const doc = _msgParser.parseFromString(html, "text/html");
+      // Only top-level list items: a nested <li>'s text is already part of
+      // its ancestor's textContent, so including it too would duplicate it.
+      const items = Array.from(doc.querySelectorAll("li")).filter(
+        (li) => !li.parentElement?.closest("li"),
+      );
+      if (items.length > 0) {
+        const safeItems = items.map((li) => {
+          _sanitizeEl.textContent = li.textContent;
+          return `<li>${_sanitizeEl.innerHTML}</li>`;
+        });
+        return `<ul>${safeItems.join("")}</ul>`;
+      }
+      _sanitizeEl.textContent = doc.body.textContent;
+      return _sanitizeEl.innerHTML;
     }
-    _sanitizeEl.textContent = doc.body.textContent;
-    return _sanitizeEl.innerHTML;
-  }
 
-  return {
-    logError,
-    isDestroyed,
-    isAlive,
-    registerCallback,
-    unregisterCallback,
-    readFileAsDataURL,
-    applyTokenUpdate,
-    runCallbacks,
-    whenRendered,
-    copyToClipboard,
-    toText,
-    deriveSystemType,
-    isValidRedirectURL,
-    isSafeRedirectProtocol,
-    isSafeDownloadURL,
-    isValidContextId,
-    buildDeltaFromPaths,
-    sanitizeMessageDetails,
-  };
-});
+    return {
+      logError,
+      isDestroyed,
+      isAlive,
+      registerCallback,
+      unregisterCallback,
+      readFileAsDataURL,
+      applyTokenUpdate,
+      runCallbacks,
+      whenRendered,
+      copyToClipboard,
+      toText,
+      deriveSystemType,
+      isValidRedirectURL,
+      isSafeRedirectProtocol,
+      isSafeDownloadURL,
+      isValidContextId,
+      buildDeltaFromPaths,
+      sanitizeMessageDetails,
+      getElementById,
+    };
+  },
+);
diff --git a/run/input/core/app/z2ui5/webapp/core/Messages.js b/run/input/core/app/z2ui5/webapp/core/Messages.js
index 3f14327..632a1c4 100644
--- a/run/input/core/app/z2ui5/webapp/core/Messages.js
+++ b/run/input/core/app/z2ui5/webapp/core/Messages.js
@@ -3,8 +3,14 @@
 // calling controller is only needed for the optional ONCLOSE follow-up
 // events, which trigger a backend roundtrip through its eB().
 sap.ui.define(
-  ["sap/m/MessageBox", "sap/m/MessageToast", "z2ui5/core/Lib"],
-  (MessageBox, MessageToast, Lib) => {
+  [
+    "sap/m/MessageBox",
+    "sap/m/MessageToast",
+    "sap/ui/core/Popup",
+    "z2ui5/core/Lib",
+    "z2ui5/core/ViewSlots",
+  ],
+  (MessageBox, MessageToast, Popup, Lib, ViewSlots) => {
     "use strict";
 
     // Parse a value as integer milliseconds, falling back to `fallback`
@@ -15,10 +21,32 @@ sap.ui.define(
       return val && Number.isFinite(parsed) ? parsed : fallback;
     }
 
+    // Resolve a dock position ("center bottom", "begin top", ...) to the
+    // sap.ui.core.Popup.Dock value of the running UI5 version. Older UI5
+    // keeps the jQuery-style "center bottom" spelling, newer UI5 switched
+    // the enum to "CenterBottom" (and rejects the old form in MessageToast's
+    // dock validation with a console error). Looking the position up by its
+    // PascalCase key returns whichever spelling this version expects, so the
+    // value validates on both. Unknown values are passed through unchanged.
+    function toDockValue(pos) {
+      if (!pos) return pos;
+      const key = pos
+        .trim()
+        .split(/\s+/)
+        .map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
+        .join("");
+      return Popup.Dock[key] || pos;
+    }
+
     function showToast(msg, oController) {
       MessageToast.show(msg.TEXT, {
         duration: parseMs(msg.DURATION, 3000),
         width: msg.WIDTH || "15em",
+        my: toDockValue(msg.MY || "center bottom"),
+        at: toDockValue(msg.AT || "center bottom"),
+        offset: msg.OFFSET || "0 0",
+        collision: msg.COLLISION || "fit fit",
+        ...(msg.OF && { of: msg.OF }),
         onClose: msg.ONCLOSE ? () => oController.eB([msg.ONCLOSE]) : null,
         autoClose: Boolean(msg.AUTOCLOSE),
         animationTimingFunction: msg.ANIMATIONTIMINGFUNCTION || "ease",
@@ -55,6 +83,12 @@ sap.ui.define(
         closeOnNavigation: Boolean(msg.CLOSEONNAVIGATION),
       };
       if (msg.ICON && msg.ICON !== "NONE") oParams.icon = msg.ICON;
+      if (msg.CONTENTWIDTH) oParams.contentWidth = msg.CONTENTWIDTH;
+      // dependentOn (UI5 >= 1.124) adds the message box to an element's
+      // lifecycle - the backend sends the control id, resolved to the element
+      // here. A missing/unresolvable id drops the option silently.
+      const oDependentOn = ViewSlots.resolveById(msg.DEPENDENTON);
+      if (oDependentOn) oParams.dependentOn = oDependentOn;
       // MessageBox display methods are lowercase (show, error, warning,
       // ...), but the type can arrive capitalized - the ABAP message
       // formatter sends e.g. "Error" for multi-message boxes - or as a
diff --git a/run/input/core/app/z2ui5/webapp/core/Server.js b/run/input/core/app/z2ui5/webapp/core/Server.js
index fd28d2a..3eaaa2f 100644
--- a/run/input/core/app/z2ui5/webapp/core/Server.js
+++ b/run/input/core/app/z2ui5/webapp/core/Server.js
@@ -25,6 +25,75 @@ sap.ui.define(
 
     const _MSG_TYPES = Object.freeze(["S_MSG_TOAST", "S_MSG_BOX"]);
 
+    // Quote characters recognised by the eF( ) argument parser below. The
+    // single quote is built from its char code on purpose: keeping a literal
+    // single-quote character out of this file avoids confusing the ABAP
+    // source generator, which ships this module as an ABAP string literal.
+    const CH_SQUOTE = String.fromCharCode(39);
+    const CH_DQUOTE = String.fromCharCode(34);
+
+    // Convert a single JS-literal argument (as produced by the backend
+    // get_t_arg) into a value WITHOUT eval: single- or double-quoted strings,
+    // JSON objects / arrays, numbers, booleans and null.
+    function parseEfValue(token) {
+      if (token === "") return undefined;
+      const first = token[0];
+      if (first === CH_SQUOTE) {
+        return token.slice(1, -1).replace(/\\([\x27\\])/g, "$1");
+      }
+      if (first === CH_DQUOTE || first === "{" || first === "[") {
+        try {
+          return JSON.parse(token);
+        } catch {
+          return token;
+        }
+      }
+      if (token === "true") return true;
+      if (token === "false") return false;
+      if (token === "null") return null;
+      if (token === "undefined") return undefined;
+      const num = Number(token);
+      return Number.isNaN(num) ? token : num;
+    }
+
+    // Split the argument list of an eF( ) call into its top-level arguments,
+    // respecting nested (), {}, [] and quoted strings, and convert each one
+    // to a value. Done manually (no eval / Function) so it works under a
+    // strict Content-Security-Policy without unsafe-eval, while keeping
+    // object, array and quoted-string arguments intact.
+    function parseEfArgs(str) {
+      const args = [];
+      let depth = 0;
+      let quote = null;
+      let token = "";
+      for (let i = 0; i < str.length; i++) {
+        const ch = str[i];
+        if (quote) {
+          token += ch;
+          if (ch === "\\" && i + 1 < str.length) token += str[++i];
+          else if (ch === quote) quote = null;
+          continue;
+        }
+        if (ch === CH_SQUOTE || ch === CH_DQUOTE) {
+          quote = ch;
+          token += ch;
+        } else if (ch === "{" || ch === "[" || ch === "(") {
+          depth++;
+          token += ch;
+        } else if (ch === "}" || ch === "]" || ch === ")") {
+          depth--;
+          token += ch;
+        } else if (ch === "," && depth === 0) {
+          args.push(parseEfValue(token.trim()));
+          token = "";
+        } else {
+          token += ch;
+        }
+      }
+      if (token.trim() !== "") args.push(parseEfValue(token.trim()));
+      return args;
+    }
+
     // Last-resort client-side timeout for backend roundtrips. Infrastructure
     // timeouts (ICM, web dispatcher, proxies) usually fire much earlier and
     // surface as a regular error response; this backstop only ensures that a
@@ -505,23 +574,23 @@ sap.ui.define(
       },
 
       // Executes a single custom-JS snippet from the backend.
-      // Format A:  "alert(123)"           -> runs the expression
-      // Format B:  "eF('A','B','C')"      -> calls oController.eF('A','B','C')
-      //
-      // OBSOLETE: this mechanism (including the quote-based argument parsing
-      // and the Function() evaluation) only exists for backward compatibility
-      // with older apps and will be removed in a future release. Do not
-      // extend or change it.
+      // Format A:  a raw expression such as alert(123) - needs a CSP that
+      //            allows unsafe-eval, otherwise it is a no-op.
+      // Format B:  a structured eF( ) frontend-event call - dispatched via
+      //            oController.eF( ). Its argument list is parsed manually
+      //            (no eval / Function) so it runs under a strict CSP while
+      //            keeping object / array / string arguments intact.
       _runCustomJs(item, oController) {
         try {
-          const parts = item.split("'");
-          // Arguments live at the odd indices between single quotes.
-          const args = parts.filter((_, index) => index % 2 === 1);
-          if (args.length > 0) {
-            oController.eF(...args);
+          const snippet = item.trim();
+          const match = /^\.?eF\s*\(([\s\S]*)\)\s*;?$/.exec(snippet);
+          if (match) {
+            oController.eF(...parseEfArgs(match[1]));
           } else {
+            // A raw JavaScript expression - only runs when the CSP allows
+            // unsafe-eval.
             // eslint-disable-next-line no-new-func
-            Function("return " + parts[0])();
+            Function("return " + item)();
           }
         } catch (e) {
           Lib.logError("customJs: execution failed", e);
diff --git a/run/input/core/app/z2ui5/webapp/core/ViewSlots.js b/run/input/core/app/z2ui5/webapp/core/ViewSlots.js
index 5c7a23b..ff7763a 100644
--- a/run/input/core/app/z2ui5/webapp/core/ViewSlots.js
+++ b/run/input/core/app/z2ui5/webapp/core/ViewSlots.js
@@ -110,6 +110,20 @@ sap.ui.define(
       return view.byId(id);
     }
 
+    // Resolve a control id the backend named (popover openBy, message box
+    // dependentOn) to its control: search every open slot first - the ids
+    // apps use are the local ids they wrote in the XML, which resolve inside
+    // their view/fragment - then fall back to the global UI5 registry for a
+    // fully-qualified id. Returns null when nothing matches.
+    function resolveById(id) {
+      if (!id) return null;
+      for (const slot of slots) {
+        const found = byId(slot.key, id);
+        if (found) return found;
+      }
+      return Lib.getElementById(id);
+    }
+
     // Returns the key of the slot a UI5 element belongs to, by walking up
     // the control tree until a live slot view is hit (innermost slot wins,
     // e.g. nested views). Undefined when the element is in no slot.
@@ -155,6 +169,7 @@ sap.ui.define(
       paramByKey,
       keyOfController,
       byId,
+      resolveById,
       containingSlotKey,
       destroy,
     };
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_003.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_003.js
deleted file mode 100644
index d247f83..0000000
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_003.js
+++ /dev/null
@@ -1,24 +0,0 @@
-const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
-const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
-
-class z2ui5_cl_demo_app_003 extends z2ui5_if_app {
-  t_tab = [];
-
-  async main(client) {
-    let view;
-    let page;
-    if (client.check_on_init()) {
-      this.t_tab = [{ title: `row_01`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `row_02`, info: `incompleted`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `row_03`, info: `working`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `row_04`, info: `working`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `row_05`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `row_06`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }];
-      view = z2ui5_cl_xml_view.factory();
-      page = view.shell()
-        .page({ title: `abap2UI5 - List`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
-      page.list({ headertext: `List Output`, items: client._bind_edit(this.t_tab), mode: `SingleSelectMaster`, selectionchange: client._event(`SELCHANGE`) })
-        .standard_list_item({ title: `{TITLE}`, description: `{DESCR}`, icon: `{ICON}`, info: `{INFO}`, press: client._event(`TEST`), selected: `{SELECTED}` });
-      client.view_display(view.stringify());
-    } else if (client.check_on_event(`SELCHANGE`)) {
-      client.message_box_display(`go to details for item ${this.t_tab.find((row) => row.selected === true).title}`);
-    }
-  }
-}
-
-module.exports = z2ui5_cl_demo_app_003;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_006.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_006.js
index 2afc65c..87c2fc7 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_006.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_006.js
@@ -49,7 +49,7 @@ class z2ui5_cl_demo_app_006 extends z2ui5_if_app {
     tab.header_toolbar()
       .toolbar()
       .title(`title of the table`)
-      .button({ text: `letf side button`, icon: `sap-icon://account`, press: this.client._event(`BUTTON_SORT`) })
+      .button({ text: `left side button`, icon: `sap-icon://account`, press: this.client._event(`BUTTON_SORT`) })
       .segmented_button(this.key)
       .items()
       .segmented_button_item({ key: `BLUE`, icon: `sap-icon://accept`, text: `blue` })
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_008.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_008.js
index 2c1d170..8fbfb17 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_008.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_008.js
@@ -1,4 +1,5 @@
 const cl_abap_char_utilities = require("abap2UI5/cl_abap_char_utilities");
+const z2ui5_cl_sample_context = require("./z2ui5_cl_sample_context");
 const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
 const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
 const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
@@ -18,6 +19,9 @@ class z2ui5_cl_demo_app_008 extends z2ui5_if_app {
   }
 
   on_event() {
+    let ls_msg_sy;
+    let ls_msg_bapiret;
+    let lv_val;
     switch (this.client.get().EVENT) {
       case `BUTTON_MESSAGE_BOX_CONFIRM`:
         this.client.message_box_display(`Approve purchase order 12345?`, `confirm`);
@@ -55,6 +59,21 @@ class z2ui5_cl_demo_app_008 extends z2ui5_if_app {
         this.check_strip_active = true;
         this.strip_type = `Success`;
         break;
+      case `BUTTON_MESSAGE_BOX_SY`:
+        ls_msg_sy = z2ui5_cl_sample_context.msg_get_by_msg({ id: `NET`, no: `001` });
+        this.client.message_box_display(ls_msg_sy);
+        break;
+      case `BUTTON_MESSAGE_BOX_BAPIRET`:
+        ls_msg_bapiret = { id: `NET`, number: `001` };
+        this.client.message_box_display(ls_msg_bapiret);
+        break;
+      case `BUTTON_MESSAGE_BOX_CX_ROOT`:
+        try {
+          lv_val = z2ui5_cl_util.abap_div(1, 0);
+        } catch (lx) {
+          this.client.message_box_display(lx);
+        }
+        break;
     }
     this.view_display();
   }
@@ -92,6 +111,13 @@ class z2ui5_cl_demo_app_008 extends z2ui5_if_app {
       .content(`form`)
       .button({ text: `Message Toast`, press: this.client._event(`BUTTON_MESSAGE_TOAST`) })
       .button({ text: `Message Toast Customized`, press: this.client._event(`BUTTON_MESSAGE_TOAST2`) });
+    page.grid(`L6 M12 S12`)
+      .content(`layout`)
+      .simple_form(`Message Box from ABAP Object`)
+      .content(`form`)
+      .button({ text: `SY Message`, press: this.client._event(`BUTTON_MESSAGE_BOX_SY`) })
+      .button({ text: `BAPIRET2`, press: this.client._event(`BUTTON_MESSAGE_BOX_BAPIRET`) })
+      .button({ text: `CX_ROOT`, press: this.client._event(`BUTTON_MESSAGE_BOX_CX_ROOT`) });
     this.client.view_display(view.stringify());
   }
 }
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_009.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_009.js
index ceb86e5..38097db 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_009.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_009.js
@@ -29,11 +29,11 @@ class z2ui5_cl_demo_app_009 extends z2ui5_if_app {
 
   on_event() {
     switch (this.client.get().EVENT) {
-      case `POPUP_TABLE_value`:
+      case `POPUP_TABLE_VALUE`:
         this.t_suggestion_sel = z2ui5_cl_util.abap_copy(this.t_suggestion);
         this.popup_value_suggestion();
         break;
-      case `POPUP_TABLE_value_CUSTOM`:
+      case `POPUP_TABLE_VALUE_CUSTOM`:
         this.t_employees_sel = {};
         this.popup_value_employee();
         break;
@@ -44,21 +44,25 @@ class z2ui5_cl_demo_app_009 extends z2ui5_if_app {
         }
         this.popup_value_employee();
         break;
-      case `POPUP_TABLE_value_CUSTOM_CONTINUE`:
+      case `POPUP_TABLE_VALUE_CUSTOM_CONTINUE`:
         for (let _i = this.t_employees_sel.length - 1; _i >= 0; _i--) { const row = this.t_employees_sel[_i]; if (!(row.selkz === true || row.selkz === `X`)) this.t_employees_sel.splice(_i, 1); }
         if (this.t_employees_sel.length === 1) {
           this.s_screen.name = z2ui5_cl_util.abap_copy(this.t_employees_sel[(1) - 1].name);
           this.s_screen.lastname = z2ui5_cl_util.abap_copy(this.t_employees_sel[(1) - 1].lastname);
           this.client.message_toast_display(`value selected`);
           this.client.popup_destroy();
+        } else {
+          this.client.message_toast_display(`please select exactly one employee`);
         }
         break;
-      case `POPUP_TABLE_value_CONTINUE`:
+      case `POPUP_TABLE_VALUE_CONTINUE`:
         for (let _i = this.t_suggestion_sel.length - 1; _i >= 0; _i--) { const row = this.t_suggestion_sel[_i]; if (!(row.selkz === true || row.selkz === `X`)) this.t_suggestion_sel.splice(_i, 1); }
         if (this.t_suggestion_sel.length === 1) {
           this.s_screen.color_02 = z2ui5_cl_util.abap_copy(this.t_suggestion_sel[(1) - 1].value);
           this.client.message_toast_display(`value selected`);
           this.client.popup_destroy();
+        } else {
+          this.client.message_toast_display(`please select exactly one color`);
         }
         break;
       case `BUTTON_SEND`:
@@ -76,6 +80,7 @@ class z2ui5_cl_demo_app_009 extends z2ui5_if_app {
     const view = z2ui5_cl_xml_view.factory();
     const page = view.shell()
       .page({ title: `abap2UI5 - Value Help Examples`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() });
+    page.message_strip({ text: `Four value-help patterns: inline suggestions, numeric-only input, a value-help popup with a selectable table, ` + `and a custom popup with a city search. Fill the fields, then Clear resets the view and Send simulates a submit.`, type: `Information`, showicon: true, class: `sapUiSmallMargin` });
     const form = page.grid(`L7 M7 S7`).content(`layout`).simple_form(`Input with Value Help`).content(`form`);
     form.label(`Input with suggestion items`)
       .input({ value: this.client._bind_edit(this.s_screen.color_01, { name: `s_screen-color_01` }), placeholder: `fill in your favorite colour`, suggestionitems: this.client._bind(this.t_suggestion), showsuggestion: true })
@@ -86,15 +91,15 @@ class z2ui5_cl_demo_app_009 extends z2ui5_if_app {
     form.label(`Input only numbers allowed`)
       .input({ value: this.client._bind_edit(this.s_screen.quantity, { name: `s_screen-quantity` }), type: `Number`, placeholder: `quantity` });
     form.label(`Input with value`)
-      .input({ value: this.client._bind_edit(this.s_screen.color_02, { name: `s_screen-color_02` }), placeholder: `fill in your favorite colour`, showvaluehelp: true, valuehelprequest: this.client._event(`POPUP_TABLE_value`) });
+      .input({ value: this.client._bind_edit(this.s_screen.color_02, { name: `s_screen-color_02` }), placeholder: `fill in your favorite colour`, showvaluehelp: true, valuehelprequest: this.client._event(`POPUP_TABLE_VALUE`) });
     form.label(`Custom value Popup`)
-      .input({ value: this.client._bind_edit(this.s_screen.name, { name: `s_screen-name` }), placeholder: `name`, showvaluehelp: true, valuehelprequest: this.client._event(`POPUP_TABLE_value_CUSTOM`) })
-      .input({ value: this.client._bind_edit(this.s_screen.lastname, { name: `s_screen-lastname` }), placeholder: `lastname`, showvaluehelp: true, valuehelprequest: this.client._event(`POPUP_TABLE_value_CUSTOM`) });
+      .input({ value: this.client._bind_edit(this.s_screen.name, { name: `s_screen-name` }), placeholder: `name`, showvaluehelp: true, valuehelprequest: this.client._event(`POPUP_TABLE_VALUE_CUSTOM`) })
+      .input({ value: this.client._bind_edit(this.s_screen.lastname, { name: `s_screen-lastname` }), placeholder: `lastname`, showvaluehelp: true, valuehelprequest: this.client._event(`POPUP_TABLE_VALUE_CUSTOM`) });
     page.footer()
       .overflow_toolbar()
       .toolbar_spacer()
-      .button({ text: `Clear`, press: this.client._event(`BUTTON_CLEAR`), type: `Reject`, enabled: false, icon: `sap-icon://delete` })
-      .button({ text: `Send to Server`, press: this.client._event(`BUTTON_SEND`), enabled: false, type: `Success` });
+      .button({ text: `Clear`, press: this.client._event(`BUTTON_CLEAR`), type: `Reject`, icon: `sap-icon://delete` })
+      .button({ text: `Send to Server`, press: this.client._event(`BUTTON_SEND`), type: `Success`, icon: `sap-icon://paper-plane` });
     this.client.view_display(view.stringify());
   }
 
@@ -105,7 +110,7 @@ class z2ui5_cl_demo_app_009 extends z2ui5_if_app {
     tab.columns().column(`20rem`).text(`Color`).get_parent().column().text(`Description`).get_parent();
     tab.items().column_list_item({ selected: `{SELKZ}` }).cells().text(`{VALUE}`).text(`{DESCR}`);
     dialog.buttons()
-      .button({ text: `continue`, press: this.client._event(`POPUP_TABLE_value_CONTINUE`), type: `Emphasized` });
+      .button({ text: `continue`, press: this.client._event(`POPUP_TABLE_VALUE_CONTINUE`), type: `Emphasized` });
     this.client.popup_display(popup.stringify());
   }
 
@@ -144,7 +149,7 @@ class z2ui5_cl_demo_app_009 extends z2ui5_if_app {
       .text(`{NAME}`)
       .text(`{LASTNAME}`);
     dialog.buttons()
-      .button({ text: `continue`, press: this.client._event(`POPUP_TABLE_value_CUSTOM_CONTINUE`), type: `Emphasized` });
+      .button({ text: `continue`, press: this.client._event(`POPUP_TABLE_VALUE_CUSTOM_CONTINUE`), type: `Emphasized` });
     this.client.popup_display(popup.stringify());
   }
 }
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_012.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_012.js
index 409a56e..2f1c187 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_012.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_012.js
@@ -46,7 +46,7 @@ class z2ui5_cl_demo_app_012 extends z2ui5_if_app {
       case `BUTTON_POPUP_05`:
         this.check_popup = true;
         this.client.view_destroy();
-        this.client.nav_app_call(z2ui5_cl_demo_app_020.factory({ i_text: `(new app )this is a popup to decide, the text is sent from the previous app and the answer will be sent back`, i_cancel_text: `Cancel `, i_cancel_event: `POPUP_DECIDE_CANCEL`, i_confirm_text: `Continue`, i_confirm_event: `POPUP_DECIDE_CONTINUE` }));
+        this.client.nav_app_call(z2ui5_cl_demo_app_020.factory({ i_text: `(new app )this is a popup to decide, the text is sent from the previous app and the answer will be sent back`, i_cancel_text: `Cancel`, i_cancel_event: `POPUP_DECIDE_CANCEL`, i_confirm_text: `Continue`, i_confirm_event: `POPUP_DECIDE_CONTINUE` }));
         break;
       case `BUTTON_POPUP_06`:
         this.check_popup = true;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_015.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_015.js
index 3df6e95..0dc3fac 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_015.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_015.js
@@ -12,11 +12,7 @@ class z2ui5_cl_demo_app_015 extends z2ui5_if_app {
     view.shell()
       .page({ title: `abap2UI5 - Formatted Text`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() })
       .header_content()
-      .toolbar_spacer()
-      .link()
-      .get_parent()
-      .vbox(`sapUiSmallMargin`)
-      .link({ text: `Control Documentation - SAP UI5 Formatted Text`, href: `https://sapui5.hana.ondemand.com/#/entity/sap.m.FormattedText/sample/sap.m.sample.FormattedText` })
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.FormattedText/sample/sap.m.sample.FormattedText` })
       .get_parent()
       .vbox(`sapUiSmallMargin`)
       .formatted_text(this.html_text);
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_017.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_017.js
index 66f40d9..6791534 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_017.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_017.js
@@ -9,6 +9,9 @@ class z2ui5_cl_demo_app_017 extends z2ui5_if_app {
     const view = z2ui5_cl_xml_view.factory();
     const page = view.shell()
       .page({ title: `abap2UI5 - Object Page with Avatar`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() })
+      .header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.uxap.ObjectPageLayout/sample/sap.uxap.sample.ObjectPageOnJSON` })
+      .get_parent()
       .object_page_layout({ showtitleinheadercontent: true, showeditheaderbutton: true, editheaderbuttonpress: this.client._event(`EDIT_HEADER_PRESS`), uppercaseanchorbar: false });
     const header_title = page.header_title().object_page_dyn_header_title();
     header_title.expanded_heading().hbox().title({ text: `Oblomov Dev`, wrapping: true });
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_021.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_021.js
deleted file mode 100644
index 527afa2..0000000
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_021.js
+++ /dev/null
@@ -1,30 +0,0 @@
-const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
-const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
-const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
-
-class z2ui5_cl_demo_app_021 extends z2ui5_if_app {
-  textarea = ``;
-  client = null;
-
-  async main(client) {
-    let view;
-    let page;
-    let layout;
-    this.client = z2ui5_cl_util.abap_copy(client);
-    if (client.check_on_init()) {
-      this.textarea = `Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn` + `a aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd` + ` gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam n ` + `  onumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit am ` + `  et, consetetur sadipscing elitr, sed diam nonumy eirm sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam no ` + `numy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.`;
-      view = z2ui5_cl_xml_view.factory();
-      page = view.shell()
-        .page({ title: `abap2UI5 - Text Area Example`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
-      layout = page.vertical_layout({ class: `sapUiContentPadding`, width: `100%` });
-      layout.label(`text area`)
-        .text_area({ valueliveupdate: true, value: client._bind_edit(this.textarea), growing: true, growingmaxlines: `7`, width: `100%` })
-        .button({ text: `OK`, press: client._event(`POST`) });
-      client.view_display(view.stringify());
-    } else if (client.check_on_event(`POST`)) {
-      client.message_box_display(`success - values sent to the server`);
-    }
-  }
-}
-
-module.exports = z2ui5_cl_demo_app_021;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_022.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_022.js
index 18352ce..ed92963 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_022.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_022.js
@@ -1,22 +1,89 @@
+const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
 const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
 const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
 
 class z2ui5_cl_demo_app_022 extends z2ui5_if_app {
-  progress_value = ``;
+  percent_animation = ``;
+  display_animation = ``;
+  percent_no_animation = ``;
+  display_no_animation = ``;
+  client = null;
 
   async main(client) {
-    let view;
+    this.client = z2ui5_cl_util.abap_copy(client);
     if (client.check_on_init()) {
-      this.progress_value = `3`;
-      view = z2ui5_cl_xml_view.factory();
-      view.shell()
-        .page({ title: `abap2UI5 - Progress Indicator Example`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() })
-        .vertical_layout({ class: `sapUiContentPadding`, width: `100%` })
-        .label(`ProgressIndicator`)
-        .progress_indicator({ percentvalue: client._bind(this.progress_value), displayvalue: `0,44GB of 32GB used`, showvalue: true, state: `Success` });
-      client.view_display(view.stringify());
+      this.on_init();
+    } else if (client.check_on_event()) {
+      this.on_event();
     }
   }
+
+  on_init() {
+    this.percent_animation = `0`;
+    this.display_animation = `0%`;
+    this.percent_no_animation = `0`;
+    this.display_no_animation = `0%`;
+    this.view_display();
+  }
+
+  on_event() {
+    switch (this.client.get().EVENT) {
+      case `ANIMATION_0`:
+        this.percent_animation = `0`;
+        this.display_animation = `0%`;
+        break;
+      case `ANIMATION_100`:
+        this.percent_animation = `100`;
+        this.display_animation = `100%`;
+        break;
+      case `NO_ANIMATION_0`:
+        this.percent_no_animation = `0`;
+        this.display_no_animation = `0%`;
+        break;
+      case `NO_ANIMATION_100`:
+        this.percent_no_animation = `100`;
+        this.display_no_animation = `100%`;
+        break;
+    }
+    this.client.view_model_update();
+  }
+
+  view_display() {
+    const page = z2ui5_cl_xml_view.factory()
+      .shell()
+      .page({ title: `abap2UI5 - Progress Indicator Example`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.ProgressIndicator/sample/sap.m.sample.ProgressIndicator` });
+    const layout = page.vertical_layout({ class: `sapUiContentPadding`, width: `100%` });
+    layout.text({ text: `Regular Mode`, class: `sapUiSmallMarginBottom` })
+      .progress_indicator({ class: `sapUiSmallMarginBottom`, percentvalue: `30`, displayvalue: `30%`, showvalue: true, state: `None` })
+      .progress_indicator({ class: `sapUiSmallMarginBottom`, percentvalue: `50`, showvalue: false, state: `Error` })
+      .progress_indicator({ class: `sapUiSmallMarginBottom`, percentvalue: `99`, displayvalue: `0.99GB of 1GB`, showvalue: true, state: `Success` })
+      .progress_indicator({ class: `sapUiSmallMarginBottom`, percentvalue: `25`, displayvalue: `25%`, showvalue: true, state: `Warning` })
+      .progress_indicator({ class: `sapUiSmallMarginBottom`, percentvalue: `40`, displayvalue: `40%`, showvalue: true, state: `Information` })
+      .text({ text: `Information Popover Scenario`, class: `sapUiSmallMarginBottom` })
+      .progress_indicator({ class: `sapUiSmallMarginBottom`, percentvalue: `40`, displayvalue: `Reduce container width until this text is truncated, then press the ProgressIndicator`, showvalue: true, state: `Success` })
+      .text({ text: `Invalid percent values`, class: `sapUiSmallMarginBottom` })
+      .progress_indicator({ class: `sapUiSmallMarginBottom`, percentvalue: `-20`, displayvalue: `-20`, showvalue: true, state: `None` })
+      .progress_indicator({ class: `sapUiSmallMarginBottom`, percentvalue: `120`, displayvalue: `120`, showvalue: true, state: `None` })
+      .text({ text: `Display Only Mode`, class: `sapUiSmallMarginBottom` })
+      .progress_indicator({ class: `sapUiSmallMarginBottom`, percentvalue: `30`, displayvalue: `30%`, showvalue: true, state: `None`, displayonly: true })
+      .progress_indicator({ class: `sapUiSmallMarginBottom`, percentvalue: `50`, showvalue: false, state: `Error`, displayonly: true })
+      .progress_indicator({ class: `sapUiSmallMarginBottom`, percentvalue: `99`, displayvalue: `0.99GB of 1GB`, showvalue: true, state: `Success`, displayonly: true })
+      .progress_indicator({ class: `sapUiSmallMarginBottom`, percentvalue: `25`, displayvalue: `25%`, showvalue: true, state: `Warning`, displayonly: true })
+      .progress_indicator({ class: `sapUiSmallMarginBottom`, percentvalue: `40`, displayvalue: `40%`, showvalue: true, state: `Information`, displayonly: true })
+      .text({ text: `Set the ProgressIndicator to 100% with animation`, class: `sapUiSmallMarginBottom` })
+      .progress_indicator({ class: `sapUiSmallMarginBottom`, percentvalue: this.client._bind(this.percent_animation), displayvalue: this.client._bind(this.display_animation), state: `Success`, displayonly: true })
+      .flex_box()
+      .button({ text: `Set to 0%`, class: `sapUiSmallMarginEnd`, press: this.client._event(`ANIMATION_0`) })
+      .button({ text: `Set to 100%`, press: this.client._event(`ANIMATION_100`) });
+    layout.text({ text: `Set the ProgressIndicator to 100% without animation`, class: `sapUiSmallMarginBottom` })
+      .progress_indicator({ class: `sapUiSmallMarginBottom`, percentvalue: this.client._bind(this.percent_no_animation), displayvalue: this.client._bind(this.display_no_animation), state: `Success`, displayonly: true })
+      .flex_box()
+      .button({ text: `Set to 0%`, class: `sapUiSmallMarginEnd`, press: this.client._event(`NO_ANIMATION_0`) })
+      .button({ text: `Set to 100%`, press: this.client._event(`NO_ANIMATION_100`) });
+    this.client.view_display(page.stringify());
+  }
 }
 
 module.exports = z2ui5_cl_demo_app_022;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_028.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_028.js
index 89750b3..b163214 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_028.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_028.js
@@ -36,7 +36,7 @@ class z2ui5_cl_demo_app_028 extends z2ui5_if_app {
   }
 
   start_timer() {
-    this.client.action.gen({ val: z2ui5_if_client.cs_event.start_timer, t_arg: [this.client._event(`TIMER_FINISHED`), `2000`] });
+    this.client.follow_up_action({ val: z2ui5_if_client.cs_event.start_timer, t_arg: [`TIMER_FINISHED`, `2000`] });
   }
 
   view_display() {
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_030.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_030.js
index 34fb187..8f990e5 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_030.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_030.js
@@ -3,63 +3,140 @@ const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
 const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
 
 class z2ui5_cl_demo_app_030 extends z2ui5_if_app {
-  t_tab = [];
+  t_products = [];
+  show_footer = false;
+  area_shrink_ratio = ``;
   client = null;
 
   async main(client) {
     this.client = z2ui5_cl_util.abap_copy(client);
     if (client.check_on_init()) {
-      this.t_tab = [{ title: `Peter`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `incompleted`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `working`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `working`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }, { title: `Peter`, info: `completed`, descr: `this is a description`, icon: `sap-icon://account` }];
-    } else if (client.check_on_event(`BUTTON_MSG_BOX`)) {
-      client.message_box_display(`this is a message box with a custom text`, `success`);
+      this.on_init();
+    } else if (client.check_on_event()) {
+      this.on_event();
     }
+  }
+
+  on_init() {
+    this.show_footer = true;
+    this.area_shrink_ratio = `1:1.6:1.6`;
+    this.t_products = [{ name: `Notebook Basic 15`, product_id: `HT-1000`, supplier_name: `Very Best Screens`, width: `30`, depth: `18`, height: `3`, dim_unit: `cm`, price: `956.00`, currency_code: `EUR` }, { name: `Notebook Basic 17`, product_id: `HT-1001`, supplier_name: `Very Best Screens`, width: `29`, depth: `17`, height: `3.1`, dim_unit: `cm`, price: `1,249.00`, currency_code: `EUR` }, { name: `Notebook Basic 18`, product_id: `HT-1002`, supplier_name: `Very Best Screens`, width: `28`, depth: `19`, height: `2.5`, dim_unit: `cm`, price: `1,570.00`, currency_code: `EUR` }, { name: `Notebook Basic 19`, product_id: `HT-1003`, supplier_name: `Smartcards`, width: `32`, depth: `21`, height: `4`, dim_unit: `cm`, price: `1,650.00`, currency_code: `EUR` }, { name: `ITelO Vault`, product_id: `HT-1007`, supplier_name: `Technocom`, width: `32`, depth: `22`, height: `3`, dim_unit: `cm`, price: `299.00`, currency_code: `EUR` }, { name: `Notebook Professional 15`, product_id: `HT-1010`, supplier_name: `Very Best Screens`, width: `33`, depth: `20`, height: `3`, dim_unit: `cm`, price: `1,999.00`, currency_code: `EUR` }, { name: `Notebook Professional 17`, product_id: `HT-1011`, supplier_name: `Very Best Screens`, width: `33`, depth: `23`, height: `2`, dim_unit: `cm`, price: `2,299.00`, currency_code: `EUR` }, { name: `ITelO Vault Net`, product_id: `HT-1020`, supplier_name: `Technocom`, width: `10`, depth: `1.8`, height: `17`, dim_unit: `cm`, price: `459.00`, currency_code: `EUR` }, { name: `ITelO Vault SAT`, product_id: `HT-1021`, supplier_name: `Technocom`, width: `11`, depth: `1.7`, height: `18`, dim_unit: `cm`, price: `149.00`, currency_code: `EUR` }, { name: `Comfort Easy`, product_id: `HT-1022`, supplier_name: `Technocom`, width: `84`, depth: `1.5`, height: `14`, dim_unit: `cm`, price: `1,679.00`, currency_code: `EUR` }, { name: `Comfort Senior`, product_id: `HT-1023`, supplier_name: `Technocom`, width: `80`, depth: `1.6`, height: `13`, dim_unit: `cm`, price: `512.00`, currency_code: `EUR` }, { name: `Ergo Screen E-I`, product_id: `HT-1030`, supplier_name: `Very Best Screens`, width: `37`, depth: `12`, height: `36`, dim_unit: `cm`, price: `230.00`, currency_code: `EUR` }, { name: `Ergo Screen E-II`, product_id: `HT-1031`, supplier_name: `Very Best Screens`, width: `40.8`, depth: `19`, height: `43`, dim_unit: `cm`, price: `285.00`, currency_code: `EUR` }, { name: `Ergo Screen E-III`, product_id: `HT-1032`, supplier_name: `Very Best Screens`, width: `40.8`, depth: `19`, height: `43`, dim_unit: `cm`, price: `345.00`, currency_code: `EUR` }, { name: `Flat Basic`, product_id: `HT-1035`, supplier_name: `Very Best Screens`, width: `39`, depth: `20`, height: `41`, dim_unit: `cm`, price: `399.00`, currency_code: `EUR` }, { name: `Flat Future`, product_id: `HT-1036`, supplier_name: `Very Best Screens`, width: `45`, depth: `26`, height: `46`, dim_unit: `cm`, price: `430.00`, currency_code: `EUR` }];
+    this.t_products.sort((a, b) => ((a.name > b.name ? 1 : a.name < b.name ? -1 : 0)));
     this.view_display();
   }
 
+  on_event() {
+    switch (this.client.get().EVENT) {
+      case `TOGGLE_AREA_PRIORITY`:
+        this.area_shrink_ratio = (this.area_shrink_ratio === `1:1.6:1.6` ? `1.6:1:1.6` : `1:1.6:1.6`);
+        this.client.view_model_update();
+        break;
+      case `TOGGLE_FOOTER`:
+        this.show_footer = (!(this.show_footer === true || this.show_footer === `X`));
+        this.client.view_model_update();
+        break;
+      case `OPEN_POPOVER`:
+        this.popover_display({ id: this.client.get_event_arg() });
+        break;
+    }
+  }
+
   view_display() {
     const view = z2ui5_cl_xml_view.factory();
     const page = view.shell()
-      .page({ title: `abap2UI5 - Dynamic Page`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() })
-      .dynamic_page({ showfooter: true });
-    const header_title = page.title({ ns: `f` }).get().dynamic_page_title();
+      .page({ title: `abap2UI5 - Sample: Dynamic Page Freestyle`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.f.DynamicPage/sample/sap.f.sample.DynamicPageFreeStyle` });
+    const dynamic_page = page.dynamic_page({ showfooter: this.client._bind(this.show_footer) });
+    const header_title = dynamic_page.title({ ns: `f` }).get().dynamic_page_title();
+    header_title._generic_property({ n: `areaShrinkRatio`, v: this.client._bind(this.area_shrink_ratio) });
     header_title.heading(`f`).title(`Header Title`);
-    header_title.expanded_content(`f`).label(`this is a subheading`);
-    header_title.snapped_content(`f`).label(`this is a subheading`);
-    header_title.actions(`f`)
+    header_title._generic({ name: `breadcrumbs`, ns: `f` })
+      .breadcrumbs()
+      .link({ text: `Home` })
+      .link({ text: `Page 1` })
+      .link({ text: `Page 2` })
+      .link({ text: `Page 3` })
+      .link({ text: `Page 4` })
+      .link({ text: `Page 5` });
+    header_title.expanded_content(`f`).label(`This is a subheading`);
+    header_title.snapped_content(`f`).label(`This is a subheading`);
+    header_title._generic({ name: `snappedTitleOnMobile`, ns: `f` }).title(`This is a subheading`);
+    header_title.content(`f`)
       .overflow_toolbar()
-      .overflow_toolbar_button({ icon: `sap-icon://edit`, text: `edit header`, type: `Emphasized`, tooltip: `edit` })
-      .overflow_toolbar_button({ icon: `sap-icon://pull-down`, text: `show section`, type: `Emphasized`, tooltip: `pull-down` })
-      .overflow_toolbar_button({ icon: `sap-icon://show`, text: `show state`, tooltip: `show` });
+      .generic_tag({ text: `SR`, status: `Error`, design: `StatusIconHidden`, press: this.client._event(`OPEN_POPOVER`, [`\${$source>/id}`]) })
+      .object_number({ number: `2`, unit: `M`, emphasized: false, state: `Error` });
+    header_title.actions(`f`)
+      .button({ text: `Edit`, type: `Emphasized`, press: this.client._event(`TOGGLE_AREA_PRIORITY`) })
+      .button({ text: `Delete`, type: `Transparent` })
+      .button({ text: `Copy`, type: `Transparent` })
+      .button({ text: `Toggle Footer`, type: `Transparent`, press: this.client._event(`TOGGLE_FOOTER`) })
+      .button({ icon: `sap-icon://action`, type: `Transparent` })
+      .button({ text: `Button with layoutData`, type: `Transparent`, press: this.client._event(`OPEN_POPOVER`, [`\${$source>/id}`]) })
+      .get()
+      .layout_data()
+      .overflow_toolbar_layout_data({ priority: `AlwaysOverflow`, closeoverflowoninteraction: false });
     header_title.navigation_actions()
       .button({ icon: `sap-icon://full-screen`, type: `Transparent` })
-      .button({ icon: `sap-icon://exit-full-screen`, type: `Transparent` })
       .button({ icon: `sap-icon://decline`, type: `Transparent` });
-    page.header()
+    dynamic_page.header()
       .dynamic_page_header(true)
-      .horizontal_layout()
-      .vertical_layout()
+      .horizontal_layout({ allowwrapping: true })
+      .vertical_layout({ class: `sapUiMediumMarginEnd` })
       .object_attribute({ title: `Location`, text: `Warehouse A` })
       .object_attribute({ title: `Halway`, text: `23L` })
       .object_attribute({ title: `Rack`, text: `34` })
       .get_parent()
       .vertical_layout()
-      .object_attribute({ title: `Location`, text: `Warehouse A` })
-      .object_attribute({ title: `Halway`, text: `23L` })
-      .object_attribute({ title: `Rack`, text: `34` })
+      .object_attribute({ title: `Availability` })
+      .object_status({ text: `In Stock`, state: `Success` });
+    dynamic_page.content(`f`)
+      .table({ id: `idProductsTable`, items: this.client._bind(this.t_products), sticky: `HeaderToolbar,ColumnHeaders`, inset: false, class: `sapFDynamicPageAlignContent`, width: `auto` })
+      .header_toolbar()
+      .toolbar()
+      .title({ text: `Products`, level: `H2` })
       .get_parent()
-      .vertical_layout()
-      .object_attribute({ title: `Location`, text: `Warehouse A` })
-      .object_attribute({ title: `Halway`, text: `23L` })
-      .object_attribute({ title: `Rack`, text: `34` });
-    const cont = page.content(`f`);
-    cont.list({ headertext: `List Output`, items: this.client._bind(this.t_tab) })
-      .standard_list_item({ title: `{TITLE}`, description: `{DESCR}`, icon: `{ICON}`, info: `{INFO}` });
-    page.footer(`f`)
+      .get_parent()
+      .columns()
+      .column(`12em`)
+      .text(`Product`)
+      .get_parent()
+      .column({ minscreenwidth: `Tablet`, demandpopin: true })
+      .text(`Supplier`)
+      .get_parent()
+      .column({ minscreenwidth: `Tablet`, demandpopin: true, halign: `End` })
+      .text(`Dimensions`)
+      .get_parent()
+      .column({ halign: `End` })
+      .text(`Price`)
+      .get_parent()
+      .get_parent()
+      .column_list_item()
+      .object_identifier({ title: `{NAME}`, text: `{PRODUCT_ID}` })
+      .get_parent()
+      .text(`{SUPPLIER_NAME}`)
+      .text(`{WIDTH} x {DEPTH} x {HEIGHT} {DIM_UNIT}`)
+      .object_number({ number: `{PRICE}`, unit: `{CURRENCY_CODE}` });
+    dynamic_page.footer(`f`)
       .overflow_toolbar()
-      .overflow_toolbar_button({ icon: `sap-icon://edit`, text: `edit header`, type: `Emphasized`, tooltip: `edit` })
-      .overflow_toolbar_button({ icon: `sap-icon://pull-down`, text: `show section`, type: `Emphasized`, tooltip: `pull-down` });
+      .toolbar_spacer()
+      .button({ type: `Accept`, text: `Accept` })
+      .button({ type: `Reject`, text: `Reject` });
     this.client.view_display(view.stringify());
   }
+
+  popover_display({ id } = {}) {
+    const popup = z2ui5_cl_xml_view.factory_popup();
+    popup.popover({ placement: `Bottom`, showheader: false, contentwidth: `300px` })
+      .card({ width: `100%` })
+      .header(`f`)
+      ._generic({ name: `NumericHeader`, ns: `card`, t_prop: [{ n: `title`, v: `Sales Revenue` }, { n: `subtitle`, v: `Sales revenue in the current quarter` }, { n: `unitOfMeasurement`, v: `EUR` }, { n: `number`, v: `2.16` }, { n: `scale`, v: `M` }, { n: `trend`, v: `Down` }, { n: `state`, v: `Error` }] })
+      ._generic({ name: `sideIndicators`, ns: `card` })
+      ._generic({ name: `NumericSideIndicator`, ns: `card`, t_prop: [{ n: `number`, v: `4.74` }, { n: `unit`, v: `M` }, { n: `title`, v: `Target` }] })
+      .get_parent()
+      ._generic({ name: `NumericSideIndicator`, ns: `card`, t_prop: [{ n: `number`, v: `-54.49` }, { n: `unit`, v: `%` }, { n: `title`, v: `Deviation` }] });
+    this.client.popover_display(popup.stringify(), id);
+  }
 }
 
 module.exports = z2ui5_cl_demo_app_030;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_035.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_035.js
deleted file mode 100644
index 024e9d0..0000000
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_035.js
+++ /dev/null
@@ -1,188 +0,0 @@
-const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
-const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
-const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
-
-class z2ui5_cl_demo_app_035 extends z2ui5_if_app {
-  mv_type = ``;
-  mv_path = ``;
-  mv_editor = ``;
-  mv_check_editable = false;
-  lt_types = [];
-  client = null;
-
-  view_display() {
-    const view = z2ui5_cl_xml_view.factory();
-    const page = view.shell()
-      .page({ title: `abap2UI5 - File Editor`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() });
-    const temp = page.simple_form({ title: `File`, editable: true })
-      .content(`form`)
-      .label(`path`)
-      .input(this.client._bind_edit(this.mv_path))
-      .label(`Option`);
-    this.lt_types = {};
-    const temp3 = temp.input({ value: this.client._bind_edit(this.mv_type), suggestionitems: this.client._bind(this.lt_types) })
-      .get();
-    temp3.suggestion_items().list_item({ text: `{N}`, additionaltext: `{V}` });
-    temp.label(``)
-      .button({ text: `Download`, press: this.client._event(`DB_LOAD`), icon: `sap-icon://download-from-cloud` });
-    page.code_editor({ type: this.client._bind_edit(this.mv_type), editable: this.client._bind(this.mv_check_editable), value: this.client._bind_edit(this.mv_editor) });
-    page.footer()
-      .overflow_toolbar()
-      .button({ text: `Clear`, press: this.client._event(`CLEAR`), icon: `sap-icon://delete` })
-      .toolbar_spacer()
-      .button({ text: `Edit`, press: this.client._event(`EDIT`), icon: `sap-icon://edit` })
-      .button({ text: `Upload`, press: this.client._event(`DB_SAVE`), type: `Emphasized`, icon: `sap-icon://upload-to-cloud`, enabled: (this.mv_editor) });
-    this.client.view_display(page.stringify());
-  }
-
-  async main(client) {
-    this.client = z2ui5_cl_util.abap_copy(client);
-    if (client.check_on_init()) {
-      this.mv_path = `../../demo/text`;
-      this.mv_type = `plain_text`;
-      this.view_display();
-    }
-    switch (client.get().EVENT) {
-      case `DB_LOAD`:
-        this.mv_editor = (String(this.mv_path).toLowerCase().includes(String(`abap`).toLowerCase()) ? this.read_abap() : String(this.mv_path).toLowerCase().includes(String(`json`).toLowerCase()) ? this.read_json() : String(this.mv_path).toLowerCase().includes(String(`yaml`).toLowerCase()) ? this.read_yaml() : String(this.mv_path).toLowerCase().includes(String(`text`).toLowerCase()) ? this.read_text() : String(this.mv_path).toLowerCase().includes(String(`js`).toLowerCase()) ? this.read_js() : null);
-        client.message_toast_display(`Download successful`);
-        client.view_model_update();
-        break;
-      case `DB_SAVE`:
-        client.message_box_display(`Upload successful. File saved!`, `success`);
-        break;
-      case `EDIT`:
-        this.mv_check_editable = (!(this.mv_check_editable === true || this.mv_check_editable === `X`));
-        client.view_model_update();
-        break;
-      case `CLEAR`:
-        this.mv_editor = ``;
-        break;
-    }
-  }
-
-  read_abap() {
-    let r_result = ``;
-    let sy_subrc = 0;
-    r_result = `METHOD SELECT_FILES.` + `
-` + `
-` + `    DATA: LV_RET_CODE TYPE I,` + `
-` + `          LV_USR_AXN  TYPE I.` + `
-` + `
-` + `    CL_GUI_FRONTEND_SERVICES=>FILE_OPEN_DIALOG(` + `
-` + `      EXPORTING` + `
-` + `        WINDOW_TITLE            = 'Select file'` + `
-` + `        MULTISELECTION          = 'X'` + `
-` + `      CHANGING` + `
-` + `        FILE_TABLE              = ME->PT_FILETAB` + `
-` + `        RC                      = LV_RET_CODE` + `
-` + `        USER_ACTION             = LV_USR_AXN` + `
-` + `      EXCEPTIONS` + `
-` + `        FILE_OPEN_DIALOG_FAILED = 1` + `
-` + `        CNTL_ERROR              = 2` + `
-` + `        ERROR_NO_GUI            = 3` + `
-` + `        NOT_SUPPORTED_BY_GUI    = 4` + `
-` + `        OTHERS                  = 5` + `
-` + `           ).` + `
-` + `    IF SY-SUBRC <> 0 OR` + `
-` + `       LV_USR_AXN = CL_GUI_FRONTEND_SERVICES=>ACTION_CANCEL.` + `
-` + `      RAISE EX_FILE_SEL_ERR.` + `
-` + `    ENDIF.` + `
-` + `
-` + `  ENDMETHOD.   `;
-    return r_result;
-  }
-
-  read_json() {
-    let r_result = ``;
-    r_result = `{` + `
-` + `    "quiz": {` + `
-` + `        "sport": {` + `
-` + `            "q1": {` + `
-` + `                "test" : false,` + `
-` + `                "question": "Which one is correct team name in NBA?",` + `
-` + `                "options": [` + `
-` + `                    "New York Bulls",` + `
-` + `                    "Los Angeles Kings",` + `
-` + `                    "Golden State Warriros",` + `
-` + `                    "Huston Rocket"` + `
-` + `                ],` + `
-` + `                "answer": "Huston Rocket"` + `
-` + `            }` + `
-` + `        },` + `
-` + `        "maths": {` + `
-` + `            "q1": {` + `
-` + `                "question": "5 + 7 = ?",` + `
-` + `                "options": [` + `
-` + `                    "10",` + `
-` + `                    "11",` + `
-` + `                    "12",` + `
-` + `                    "13"` + `
-` + `                ],` + `
-` + `                "answer": "12"` + `
-` + `            },` + `
-` + `            "q2": {` + `
-` + `                "question": true,` + `
-` + `                "options": [` + `
-` + `                    "1",` + `
-` + `                    "2",` + `
-` + `                    "3",` + `
-` + `                    "4"` + `
-` + `                ],` + `
-` + `                "answer": 487829` + `
-` + `            }` + `
-` + `        }` + `
-` + `    }` + `
-` + `}`;
-    return r_result;
-  }
-
-  read_js() {
-    let r_result = ``;
-    r_result = `function showAlert() {` + `
-` + `    alert("Alert from JS file");` + `
-` + `}` + `
-` + `
-` + `function updateHeading() {` + `
-` + `    document.getElementById('heading').innerHTML = 'Heading changed with JS';` + `
-` + `}`;
-    return r_result;
-  }
-
-  read_yaml() {
-    let r_result = ``;
-    r_result = `# Employee records` + `
-` + `- martin:` + `
-` + `    name: Martin Developer` + `
-` + `    job: Developer` + `
-` + `    skills:` + `
-` + `      - python` + `
-` + `      - perl` + `
-` + `      - pascal` + `
-` + `- tabitha:` + `
-` + `    name: Tabitha Bitumen` + `
-` + `    job: Developer` + `
-` + `    skills:` + `
-` + `      - lisp` + `
-` + `      - fortran` + `
-` + `      - erlang`;
-    return r_result;
-  }
-
-  read_text() {
-    let r_result = ``;
-    r_result = `TXT test file` + `
-` + `Purpose: Provide example of this file type` + `
-` + `Document file type: TXT` + `
-` + `Version: 1.0` + `
-` + `Remark:` + `
-` + `
-` + `Example content:` + `
-` + `The names "John Doe" for males, "Jane Doe" or "Jane Roe" for females, or "Jonnie Doe" and "Janie Doe" for children, or just ` + ` "Doe" non-gender-specifically are used as placeholder names for a party whose true identity is unknown or must ` + `be withheld in a legal action, case, or discussion. The names are also used to refer to a corpse or hospital patient whose ` + `identity is unknown. This practice is widely used in the United States and Canada, but is rarely used in other ` + `English-speaking countries including the United Kingdom itself, from where the use of "John Doe" in a legal context ` + `originates. The names Joe Bloggs or John Smith are used in the UK instead, as well as in Australia and New Zealand.` + `
-` + `
-` + `John Doe is sometimes used to refer to a typical male in other contexts as well, in a similar manner to John Q. Public,` + ` known in Great Britain as Joe Public, John Smith or Joe Bloggs. For example, the first name listed on a form is often ` + `John Doe, along with a fictional address or other fictional information to provide an example of how to fill in the form` + `. The name is also used frequently in popular culture, for example in the Frank Capra film Meet John Doe. John Doe was ` + `also the name of a 2002 American television series.`;
-    return r_result;
-  }
-}
-
-module.exports = z2ui5_cl_demo_app_035;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_038.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_038.js
deleted file mode 100644
index f3d70cb..0000000
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_038.js
+++ /dev/null
@@ -1,65 +0,0 @@
-const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
-const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
-const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
-
-class z2ui5_cl_demo_app_038 extends z2ui5_if_app {
-  t_msg = [];
-  client = null;
-
-  popover_display({ id } = {}) {
-    const popup = z2ui5_cl_xml_view.factory_popup();
-    popup.message_popover({ items: this.client._bind(this.t_msg), groupitems: true, placement: `Top`, initiallyexpanded: true, beforeclose: this.client._event(`POPOVER_CLOSE`) })
-      .message_item({ type: `{TYPE}`, title: `{TITLE}`, subtitle: `{SUBTITLE}`, description: `{DESCRIPTION}`, groupname: `{GROUP}` });
-    this.client.popover_display(popup.stringify(), id);
-  }
-
-  popup_display() {
-    let popup = z2ui5_cl_xml_view.factory_popup();
-    popup = popup.dialog({ title: `Messages`, contentheight: `50%`, contentwidth: `50%`, verticalscrolling: false, afterclose: this.client._event_client(this.client.cs_event.popup_close) });
-    popup.message_view({ items: this.client._bind(this.t_msg), groupitems: true })
-      .message_item({ type: `{TYPE}`, title: `{TITLE}`, subtitle: `{SUBTITLE}`, description: `{DESCRIPTION}`, groupname: `{GROUP}` });
-    popup.buttons()
-      .button({ id: `test2`, text: `test`, press: this.client._event(`TEST`) })
-      .button({ text: `Continue`, press: this.client._event_client(this.client.cs_event.popup_close), type: `Emphasized` });
-    this.client.popup_display(popup.stringify());
-  }
-
-  view_display() {
-    const view = z2ui5_cl_xml_view.factory();
-    const page = view.shell()
-      .page({ title: `abap2UI5 - Message View`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() });
-    page.button({ text: `Messages in Popup`, press: this.client._event(`POPUP`) });
-    page.message_view({ items: this.client._bind(this.t_msg), groupitems: true })
-      .message_item({ type: `{TYPE}`, title: `{TITLE}`, subtitle: `{SUBTITLE}`, description: `{DESCRIPTION}`, groupname: `{GROUP}` });
-    page.footer()
-      .overflow_toolbar()
-      .button({ id: `test`, text: `Messages (6)`, press: this.client._event(`POPOVER`), type: `Emphasized` })
-      .toolbar_spacer()
-      .button({ text: `Send to Server`, press: this.client._event(`BUTTON_SEND`), type: `Success` });
-    this.client.view_display(view.stringify());
-  }
-
-  async main(client) {
-    this.client = z2ui5_cl_util.abap_copy(client);
-    if (client.check_on_init()) {
-      this.t_msg = [{ description: `descr`, subtitle: `subtitle`, title: `title`, type: `Error`, group: `group 01` }, { description: `descr`, subtitle: `subtitle`, title: `title`, type: `Information`, group: `group 01` }, { description: `descr`, subtitle: `subtitle`, title: `title`, type: `Information`, group: `group 02` }, { description: `descr`, subtitle: `subtitle`, title: `title`, type: `Success`, group: `group 03` }];
-      this.view_display();
-    }
-    switch (client.get().EVENT) {
-      case `POPOVER_CLOSE`:
-        client.popover_destroy();
-        break;
-      case `POPUP`:
-        this.popup_display();
-        break;
-      case `TEST`:
-        this.popover_display({ id: `test2` });
-        break;
-      case `POPOVER`:
-        this.popover_display({ id: `test` });
-        break;
-    }
-  }
-}
-
-module.exports = z2ui5_cl_demo_app_038;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_041.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_041.js
deleted file mode 100644
index abf7706..0000000
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_041.js
+++ /dev/null
@@ -1,33 +0,0 @@
-const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
-const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
-
-class z2ui5_cl_demo_app_041 extends z2ui5_if_app {
-  screen = { step_val_01: `4`, step_val_02: `10` };
-
-  view_display({ client } = {}) {
-    const page = z2ui5_cl_xml_view.factory()
-      .shell()
-      .page({ title: `abap2UI5 - Step Input Example`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
-    const layout = page.vertical_layout({ class: `sapUiContentPadding`, width: `100%` });
-    layout.label(`StepInput`)
-      .step_input({ value: client._bind_edit(this.screen.step_val_01, { name: `screen-step_val_01` }), step: `2`, min: `0`, max: `20` })
-      .step_input({ value: client._bind_edit(this.screen.step_val_02, { name: `screen-step_val_02` }), step: `10`, min: `0`, max: `100` })
-      .button({ text: `OK`, press: client._event(`POST`) });
-    client.view_display(page.stringify());
-  }
-
-  on_event({ client } = {}) {
-    if (client.check_on_event(`POST`)) {
-      client.message_box_display(`success - values sent to the server`);
-    }
-  }
-
-  async main(client) {
-    if (client.check_on_init()) {
-      this.view_display({ client: client });
-    }
-    this.on_event({ client: client });
-  }
-}
-
-module.exports = z2ui5_cl_demo_app_041;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_045.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_045.js
new file mode 100644
index 0000000..e14c7ee
--- /dev/null
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_045.js
@@ -0,0 +1,73 @@
+const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
+const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
+
+class z2ui5_cl_demo_app_045 extends z2ui5_if_app {
+  t_tab = [];
+  mv_info_filter = ``;
+
+  refresh_data() {
+    let ls_row;
+    for (let sy_index = 1; sy_index <= 1000; sy_index++) {
+      ls_row = { count: sy_index, value: `red`, info: (sy_index < 50 ? `completed` : `uncompleted`), descr: `this is a description`, checkbox: true };
+      this.t_tab.push(ls_row);
+    }
+  }
+
+  async main(client) {
+    if (client.check_on_init()) {
+      this.refresh_data();
+    }
+    switch (client.get().EVENT) {
+      case `FILTER_INFO`:
+        this.refresh_data();
+        if (this.mv_info_filter !== ``) {
+          for (let _i = this.t_tab.length - 1; _i >= 0; _i--) { const row = this.t_tab[_i]; if (row.info !== this.mv_info_filter) this.t_tab.splice(_i, 1); }
+        }
+        break;
+      case `BUTTON_POST`:
+        client.message_box_display(`button post was pressed`);
+        break;
+    }
+    const page = z2ui5_cl_xml_view.factory()
+      .shell()
+      .page({ title: `abap2UI5 - Scroll Container with Table and Toolbar`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() })
+      .header_content()
+      .link()
+      .get_parent();
+    page.simple_form({ title: `Form Title`, editable: true })
+      .content(`form`)
+      .title(`Filter`)
+      .label(`info`)
+      .input(client._bind_edit(this.mv_info_filter))
+      .button({ text: `filter`, press: client._event(`FILTER_INFO`) });
+    const tab = page.scroll_container({ height: `70%`, vertical: true })
+      .table({ growing: true, growingthreshold: `20`, growingscrolltoload: true, items: client._bind(this.t_tab), sticky: `ColumnHeaders,HeaderToolbar` });
+    tab.header_toolbar().overflow_toolbar().toolbar_spacer();
+    tab.columns()
+      .column()
+      .text(`Color`)
+      .get_parent()
+      .column()
+      .text(`Info`)
+      .get_parent()
+      .column()
+      .text(`Description`)
+      .get_parent()
+      .column()
+      .text(`Checkbox`)
+      .get_parent()
+      .column()
+      .text(`Counter`);
+    tab.items()
+      .column_list_item()
+      .cells()
+      .text(`{VALUE}`)
+      .text(`{INFO}`)
+      .text(`{DESCR}`)
+      .checkbox({ selected: `{CHECKBOX}`, enabled: false })
+      .text(`{COUNT}`);
+    client.view_display(page.stringify());
+  }
+}
+
+module.exports = z2ui5_cl_demo_app_045;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_047.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_047.js
index b6f6ac5..629c0f0 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_047.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_047.js
@@ -14,6 +14,8 @@ class z2ui5_cl_demo_app_047 extends z2ui5_if_app {
   mt_tab = [];
 
   async main(client) {
+    let sy_datum = "";
+    let sy_uzeit = "";
     if (client.check_on_init()) {
       this.date = z2ui5_cl_util.abap_copy(sy_datum);
       this.time = z2ui5_cl_util.abap_copy(sy_uzeit);
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_048.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_048.js
index 71dcb7f..5f8f0b1 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_048.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_048.js
@@ -13,7 +13,7 @@ class z2ui5_cl_demo_app_048 extends z2ui5_if_app {
     }
     switch (client.get().EVENT) {
       case `EDIT`:
-        lv_row_title = client.get_event_arg(1);
+        lv_row_title = client.get_event_arg();
         client.message_box_display(`EDIT - ${lv_row_title}`);
         break;
       case `SELCHANGE`:
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_051.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_051.js
index 1d0a9b1..eb028f7 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_051.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_051.js
@@ -8,6 +8,8 @@ class z2ui5_cl_demo_app_051 extends z2ui5_if_app {
     const page = z2ui5_cl_xml_view.factory()
       .shell()
       .page({ title: `abap2UI5 - Label Example`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.Label/sample/sap.m.sample.Label` });
     const layout = page.vertical_layout({ class: `sapUiContentPadding`, width: `100%` });
     layout.label({ text: `Input mandatory`, labelfor: `input1` });
     layout.input({ id: `input1`, required: true });
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_052.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_052.js
index 26587a0..4d34f69 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_052.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_052.js
@@ -10,8 +10,8 @@ class z2ui5_cl_demo_app_052 extends z2ui5_if_app {
 
   popover_display({ id } = {}) {
     const lo_popover = z2ui5_cl_xml_view.factory_popup();
-    lo_popover.popover({ placement: `Right`, title: `abap2UI5 - Popover - ${this.mv_product}`, contentwidth: `50%` })
-      .simple_form({ editable: true })
+    lo_popover.popover({ placement: `Right`, title: `abap2UI5 - Popover - ${this.mv_product}`, contentwidth: `20rem` })
+      .simple_form({ editable: false, layout: `ColumnLayout` })
       .content(`form`)
       .label(`Product`)
       .text(this.mv_product)
@@ -65,7 +65,7 @@ class z2ui5_cl_demo_app_052 extends z2ui5_if_app {
       case `POPOVER_DETAIL`:
         this.mv_check_popover = true;
         this.mv_product = client.get_event_arg(2);
-        this.popover_display({ id: client.get_event_arg(1) });
+        this.popover_display({ id: client.get_event_arg() });
         break;
     }
   }
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_056.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_056.js
deleted file mode 100644
index fcaf5a7..0000000
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_056.js
+++ /dev/null
@@ -1,114 +0,0 @@
-const z2ui5_cl_pop_get_range = require("abap2UI5/z2ui5_cl_pop_get_range");
-const z2ui5_cl_sample_context = require("./z2ui5_cl_sample_context");
-const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
-const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
-const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
-
-class z2ui5_cl_demo_app_056 extends z2ui5_if_app {
-  mt_table = [];
-  mt_token = [];
-  mt_tokens_added = [];
-  mt_tokens_removed = [];
-  client = null;
-  mt_range = null;
-
-  on_event() {
-    let sy_tabix = 0;
-    switch (this.client.get().EVENT) {
-      case `BUTTON_START`:
-        this.set_data();
-        this.client.view_model_update();
-        break;
-      case `UPDATE_TOKENS`:
-        sy_tabix = 0;
-        for (const ls_token of this.mt_tokens_removed) {
-          sy_tabix++;
-          for (let _i = this.mt_token.length - 1; _i >= 0; _i--) { const row = this.mt_token[_i]; if (row.key === ls_token.key) this.mt_token.splice(_i, 1); }
-        }
-        sy_tabix = 0;
-        for (const ls_token of this.mt_tokens_added) {
-          sy_tabix++;
-          this.mt_token.push({ key: ls_token.key, text: ls_token.text, visible: true, editable: true });
-        }
-        this.mt_tokens_removed = {};
-        this.mt_tokens_added = {};
-        this.mt_range = z2ui5_cl_sample_context.filter_get_range_t_by_token_t(this.mt_token);
-        this.set_data();
-        this.client.view_model_update();
-        break;
-      case `FILTER_VALUE_HELP`:
-        this.client.nav_app_call(z2ui5_cl_pop_get_range.factory(this.mt_range));
-        break;
-    }
-  }
-
-  set_data() {
-    this.mt_table = [{ product: `table`, create_date: `01.01.2023`, create_by: `Peter`, storage_location: `AREA_001`, quantity: 400 }, { product: `chair`, create_date: `01.01.2023`, create_by: `Peter`, storage_location: `AREA_001`, quantity: 400 }, { product: `sofa`, create_date: `01.01.2023`, create_by: `Peter`, storage_location: `AREA_001`, quantity: 400 }, { product: `computer`, create_date: `01.01.2023`, create_by: `Peter`, storage_location: `AREA_001`, quantity: 400 }, { product: `oven`, create_date: `01.01.2023`, create_by: `Peter`, storage_location: `AREA_001`, quantity: 400 }, { product: `table2`, create_date: `01.01.2023`, create_by: `Peter`, storage_location: `AREA_001`, quantity: 400 }];
-    for (let _i = this.mt_table.length - 1; _i >= 0; _i--) { const row = this.mt_table[_i]; if (!((($v, $r) => !$r || !$r.length || $r.some(($x) => ($x.option === `BT` ? $v >= $x.low && $v <= $x.high : $x.option === `NE` ? $v !== $x.low : $x.option === `CP` ? String($v).includes(String($x.low).replace(/\*/g, "")) : $v === $x.low)))(row.product, this.mt_range))) this.mt_table.splice(_i, 1); }
-  }
-
-  view_display() {
-    let view = z2ui5_cl_xml_view.factory();
-    view = view.shell()
-      .page({ id: `page_main`, title: `abap2UI5 - Select-Options`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() })
-      .get_parent();
-    const vbox = view.vbox();
-    vbox._z2ui5()
-      .multiinput_ext({ addedtokens: this.client._bind_edit(this.mt_tokens_added), removedtokens: this.client._bind_edit(this.mt_tokens_removed), change: this.client._event(`UPDATE_TOKENS`), multiinputid: `MultiInput` });
-    const tab = vbox.table(this.client._bind(this.mt_table))
-      .header_toolbar()
-      .overflow_toolbar()
-      .text(`Product:`)
-      .multi_input({ width: `30%`, id: `MultiInput`, tokens: this.client._bind(this.mt_token), showclearicon: true, valuehelprequest: this.client._event(`FILTER_VALUE_HELP`) })
-      .item({ key: `{KEY}`, text: `{TEXT}` })
-      .tokens()
-      .token({ key: `{KEY}`, text: `{TEXT}`, visible: `{VISIBLE}`, selected: `{SELKZ}`, editable: `{EDITABLE}` })
-      .get_parent()
-      .get_parent()
-      .toolbar_spacer()
-      .button({ text: `Go`, press: this.client._event(`BUTTON_START`), type: `Emphasized` })
-      .get_parent()
-      .get_parent();
-    const lo_columns = tab.columns();
-    lo_columns.column().text(`Product`);
-    lo_columns.column().text(`Date`);
-    lo_columns.column().text(`Name`);
-    lo_columns.column().text(`Location`);
-    lo_columns.column().text(`Quantity`);
-    const lo_cells = tab.items().column_list_item();
-    lo_cells.text(`{PRODUCT}`);
-    lo_cells.text(`{CREATE_DATE}`);
-    lo_cells.text(`{CREATE_BY}`);
-    lo_cells.text(`{STORAGE_LOCATION}`);
-    lo_cells.text(`{QUANTITY}`);
-    this.client.view_display(view.stringify());
-  }
-
-  async main(client) {
-    let lo_value_help;
-    this.client = z2ui5_cl_util.abap_copy(client);
-    if (client.check_on_init()) {
-      this.view_display();
-      return;
-    }
-    if (((client.get().CHECK_ON_NAVIGATED) === true || (client.get().CHECK_ON_NAVIGATED) === `X`)) {
-      try {
-        lo_value_help = (client.get_app(client.get().S_DRAFT.ID_PREV_APP));
-        if (!((lo_value_help.result().check_confirmed) === true || (lo_value_help.result().check_confirmed) === `X`)) {
-          return;
-        }
-        this.mt_range = lo_value_help.result().t_range;
-        this.mt_token = z2ui5_cl_sample_context.filter_get_token_t_by_range_t(this.mt_range);
-        this.set_data();
-        client.view_model_update();
-      } catch (error) {
-      }
-      return;
-    }
-    if ((client.get().EVENT)) {
-      this.on_event();
-    }
-  }
-}
-
-module.exports = z2ui5_cl_demo_app_056;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_059.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_059.js
index 857f86d..3f33b51 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_059.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_059.js
@@ -21,7 +21,7 @@ class z2ui5_cl_demo_app_059 extends z2ui5_if_app {
     this.client = z2ui5_cl_util.abap_copy(this.client);
     if (this.client.check_on_event(`BUTTON_SEARCH`)) {
       this.set_data();
-      z2ui5_cl_sample_context.itab_filter_by_val({ val: this.client.get_event_arg(1), tab: this.mt_table });
+      z2ui5_cl_sample_context.itab_filter_by_val({ val: this.client.get_event_arg(), tab: this.mt_table });
       this.client.view_model_update();
     }
   }
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_062.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_062.js
deleted file mode 100644
index 5f1fe61..0000000
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_062.js
+++ /dev/null
@@ -1,26 +0,0 @@
-const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
-const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
-
-class z2ui5_cl_demo_app_062 extends z2ui5_if_app {
-  view_display({ client } = {}) {
-    const page = z2ui5_cl_xml_view.factory()
-      .shell()
-      .page({ title: `abap2UI5 - Generic Tag Example`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
-    const layout = page.vertical_layout({ class: `sapUiContentPadding`, width: `100%` });
-    layout.generic_tag({ arialabelledby: `genericTagLabel`, text: `Project Cost`, design: `StatusIconHidden`, status: `Error`, class: `sapUiSmallMarginBottom` })
-      .object_number({ state: `Error`, emphasized: `false`, number: `3.5M`, unit: `EUR` });
-    layout.generic_tag({ arialabelledby: `genericTagLabel`, text: `Project Cost`, design: `StatusIconHidden`, status: `Success`, class: `sapUiSmallMarginBottom` })
-      .object_number({ state: `Success`, emphasized: `false`, number: `3.5M`, unit: `EUR` });
-    layout.generic_tag({ arialabelledby: `genericTagLabel`, text: `Input`, design: `StatusIconHidden`, class: `sapUiSmallMarginBottom` })
-      .object_number({ emphasized: `true`, number: `3.5M`, unit: `EUR` });
-    client.view_display(page.stringify());
-  }
-
-  async main(client) {
-    if (client.check_on_init()) {
-      this.view_display({ client: client });
-    }
-  }
-}
-
-module.exports = z2ui5_cl_demo_app_062;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_064.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_064.js
index b98a8cd..4c68f1d 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_064.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_064.js
@@ -47,7 +47,7 @@ class z2ui5_cl_demo_app_064 extends z2ui5_if_app {
       this.client.message_toast_display(`loaded`);
       // TODO(abap2js): WAIT UP TO 2 SECONDS.
       if ((this.mv_check_active === true || this.mv_check_active === `X`)) {
-        this.client.action.gen({ val: z2ui5_if_client.cs_event.start_timer, t_arg: [this.client._event(`LOAD`), `0`] });
+        this.client.follow_up_action({ val: z2ui5_if_client.cs_event.start_timer, t_arg: [`LOAD`, `0`] });
       }
       this.client.view_model_update();
     }
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_065.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_065.js
index ac4fc7c..b3ecac7 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_065.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_065.js
@@ -4,6 +4,7 @@ const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
 class z2ui5_cl_demo_app_065 extends z2ui5_if_app {
   mv_input_main = ``;
   mv_input_nest = ``;
+  mv_count = 0;
 
   async main(client) {
     const lo_view = z2ui5_cl_xml_view.factory();
@@ -16,11 +17,11 @@ class z2ui5_cl_demo_app_065 extends z2ui5_if_app {
       .button({ text: `Rerender all`, press: client._event(`ALL`) })
       .button({ text: `Rerender Main without nest`, press: client._event(`MAIN`) })
       .button({ text: `Rerender only nested view`, press: client._event(`NEST`) })
+      .button({ text: `Update only nested MODEL (nest_view_model_update)`, press: client._event(`NEST_MODEL`) })
       .input(client._bind_edit(this.mv_input_main));
     const lo_view_nested = z2ui5_cl_xml_view.factory()
       .page(`Nested View`)
       .button({ text: `event`, press: client._event(`TEST`) })
-      .button({ text: `frontend event`, press: client._event_client(client.cs_event.open_new_tab, [`https://github.com/abap2UI5/abap2UI5/`]) })
       .input(client._bind_edit(this.mv_input_nest));
     if (client.check_on_init()) {
       client.view_display(lo_view.stringify());
@@ -39,6 +40,11 @@ class z2ui5_cl_demo_app_065 extends z2ui5_if_app {
       case `NEST`:
         client.nest_view_display(lo_view_nested.stringify(), `test`, `addContent`);
         break;
+      case `NEST_MODEL`:
+        this.mv_count = this.mv_count + 1;
+        this.mv_input_nest = `nest model updated #${this.mv_count}`;
+        client.nest_view_model_update();
+        break;
     }
   }
 }
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_068.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_068.js
deleted file mode 100644
index b0d72e5..0000000
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_068.js
+++ /dev/null
@@ -1,53 +0,0 @@
-const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
-const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
-const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
-
-class z2ui5_cl_demo_app_068 extends z2ui5_if_app {
-  prodh_nodes = null;
-  client = null;
-
-  popup_display_tree_select() {
-    const dialog = z2ui5_cl_xml_view.factory_popup()
-      .dialog({ title: `Choose Product here...`, contentheight: `50%`, contentwidth: `50%` });
-    dialog.tree({ mode: `SingleSelectMaster`, items: this.client._bind_edit(this.prodh_nodes) })
-      .items()
-      .standard_tree_item({ selected: `{IS_SELECTED}`, title: `{TEXT}` });
-    dialog.buttons()
-      .button({ text: `Continue`, icon: `sap-icon://accept`, type: `Accept`, press: this.client._event(`CONTINUE`) })
-      .button({ text: `Cancel`, icon: `sap-icon://decline`, type: `Reject`, press: this.client._event(`CANCEL`) });
-    this.client.popup_display(dialog.stringify());
-  }
-
-  view_display({ client } = {}) {
-    const page = z2ui5_cl_xml_view.factory()
-      .shell()
-      .page({ title: `abap2UI5 - Popup Tree select Entry`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
-    client.view_display(page.button({ text: `Open Popup here...`, press: client._event(`POPUP_TREE`) }).stringify());
-  }
-
-  on_init() {
-    this.prodh_nodes = [{ text: `Machines`, prodh: `00100`, nodes: [{ text: `Pumps`, prodh: `0010000100`, nodes: [{ text: `Pump 001`, prodh: `001000010000000100` }, { text: `Pump 002`, prodh: `001000010000000105` }] }] }, { text: `Paints`, prodh: `00110`, nodes: [{ text: `Gloss paints`, prodh: `0011000105`, nodes: [{ text: `Paint 001`, prodh: `001100010500000100` }, { text: `Paint 002`, prodh: `001100010500000105` }] }] }];
-  }
-
-  async main(client) {
-    this.client = z2ui5_cl_util.abap_copy(client);
-    if (client.check_on_init()) {
-      this.on_init();
-      this.view_display({ client: client });
-    }
-    switch (client.get().EVENT) {
-      case `POPUP_TREE`:
-        this.popup_display_tree_select();
-        break;
-      case `CONTINUE`:
-        client.popup_destroy();
-        client.message_box_display(`Selected entry is set in the backend`);
-        break;
-      case `CANCEL`:
-        client.popup_destroy();
-        break;
-    }
-  }
-}
-
-module.exports = z2ui5_cl_demo_app_068;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_069.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_069.js
deleted file mode 100644
index 0dc0c71..0000000
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_069.js
+++ /dev/null
@@ -1,69 +0,0 @@
-const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
-const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
-const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
-
-class z2ui5_cl_demo_app_069 extends z2ui5_if_app {
-  mt_tree = [];
-  mv_check_enabled_01 = true;
-  mv_check_enabled_02 = false;
-  client = null;
-
-  view_display_app_01() {
-    const lo_view_nested = z2ui5_cl_xml_view.factory();
-    const page = lo_view_nested.page(`APP_01`);
-    page.button({ text: `Update this view`, press: this.client._event(`UPDATE_DETAIL`) });
-    this.client.nest_view_display(lo_view_nested.stringify(), `test`, `addMidColumnPage`, `removeAllMidColumnPages`);
-  }
-
-  view_display_app_02() {
-    const lo_view_nested = z2ui5_cl_xml_view.factory();
-    const page = lo_view_nested.page(`APP_02`);
-    page.button({ text: `Update this view`, press: this.client._event(`UPDATE_DETAIL`) }).input();
-    page.button({ text: `button 01`, press: this.client._event(`NEST_TEST`), enabled: this.client._bind(this.mv_check_enabled_01) });
-    page.button({ text: `button 01`, press: this.client._event(`NEST_TEST`), enabled: this.client._bind(this.mv_check_enabled_01) });
-    page.button({ text: `button 02`, press: this.client._event(`NEST_TEST`), enabled: this.client._bind(this.mv_check_enabled_02) });
-    this.client.nest_view_display(lo_view_nested.stringify(), `test`, `addMidColumnPage`, `removeAllMidColumnPages`);
-  }
-
-  view_display_master() {
-    const view = z2ui5_cl_xml_view.factory();
-    const page = view.shell()
-      .page({ title: `abap2UI5 - Master-Detail View with Nested Views`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() });
-    const lr_master = page.flexible_column_layout({ layout: `TwoColumnsBeginExpanded`, id: `test` })
-      .begin_column_pages();
-    lr_master.tree(this.client._bind(this.mt_tree))
-      .items()
-      .standard_tree_item({ type: `Active`, title: `{TEXT}`, press: this.client._event(`EVENT_ITEM`, [`\${TEXT}`]) });
-    this.client.view_display(page.stringify());
-  }
-
-  async main(client) {
-    this.client = z2ui5_cl_util.abap_copy(client);
-    if (client.check_on_init()) {
-      this.mt_tree = [{ text: `Apps`, nodes: [{ text: `Frontend`, nodes: [{ text: `App_001` }, { text: `App_002` }] }] }, { text: `Configuration`, nodes: [{ text: `User Interface`, nodes: [{ text: `Theme` }, { text: `Library` }] }, { text: `Database`, nodes: [{ text: `HANA` }, { text: `ANY DB` }] }] }];
-      this.view_display_master();
-    }
-    switch (client.get().EVENT) {
-      case `UPDATE_DETAIL`:
-        this.view_display_app_01();
-        break;
-      case `EVENT_ITEM`:
-        switch (client.get_event_arg(1)) {
-          case `App_001`:
-            this.view_display_app_01();
-            break;
-          case `App_002`:
-            this.view_display_app_02();
-            break;
-        }
-        break;
-      case `NEST_TEST`:
-        this.mv_check_enabled_01 = (!(this.mv_check_enabled_01 === true || this.mv_check_enabled_01 === `X`));
-        this.mv_check_enabled_02 = (!(this.mv_check_enabled_01 === true || this.mv_check_enabled_01 === `X`));
-        client.nest_view_model_update();
-        break;
-    }
-  }
-}
-
-module.exports = z2ui5_cl_demo_app_069;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_070.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_070.js
index 20bffa1..44f30f9 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_070.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_070.js
@@ -97,7 +97,7 @@ class z2ui5_cl_demo_app_070 extends z2ui5_if_app {
   }
 
   on_init() {
-    this.mt_mapping = [{ n: `EQ`, v: `={LOW}` }, { n: `LT`, v: `<{LOW}` }, { n: `LE`, v: `<={LOW}` }, { n: `GT`, v: `>{LOW}` }, { n: `GE`, v: `>={LOW}` }, { n: `CP`, v: `*{LOW}*` }, { n: `BT`, v: `{LOW}...{HIGH}` }, { n: `NE`, v: `!(={LOW})` }, { n: `NE`, v: `!(<leer>)` }, { n: `<leer>`, v: `<leer>` }];
+    this.mt_mapping = [{ n: `EQ`, v: `={LOW}` }, { n: `LT`, v: `<{LOW}` }, { n: `LE`, v: `<={LOW}` }, { n: `GT`, v: `>{LOW}` }, { n: `GE`, v: `>={LOW}` }, { n: `CP`, v: `*{LOW}*` }, { n: `BT`, v: `{LOW}...{HIGH}` }, { n: `NE`, v: `!(={LOW})` }, { n: `!<leer>`, v: `!(<leer>)` }, { n: `<leer>`, v: `<leer>` }];
     const view = z2ui5_cl_xml_view.factory();
     const page1 = view.shell()
       .page({ id: `page_main`, title: `abap2UI5 - sap.ui.table.Table Features`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack(), class: `sapUiContentPadding` });
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_071.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_071.js
index a93d54d..301cf29 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_071.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_071.js
@@ -9,7 +9,7 @@ class z2ui5_cl_demo_app_071 extends z2ui5_if_app {
   async main(client) {
     switch (client.get().EVENT) {
       case `UPDATE`:
-        client.action.gen({ val: `SET_SIZE_LIMIT`, t_arg: [(this.mv_set_size_limit), client.cs_view.main] });
+        client.follow_up_action({ val: `SET_SIZE_LIMIT`, t_arg: [(this.mv_set_size_limit), client.cs_view.main] });
         client.message_toast_display(`SizeLimitUpdated`);
         return;
         break;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_073.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_073.js
index 79d1e72..140d38c 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_073.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_073.js
@@ -1,3 +1,4 @@
+const z2ui5_cl_a2ui5_context = require("abap2UI5/z2ui5_cl_a2ui5_context");
 const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
 const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
 const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
@@ -12,13 +13,17 @@ class z2ui5_cl_demo_app_073 extends z2ui5_if_app {
   }
 
   async main(client) {
+    let ls_config;
+    let result;
     this.client = z2ui5_cl_util.abap_copy(client);
     if (client.check_on_init()) {
       this.view_display();
     }
     switch (client.get().EVENT) {
       case `BUTTON_OPEN_NEW_TAB`:
-        client.action.gen({ val: z2ui5_if_client.cs_event.open_new_tab, t_arg: [`https://www.google.com/search?q=abap2ui5&oq=abap2ui5,123`] });
+        ls_config = client.get().S_CONFIG;
+        result = z2ui5_cl_a2ui5_context.app_get_url({ classname: `z2ui5_cl_demo_app_073`, origin: ls_config.ORIGIN, pathname: ls_config.PATHNAME, search: ls_config.SEARCH, hash: ls_config.HASH });
+        client.follow_up_action({ val: z2ui5_if_client.cs_event.open_new_tab, t_arg: [result] });
         break;
     }
   }
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_074.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_074.js
index 9428c4f..f7b29cc 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_074.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_074.js
@@ -4,16 +4,23 @@ const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
 const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
 
 class z2ui5_cl_demo_app_074 extends z2ui5_if_app {
-  mv_path = ``;
-  mv_value = ``;
-  mr_table = null;
-  mv_check_edit = false;
-  mv_check_download = false;
+  filepath = ``;
+  file = ``;
+  table = null;
   client = null;
 
+  async main(client) {
+    this.client = z2ui5_cl_util.abap_copy(client);
+    if (client.check_on_init() || client.check_on_navigated()) {
+      this.view_display();
+    } else {
+      this.on_event();
+    }
+  }
+
   on_event() {
-    let lv_data2;
-    let lv_ready;
+    let raw;
+    let content;
     try {
       switch (this.client.get().EVENT) {
         case `START`:
@@ -21,74 +28,58 @@ class z2ui5_cl_demo_app_074 extends z2ui5_if_app {
           this.view_display();
           break;
         case `UPLOAD`:
-          let [lv_dummy, lv_data] = this.mv_value.split(`;`);
-          [lv_dummy, lv_data] = lv_data.split(`,`);
-          lv_data2 = z2ui5_cl_sample_context.conv_decode_x_base64(lv_data);
-          lv_ready = z2ui5_cl_sample_context.conv_get_string_by_xstring(lv_data2);
-          this.mr_table = z2ui5_cl_sample_context.itab_get_itab_by_csv(lv_ready);
-          this.client.message_box_display(`CSV loaded to table`);
+          let [header, base64] = this.file.split(`;`);
+          [header, base64] = base64.split(`,`);
+          raw = z2ui5_cl_sample_context.conv_decode_x_base64(base64);
+          content = z2ui5_cl_sample_context.conv_get_string_by_xstring(raw);
+          this.client.message_box_display(content);
+          this.file = {};
+          this.filepath = {};
           this.view_display();
-          this.mv_value = {};
-          this.mv_path = {};
           break;
       }
-    } catch (x) {
-      this.client.message_box_display(x.get_text(), `error`);
+    } catch (error) {
+      this.client.message_box_display(error.get_text(), `error`);
     }
   }
 
   view_display() {
     let sy_tabix = 0;
     let sy_subrc = 0;
-    let fs_tab = null;
-    let _fs$fs_tab = null;
+    let fs_table = null;
+    let _fs$fs_table = null;
     let tab;
-    let lr_fields;
-    let lo_cols;
-    let lo_cells;
+    let fields;
+    let columns;
+    let cells;
     const view = z2ui5_cl_xml_view.factory();
     const page = view.shell()
-      .page({ title: `abap2UI5 - CSV to ABAP internal Table`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() });
-    if (this.mr_table) {
-      // TODO(abap2js): ASSIGN mr_table->* TO <tab>.
-      tab = page.table(((this.mv_check_edit === true || this.mv_check_edit === `X`) ? this.client._bind_edit(fs_tab) : this.client._bind_edit(fs_tab)))
+      .page({ title: `abap2UI5 - Upload a File`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() });
+    if (this.table) {
+      // TODO(abap2js): ASSIGN table->* TO <table>.
+      tab = page.table(this.client._bind_edit(fs_table))
         .header_toolbar()
         .overflow_toolbar()
         .title(`CSV Content`)
         .toolbar_spacer()
         .get_parent()
         .get_parent();
-      lr_fields = z2ui5_cl_sample_context.rtti_get_t_attri_by_any(fs_tab);
-      lo_cols = tab.columns();
-      sy_tabix = 0;
-      for (const lr_col of lr_fields) {
-        sy_tabix++;
-        lo_cols.column().text(lr_col.name);
-      }
-      lo_cells = tab.items().column_list_item().cells();
+      fields = z2ui5_cl_sample_context.rtti_get_t_attri_by_any(fs_table);
+      columns = tab.columns();
+      cells = tab.items().column_list_item().cells();
       sy_tabix = 0;
-      for (const lr_col of lr_fields) {
+      for (const field of fields) {
         sy_tabix++;
-        lo_cells.text(`{${lr_col.name}}`);
+        columns.column().text(field.name);
+        cells.text(`{${field.name}}`);
       }
     }
-    const footer = page.footer().overflow_toolbar();
-    footer._z2ui5()
-      .file_uploader({ value: this.client._bind_edit(this.mv_value), path: this.client._bind_edit(this.mv_path), placeholder: `filepath here...`, upload: this.client._event(`UPLOAD`) });
+    page.footer()
+      .overflow_toolbar()
+      ._z2ui5()
+      .file_uploader({ value: this.client._bind_edit(this.file), path: this.client._bind_edit(this.filepath), placeholder: `filepath here...`, upload: this.client._event(`UPLOAD`) });
     this.client.view_display(view.stringify());
   }
-
-  async main(client) {
-    this.client = z2ui5_cl_util.abap_copy(client);
-    if (client.check_on_init()) {
-      this.view_display();
-      return;
-    }
-    if (((client.get().CHECK_ON_NAVIGATED) === true || (client.get().CHECK_ON_NAVIGATED) === `X`)) {
-      this.view_display();
-    }
-    this.on_event();
-  }
 }
 
 module.exports = z2ui5_cl_demo_app_074;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_075.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_075.js
deleted file mode 100644
index f833413..0000000
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_075.js
+++ /dev/null
@@ -1,65 +0,0 @@
-const z2ui5_cl_sample_context = require("./z2ui5_cl_sample_context");
-const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
-const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
-const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
-
-class z2ui5_cl_demo_app_075 extends z2ui5_if_app {
-  mv_path = ``;
-  mv_value = ``;
-  mr_table = null;
-  mv_check_edit = false;
-  mv_check_download = false;
-  mv_file = ``;
-  client = null;
-
-  on_event() {
-    let lv_data2;
-    try {
-      switch (this.client.get().EVENT) {
-        case `START`:
-        case `CHANGE`:
-          this.view_display();
-          break;
-        case `UPLOAD`:
-          let [lv_dummy, lv_data] = this.mv_value.split(`;`);
-          [lv_dummy, lv_data] = lv_data.split(`,`);
-          lv_data2 = z2ui5_cl_sample_context.conv_decode_x_base64(lv_data);
-          this.mv_file = z2ui5_cl_sample_context.conv_get_string_by_xstring(lv_data2);
-          this.client.message_box_display(`CSV loaded to table`);
-          this.view_display();
-          this.mv_value = {};
-          this.mv_path = {};
-          break;
-      }
-    } catch (x) {
-      this.client.message_box_display(x.get_text(), `error`);
-    }
-  }
-
-  view_display() {
-    const view = z2ui5_cl_xml_view.factory();
-    const page = view.shell()
-      .page({ title: `abap2UI5 - Upload Files`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() });
-    if (this.mv_file) {
-      page.code_editor({ value: this.client._bind(this.mv_file), editable: false });
-    }
-    const footer = page.footer().overflow_toolbar();
-    footer._z2ui5()
-      .file_uploader({ value: this.client._bind_edit(this.mv_value), path: this.client._bind_edit(this.mv_path), placeholder: `filepath here...`, upload: this.client._event(`UPLOAD`) });
-    this.client.view_display(view.stringify());
-  }
-
-  async main(client) {
-    this.client = z2ui5_cl_util.abap_copy(client);
-    if (client.check_on_init()) {
-      this.view_display();
-      return;
-    }
-    if (((client.get().CHECK_ON_NAVIGATED) === true || (client.get().CHECK_ON_NAVIGATED) === `X`)) {
-      this.view_display();
-    }
-    this.on_event();
-  }
-}
-
-module.exports = z2ui5_cl_demo_app_075;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_080.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_080.js
deleted file mode 100644
index 86eb064..0000000
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_080.js
+++ /dev/null
@@ -1,52 +0,0 @@
-const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
-const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
-const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
-
-class z2ui5_cl_demo_app_080 extends z2ui5_if_app {
-  mt_people = [];
-  lv_s_date = ``;
-  client = null;
-
-  view_display() {
-    this.lv_s_date = `2023-04-22T08:15:00`;
-    const view = z2ui5_cl_xml_view.factory();
-    view._generic_property({ n: `core:require`, v: `{Helper:'z2ui5/Util'}` });
-    const page = view.shell()
-      .page({ id: `page_main`, title: `abap2UI5 - Planning Calendar`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack(), class: `sapUiContentPadding` });
-    const lo_vbox = page.vbox(`sapUiSmallMargin`);
-    const lo_planningcalendar = lo_vbox.planning_calendar({ startdate: `{= Helper.DateCreateObject($` + this.client._bind(this.lv_s_date) + `) }`, rows: `{path: '` + this.client._bind(this.mt_people, { path: true }) + `'}`, appointmentselect: this.client._event(`AppSelected`, [`\${$parameters>/appointment/mProperties/title}`]), showweeknumbers: true });
-    const lo_rows = lo_planningcalendar.rows();
-    const lo_planningcalendarrow = lo_rows.planning_calendar_row({ appointments: `{path:'APPOINTMENTS', templateShareable: false}`, icon: `{PIC}`, title: `{NAME}`, text: `{ROLE}`, intervalheaders: `{path:'HEADERS', templateShareable: false}` });
-    lo_planningcalendarrow.appointments()
-      .calendar_appointment({ startdate: `{= Helper.DateCreateObject(\${START} ) }`, enddate: `{= Helper.DateCreateObject(\${END} ) }`, icon: `{PIC}`, title: `{TITLE}`, text: `{INFO}`, type: `{TYPE}`, tentative: `{TENTATIVE}` });
-    lo_planningcalendarrow.interval_headers()
-      .calendar_appointment({ startdate: `{= Helper.DateCreateObject(\${START} ) }`, enddate: `{= Helper.DateCreateObject(\${END} ) }`, icon: `{PIC}`, title: `{TITLE}`, text: `{INFO}`, type: `{TYPE}` });
-    this.client.view_display(view.stringify());
-  }
-
-  async main(client) {
-    this.client = z2ui5_cl_util.abap_copy(client);
-    if (client.check_on_init()) {
-      this.set_data();
-    }
-    if (((client.get().CHECK_ON_NAVIGATED) === true || (client.get().CHECK_ON_NAVIGATED) === `X`) || client.get().EVENT === `DISPLAY_VIEW`) {
-      this.view_display();
-      return;
-    }
-    this.on_event();
-  }
-
-  on_event() {
-    let ls_client;
-    if (this.client.check_on_event(`AppSelected`)) {
-      ls_client = this.client.get();
-      this.client.message_toast_display(`Event AppSelected with appointment ${ls_client.T_EVENT_ARG[(1) - 1]}`);
-    }
-  }
-
-  set_data() {
-    this.mt_people = [{ name: `Olaf`, role: `Team Member`, pic: `sap-icon://employee`, appointments: [{ start: `2023-04-22T08:15:00`, end: `2023-04-23T08:15:00`, info: `Mittag1`, type: `Type01`, title: `App1`, tentative: false, pic: `sap-icon://sap-ui5` }, { start: `2023-04-25T10:30:00`, end: `2023-04-26T11:30:00`, info: `Mittag2`, type: `Type02`, title: `App2`, tentative: false, pic: `sap-icon://sap-ui5` }, { start: `2023-04-10T10:30:00`, end: `2023-04-11T11:30:00`, info: `Mittag3`, type: `Type03`, title: `App3`, tentative: false, pic: `sap-icon://sap-ui5` }], headers: [{ start: `2020-04-22T08:15:00`, end: `2020-04-23T08:15:00`, type: `Type11`, title: `Reminder1`, tentative: true }, { start: `2020-04-25T10:30:00`, end: `2020-04-26T11:30:00`, type: `Type12`, title: `Reminder2`, tentative: false }] }, { name: `Stefanie`, role: `Team Member`, pic: `sap-icon://employee`, appointments: [{ start: `2023-04-22T08:15:00`, end: `2023-04-23T08:15:00`, info: `Mittag11`, type: `Type11`, title: `App11`, tentative: false, pic: `sap-icon://sap-ui5` }, { start: `2023-04-25T10:30:00`, end: `2023-04-26T11:30:00`, info: `Mittag21`, type: `Type12`, title: `App12`, tentative: false, pic: `sap-icon://sap-ui5` }, { start: `2023-04-10T10:30:00`, end: `2023-04-11T11:30:00`, info: `Mittag31`, type: `Type13`, title: `App13`, tentative: false, pic: `sap-icon://sap-ui5` }], headers: [{ start: `2023-04-22T08:15:00`, end: `2023-04-23T08:15:00`, type: `Type11`, title: `Reminder11`, tentative: true }, { start: `2023-04-25T10:30:00`, end: `2023-04-26T11:30:00`, type: `Type12`, title: `Reminder21`, tentative: false }] }];
-  }
-}
-
-module.exports = z2ui5_cl_demo_app_080;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_097.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_097.js
index c5d24e3..158bad7 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_097.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_097.js
@@ -1,3 +1,4 @@
+const z2ui5_cl_sample_context = require("./z2ui5_cl_sample_context");
 const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
 const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
 const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
@@ -28,7 +29,7 @@ class z2ui5_cl_demo_app_097 extends z2ui5_if_app {
     lo_columns.get_parent()
       .ui_row_action_template()
       .ui_row_action()
-      .ui_row_action_item({ icon: `sap-icon://delete`, press: this.client._event(`ROW_DELETE`, [`\${TITLE}`]) });
+      .ui_row_action_item({ icon: `sap-icon://delete`, press: this.client._event(`ROW_DELETE`, [`\${UUID}`]) });
     this.client.nest_view_display(lo_view_nested.stringify(), `test`, `addMidColumnPage`, `removeAllMidColumnPages`);
   }
 
@@ -45,8 +46,6 @@ class z2ui5_cl_demo_app_097 extends z2ui5_if_app {
 
   async main(client) {
     let sy_subrc = 0;
-    let lt_arg;
-    let ls_arg;
     let lt_sel;
     let ls_sel;
     this.client = z2ui5_cl_util.abap_copy(client);
@@ -58,17 +57,7 @@ class z2ui5_cl_demo_app_097 extends z2ui5_if_app {
     }
     switch (client.get().EVENT) {
       case `ROW_DELETE`:
-        lt_arg = client.get().T_EVENT_ARG;
-        ls_arg = {};
-        {
-          const _t = lt_arg;
-          const _i = (1) - 1;
-          sy_subrc = _i >= 0 && _i < _t.length ? 0 : 4;
-          if (sy_subrc === 0) ls_arg = _t[_i];
-        }
-        if (ls_arg) {
-          for (let _i = this.t_tab2.length - 1; _i >= 0; _i--) { const row = this.t_tab2[_i]; if (row.title === ls_arg) this.t_tab2.splice(_i, 1); }
-        }
+        for (let _i = this.t_tab2.length - 1; _i >= 0; _i--) { const row = this.t_tab2[_i]; if (row.uuid === client.get_event_arg()) this.t_tab2.splice(_i, 1); }
         client.nest_view_model_update();
         break;
       case `SELCHANGE`:
@@ -81,6 +70,7 @@ class z2ui5_cl_demo_app_097 extends z2ui5_if_app {
           sy_subrc = _i >= 0 && _i < _t.length ? 0 : 4;
           if (sy_subrc === 0) ls_sel = _t[_i];
         }
+        ls_sel.uuid = z2ui5_cl_sample_context.uuid_get_c32();
         this.t_tab2.push(ls_sel);
         this.mv_layout = `TwoColumnsMidExpanded`;
         client.nest_view_model_update();
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_098.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_098.js
index 67317fa..b182c66 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_098.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_098.js
@@ -37,7 +37,7 @@ class z2ui5_cl_demo_app_098 extends z2ui5_if_app {
     const lo_view_nested = z2ui5_cl_xml_view.factory();
     let page = lo_view_nested.page(`Nested View`);
     page = page.text(this.client._bind(this.mv_title))
-      .button({ text: `frontend event`, press: this.client._event_client(this.client.cs_event.open_new_tab, [`https://github.com/abap2UI5/abap2UI5/`]) });
+      .button({ text: `frontend event`, press: this.client._event(`NN_VIEW`) });
     this.client.nest2_view_display(lo_view_nested.stringify(), `test`, `addEndColumnPage`, `removeAllEndColumnPages`);
   }
 
@@ -64,10 +64,13 @@ class z2ui5_cl_demo_app_098 extends z2ui5_if_app {
       this.view_display_detail();
     }
     switch (client.get().EVENT) {
+      case `NN_VIEW`:
+        client.message_box_display(`Event in nested nested view raised`);
+        break;
       case `ROW_NAVIGATE`:
-        if (client.get_event_arg(1)) {
+        if (client.get_event_arg()) {
           this.mv_layout = `ThreeColumnsEndExpanded`;
-          this.mv_title = client.get_event_arg(1);
+          this.mv_title = client.get_event_arg();
         }
         client.nest_view_model_update();
         client.view_model_update();
@@ -83,7 +86,9 @@ class z2ui5_cl_demo_app_098 extends z2ui5_if_app {
           sy_subrc = _i >= 0 && _i < _t.length ? 0 : 4;
           if (sy_subrc === 0) ls_sel = _t[_i];
         }
-        this.t_tab2.push(ls_sel);
+        if (!this.t_tab2.some((row) => row.title === ls_sel.title)) {
+          this.t_tab2.push(ls_sel);
+        }
         this.mv_layout = `TwoColumnsMidExpanded`;
         client.nest_view_model_update();
         client.view_model_update();
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_101.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_101.js
index 1c210b4..03249be 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_101.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_101.js
@@ -3,51 +3,59 @@ const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
 const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
 
 class z2ui5_cl_demo_app_101 extends z2ui5_if_app {
-  mt_feed = [];
-  ms_feed = {};
-  mv_value = ``;
+  t_feed = [];
+  value = ``;
   client = null;
 
   async main(client) {
     this.client = z2ui5_cl_util.abap_copy(client);
     if (client.check_on_init()) {
-      this.set_data();
+      this.on_init();
+    } else if (client.check_on_navigated()) {
       this.view_display();
-    } else {
+    } else if (client.check_on_event()) {
       this.on_event();
     }
   }
 
+  on_init() {
+    this.set_data();
+    this.view_display();
+  }
+
   on_event() {
+    let sy_datum = "";
+    let sy_uzeit = "";
     if (this.client.check_on_event(`POST`)) {
-      if (!this.mv_value) {
+      if (!this.value) {
         return;
       }
-      this.ms_feed = {};
-      this.ms_feed.author = z2ui5_cl_util.abap_copy(sy_uname);
-      this.ms_feed.type = `Respond`;
-      this.ms_feed.text = z2ui5_cl_util.abap_copy(this.mv_value);
-      this.mv_value = ``;
-      this.mt_feed.splice((1) - 1, 0, this.ms_feed);
+      this.t_feed.splice((1) - 1, 0, { author: `Alexandrina Victoria`, authorpic: `http://upload.wikimedia.org/wikipedia/commons/a/aa/Dronning_victoria.jpg`, type: `Reply`, date: `${sy_datum} ${sy_uzeit}`, text: this.value });
+      this.value = {};
       this.client.view_model_update();
+    } else if (this.client.check_on_event(`SENDER_PRESS`)) {
+      this.client.message_toast_display(`Clicked on Link: ${this.client.get_event_arg()}`);
+    } else if (this.client.check_on_event(`ICON_PRESS`)) {
+      this.client.message_toast_display(`Clicked on Image: ${this.client.get_event_arg()}`);
     }
   }
 
-  set_data() {
-    this.mt_feed = [{ author: `choper725`, authorpic: `employee`, type: `Request`, date: `August 26 2023`, text: `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, seddiamnonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna` + `aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` }, { author: `choper725`, authorpic: `sap-icon://employee`, type: `Reply`, date: `August 26 2023`, text: `this is feed input` }];
+  view_display() {
+    let base_url = ``;
+    const view = z2ui5_cl_xml_view.factory();
+    const page = view.shell()
+      .page({ title: `abap2UI5 - Sample: Feed`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.FeedListItem/sample/sap.m.sample.Feed` });
+    page.feed_input({ post: this.client._event(`POST`), icon: base_url + `test-resources/sap/m/images/dronning_victoria.jpg`, value: this.client._bind_edit(this.value), class: `sapUiSmallMarginTopBottom` });
+    page.list({ showseparators: `Inner`, items: this.client._bind(this.t_feed) })
+      .feed_list_item({ sender: `{AUTHOR}`, icon: `{AUTHORPIC}`, senderpress: this.client._event(`SENDER_PRESS`, [`\${$source>/sender}`]), iconpress: this.client._event(`ICON_PRESS`, [`\${$source>/sender}`]), info: `{TYPE}`, timestamp: `{DATE}`, text: `{TEXT}`, convertlinkstoanchortags: `All` });
+    this.client.view_display(view.stringify());
   }
 
-  view_display() {
-    const lo_view = z2ui5_cl_xml_view.factory();
-    const page = lo_view.shell()
-      .page({ title: `Feed Input`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() });
-    const fi = page.vbox()
-      .feed_input({ post: this.client._event(`POST`), growing: true, rows: `4`, icondensityaware: false, value: this.client._bind_edit(this.mv_value), class: `sapUiSmallMarginTopBottom` })
-      .get_parent()
-      .get_parent()
-      .list({ items: this.client._bind_edit(this.mt_feed), showseparators: `Inner` })
-      .feed_list_item({ sender: `{AUTHOR}`, senderpress: this.client._event(`SENDER_PRESS`), iconpress: this.client._event(`ICON_PRESS`), icondensityaware: false, showicon: false, info: `Reply`, text: `{TEXT}`, convertlinkstoanchortags: `All` });
-    this.client.view_display(lo_view.stringify());
+  set_data() {
+    let base_url = ``;
+    this.t_feed = [{ author: `Alexandrina Victoria`, authorpic: base_url + `test-resources/sap/m/images/dronning_victoria.jpg`, type: `Request`, date: `March 03 2013`, text: `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` + ` Lorem ipsum dolor sit amet, consetetur sadipscing elitr, seddiamnonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` + ` Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` + ` Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` + ` Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` }, { author: `George Washington`, authorpic: base_url + `test-resources/sap/m/images/george_washington.jpg`, type: `Reply`, date: `March 04 2013`, text: `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore` }, { author: `Alexandrina Victoria`, authorpic: base_url + `test-resources/sap/m/images/dronning_victoria.jpg`, type: `Request`, date: `March 05 2013`, text: `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat` }, { author: `George Washington`, authorpic: base_url + `test-resources/sap/m/images/george_washington.jpg`, type: `Rejection`, date: `March 07 2013`, text: `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.` }];
   }
 }
 
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_103.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_103.js
index 1d585f7..595d292 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_103.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_103.js
@@ -1,49 +1,99 @@
+const z2ui5_cl_sample_context = require("./z2ui5_cl_sample_context");
 const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
 const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
 const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
 
 class z2ui5_cl_demo_app_103 extends z2ui5_if_app {
+  t_products = [];
+  t_products_sorted = [];
   client = null;
 
   async main(client) {
     this.client = z2ui5_cl_util.abap_copy(client);
     if (client.check_on_init()) {
-      this.view_display();
-      return;
+      this.on_init();
+    } else if (client.check_on_event()) {
+      this.on_event();
     }
   }
 
+  on_init() {
+    this.t_products = [{ name: `Notebook Basic 15`, product_id: `HT-1000`, quantity: `10` }, { name: `Notebook Basic 17`, product_id: `HT-1001`, quantity: `20` }, { name: `Notebook Basic 18`, product_id: `HT-1002`, quantity: `10` }, { name: `Notebook Basic 19`, product_id: `HT-1003`, quantity: `15` }, { name: `ITelO Vault`, product_id: `HT-1007`, quantity: `15` }, { name: `Notebook Professional 15`, product_id: `HT-1010`, quantity: `16` }, { name: `Notebook Professional 17`, product_id: `HT-1011`, quantity: `17` }, { name: `ITelO Vault Net`, product_id: `HT-1020`, quantity: `14` }, { name: `ITelO Vault SAT`, product_id: `HT-1021`, quantity: `50` }, { name: `Comfort Easy`, product_id: `HT-1022`, quantity: `30` }, { name: `Comfort Senior`, product_id: `HT-1023`, quantity: `24` }, { name: `Ergo Screen E-I`, product_id: `HT-1030`, quantity: `14` }, { name: `Ergo Screen E-II`, product_id: `HT-1031`, quantity: `24` }, { name: `Ergo Screen E-III`, product_id: `HT-1032`, quantity: `50` }, { name: `Flat Basic`, product_id: `HT-1035`, quantity: `23` }, { name: `Flat Future`, product_id: `HT-1036`, quantity: `22` }];
+    this.t_products_sorted = z2ui5_cl_util.abap_copy(this.t_products);
+    this.t_products_sorted.sort((a, b) => ((a.name > b.name ? 1 : a.name < b.name ? -1 : 0)));
+    this.view_display();
+  }
+
+  on_event() {
+    switch (this.client.get().EVENT) {
+      case `ROOT_RESIZE`:
+        this.resize_message({ val: `Root container is resized.` });
+        break;
+      case `INNER_RESIZE`:
+        this.resize_message({ val: `Inner container is resized.` });
+        break;
+    }
+  }
+
+  resize_message({ val } = {}) {
+    const old_sizes = this.client.get_event_arg();
+    const new_sizes = this.client.get_event_arg(2);
+    let message = z2ui5_cl_util.abap_copy(val);
+    if (old_sizes) {
+      message = `${message}${z2ui5_cl_sample_context.cv_char_util_newline}Old panes sizes = [${old_sizes}]`;
+    }
+    message = `${message}${z2ui5_cl_sample_context.cv_char_util_newline}New panes sizes = [${new_sizes}]`;
+    this.client.message_toast_display(message);
+  }
+
   view_display() {
-    const page = z2ui5_cl_xml_view.factory()
-      .shell()
-      .page({ title: `abap2UI5 - Side Panel Example`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() });
-    page.header_content().link();
-    page.responsive_splitter({ defaultpane: `default` })
-      .pane_container()
-      .split_pane({ requiredparentwidth: `400`, id: `default` })
+    const view = z2ui5_cl_xml_view.factory();
+    const page = view.shell()
+      .page({ title: `abap2UI5 - Sample: ResponsiveSplitter`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.ui.layout.ResponsiveSplitter/sample/sap.ui.layout.sample.ResponsiveSplitter` });
+    const root_container = page.responsive_splitter({ defaultpane: `default` })
+      .pane_container({ resize: this.client._event(`ROOT_RESIZE`, [`\${$parameters>/oldSizes}`, `\${$parameters>/newSizes}`]) });
+    root_container.split_pane({ requiredparentwidth: `400`, id: `default` })
       .layout_data(`layout`)
       .splitter_layout_data({ size: `auto` })
       .get_parent()
       .get_parent()
-      .panel({ headertext: `first pane` })
-      .get_parent()
-      .get_parent()
-      .pane_container({ orientation: `Vertical` })
-      .split_pane({ requiredparentwidth: `600` })
+      .panel({ headertext: `Minimum parent width 400`, height: `100%` })
+      .text(`LayoutData.size=auto`)
+      .list({ headertext: `Products`, items: this.client._bind(this.t_products) })
+      .standard_list_item({ title: `{NAME}`, counter: `{QUANTITY}` });
+    const inner_container = root_container.pane_container({ orientation: `Vertical`, resize: this.client._event(`INNER_RESIZE`, [`\${$parameters>/oldSizes}`, `\${$parameters>/newSizes}`]) });
+    inner_container.split_pane({ requiredparentwidth: `600` })
       .layout_data(`layout`)
       .splitter_layout_data({ size: `auto` })
       .get_parent()
       .get_parent()
-      .panel({ headertext: `second pane` })
-      .get_parent()
-      .get_parent()
-      .split_pane({ requiredparentwidth: `800` })
+      .panel({ headertext: `Minimum parent width 600` })
+      .vbox()
+      .text(`LayoutData.size=auto`)
+      .select({ forceselection: false, selectedkey: `1239102`, items: this.client._bind(this.t_products_sorted) })
+      .item({ key: `{PRODUCT_ID}`, text: `{NAME}` });
+    const pane_page = inner_container.split_pane({ requiredparentwidth: `800` })
       .layout_data(`layout`)
       .splitter_layout_data({ size: `auto` })
       .get_parent()
       .get_parent()
-      .panel({ headertext: `second pane` });
-    this.client.view_display(page.stringify());
+      .page(`Minimum parent width 800`);
+    pane_page.text(`LayoutData.size=auto`);
+    pane_page.footer()
+      .overflow_toolbar()
+      .label(`Buttons:`)
+      .toolbar_spacer()
+      .button({ text: `New`, type: `Transparent` })
+      .button({ text: `Open`, type: `Transparent` })
+      .button({ text: `Save`, type: `Transparent` })
+      .button({ text: `Save as`, type: `Transparent` })
+      .button({ text: `Cut`, type: `Transparent` })
+      .button({ text: `Copy`, type: `Transparent` })
+      .button({ text: `Paste`, type: `Transparent` })
+      .button({ text: `Undo`, type: `Transparent` });
+    this.client.view_display(view.stringify());
   }
 }
 
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_105.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_105.js
new file mode 100644
index 0000000..dbc8a84
--- /dev/null
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_105.js
@@ -0,0 +1,30 @@
+const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
+const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
+
+class z2ui5_cl_demo_app_105 extends z2ui5_if_app {
+  mo_view_parent = null;
+  mv_class_1 = ``;
+  mr_data = null;
+  client = null;
+
+  view_display({ xml } = {}) {
+    this.mo_view_parent.input({ value: this.client._bind_edit(this.mv_class_1), placeholder: `Input From Class 1` });
+  }
+
+  on_event() {
+    if (this.client.check_on_event(`MESSAGE_SUB`)) {
+      this.client.message_box_display(`event sub app`);
+    }
+  }
+
+  async main(client) {
+    this.client = z2ui5_cl_util.abap_copy(client);
+    if (client.check_on_init()) {
+      this.view_display();
+    } else {
+      this.on_event();
+    }
+  }
+}
+
+module.exports = z2ui5_cl_demo_app_105;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_106.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_106.js
deleted file mode 100644
index 287b5bb..0000000
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_106.js
+++ /dev/null
@@ -1,28 +0,0 @@
-const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
-const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
-
-class z2ui5_cl_demo_app_106 extends z2ui5_if_app {
-  mv_value = ``;
-
-  async main(client) {
-    let view;
-    let lo_p;
-    if (client.check_on_init()) {
-      view = z2ui5_cl_xml_view.factory();
-      lo_p = view.shell()
-        .page({ title: `abap2UI5 - Rich Text Editor`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
-      lo_p.rich_text_editor({ width: `100%`, height: `400px`, value: client._bind_edit(this.mv_value), customtoolbar: true, showgroupfont: true, showgrouplink: true, showgroupinsert: true, wrapping: false });
-      lo_p.footer()
-        .overflow_toolbar()
-        .button({ text: `Send To Server`, type: `Emphasized`, icon: `sap-icon://paper-plane`, press: client._event(`SERVER`) });
-      client.view_display(view.stringify());
-    }
-    switch (client.get().EVENT) {
-      case `SERVER`:
-        client.message_box_display(this.mv_value);
-        break;
-    }
-  }
-}
-
-module.exports = z2ui5_cl_demo_app_106;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_110.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_110.js
index 1dfbbe3..9e805d4 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_110.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_110.js
@@ -10,7 +10,10 @@ class z2ui5_cl_demo_app_110 extends z2ui5_if_app {
   view_display() {
     const view = z2ui5_cl_xml_view.factory();
     view.shell()
-      .page({ title: `abap2UI5 - Sample: MaskInput`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() })
+      .page({ title: `abap2UI5 - Sample: MaskInput`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() })
+      .header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.MaskInput/sample/sap.m.sample.MaskInput` })
+      .get_parent()
       .simple_form({ title: `Generic Mask Input`, layout: `ColumnLayout`, editable: true })
       .label(`Unique ID`)
       .mask_input({ mask: `~~~~~~~~~~`, placeholdersymbol: `_`, placeholder: `All characters allowed` })
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_112.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_112.js
new file mode 100644
index 0000000..5d0554f
--- /dev/null
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_112.js
@@ -0,0 +1,30 @@
+const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
+const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
+
+class z2ui5_cl_demo_app_112 extends z2ui5_if_app {
+  mo_view_parent = null;
+  mv_class_2 = ``;
+  mr_data = null;
+  client = null;
+
+  view_display({ xml } = {}) {
+    this.mo_view_parent.input({ value: this.client._bind_edit(this.mv_class_2), placeholder: `Input From Class 2` });
+  }
+
+  on_event() {
+    if (this.client.check_on_event(`MESSAGE_SUB`)) {
+      this.client.message_box_display(`event sub app`);
+    }
+  }
+
+  async main(client) {
+    this.client = z2ui5_cl_util.abap_copy(client);
+    if (client.check_on_init()) {
+      this.view_display();
+    } else {
+      this.on_event();
+    }
+  }
+}
+
+module.exports = z2ui5_cl_demo_app_112;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_114.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_114.js
new file mode 100644
index 0000000..2cbda5c
--- /dev/null
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_114.js
@@ -0,0 +1,54 @@
+const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
+const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
+const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
+
+class z2ui5_cl_demo_app_114 extends z2ui5_if_app {
+  mt_feed = [];
+  ms_feed = {};
+  mv_value = ``;
+  client = null;
+
+  async main(client) {
+    this.client = z2ui5_cl_util.abap_copy(client);
+    if (client.check_on_init()) {
+      this.set_data();
+      this.view_display();
+    } else {
+      this.on_event();
+    }
+  }
+
+  on_event() {
+    let sy_uname = "";
+    if (this.client.check_on_event(`POST`)) {
+      if (this.mv_value) {
+        this.ms_feed = {};
+        this.ms_feed.author = z2ui5_cl_util.abap_copy(sy_uname);
+        this.ms_feed.type = `Respond`;
+        this.ms_feed.text = z2ui5_cl_util.abap_copy(this.mv_value);
+        this.mv_value = ``;
+        this.mt_feed.splice((1) - 1, 0, this.ms_feed);
+        this.client.view_model_update();
+      }
+    }
+  }
+
+  set_data() {
+    this.mt_feed = [{ author: `choper725`, authorpic: `employee`, type: `Request`, date: `August 26 2023`, text: `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, seddiamnonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna` + `aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` }, { author: `choper725`, authorpic: `sap-icon://employee`, type: `Reply`, date: `August 26 2023`, text: `this is feed input` }];
+  }
+
+  view_display() {
+    const lo_view = z2ui5_cl_xml_view.factory();
+    const page = lo_view.shell()
+      .page({ title: `Feed Input`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() });
+    page.flex_box({ justifycontent: `Start`, class: `sapUiSmallMarginEnd`, alignitems: `Center` })
+      .icon({ src: `sap-icon://person-placeholder`, class: `sapUiSmallMarginEnd` })
+      .text_area({ value: this.client._bind_edit(this.mv_value), rows: `4`, cols: `120`, class: `sapUiSmallMarginEnd`, placeholder: `Post something here...`, editable: true, enabled: true })
+      .button({ icon: `sap-icon://paper-plane`, press: this.client._event(`POST`), iconfirst: true });
+    page.list({ items: this.client._bind_edit(this.mt_feed), showseparators: `Inner` })
+      .feed_list_item({ sender: `{AUTHOR}`, senderpress: this.client._event(`SENDER_PRESS`), iconpress: this.client._event(`ICON_PRESS`), icondensityaware: false, showicon: false, info: `Reply`, text: `{TEXT}`, convertlinkstoanchortags: `All` });
+    this.client.view_display(lo_view.stringify());
+  }
+}
+
+module.exports = z2ui5_cl_demo_app_114;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_120.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_120.js
new file mode 100644
index 0000000..3c4cd03
--- /dev/null
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_120.js
@@ -0,0 +1,52 @@
+const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
+const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
+const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
+
+class z2ui5_cl_demo_app_120 extends z2ui5_if_app {
+  longitude = ``;
+  latitude = ``;
+  altitude = ``;
+  speed = ``;
+  altitudeaccuracy = ``;
+  accuracy = ``;
+  mt_spot = [];
+  client = null;
+
+  async main(client) {
+    this.client = z2ui5_cl_util.abap_copy(client);
+    if (client.check_on_init()) {
+      this.view_display();
+      return;
+    }
+    switch (client.get().EVENT) {
+      case `GEOLOCATION_ERROR`:
+        client.message_box_display(`Location unavailable (${client.get_event_arg(1)}): ${client.get_event_arg(2)}`, `error`);
+        break;
+    }
+  }
+
+  view_display() {
+    const view = z2ui5_cl_xml_view.factory();
+    view.shell()
+      .page({ title: `abap2UI5 - Device Capabilities`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() })
+      ._z2ui5()
+      .geolocation({ finished: this.client._event(`GEOLOCATION_LOADED`), error: this.client._event(`GEOLOCATION_ERROR`, [`\${$parameters>/code}`, `\${$parameters>/message}`]), longitude: this.client._bind_edit(this.longitude), latitude: this.client._bind_edit(this.latitude), altitude: this.client._bind_edit(this.altitude), altitudeaccuracy: this.client._bind_edit(this.altitudeaccuracy), accuracy: this.client._bind_edit(this.accuracy), speed: this.client._bind_edit(this.speed) })
+      .simple_form({ title: `Geolocation`, editable: false })
+      .content(`form`)
+      .label(`Longitude`)
+      .input({ value: this.client._bind_edit(this.longitude), editable: false })
+      .label(`Latitude`)
+      .input({ value: this.client._bind_edit(this.latitude), editable: false })
+      .label(`Altitude`)
+      .input({ value: this.client._bind_edit(this.altitude), editable: false })
+      .label(`Accuracy`)
+      .input({ value: this.client._bind_edit(this.accuracy), editable: false })
+      .label(`AltitudeAccuracy`)
+      .input({ value: this.client._bind_edit(this.altitudeaccuracy), editable: false })
+      .label(`Speed`)
+      .input({ value: this.client._bind_edit(this.speed), editable: false });
+    this.client.view_display(view.stringify());
+  }
+}
+
+module.exports = z2ui5_cl_demo_app_120;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_125.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_125.js
index 6ae0651..287dbff 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_125.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_125.js
@@ -18,7 +18,7 @@ class z2ui5_cl_demo_app_125 extends z2ui5_if_app {
         .button({ text: `Set Title`, press: client._event(`SET_TITLE`) });
       client.view_display(view.stringify());
     } else if (client.check_on_event(`SET_TITLE`)) {
-      client.action.gen({ val: z2ui5_if_client.cs_event.set_title, t_arg: [this.title] });
+      client.follow_up_action({ val: z2ui5_if_client.cs_event.set_title, t_arg: [this.title] });
     }
   }
 }
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_133.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_133.js
index 5195b34..d0f995c 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_133.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_133.js
@@ -43,7 +43,7 @@ class z2ui5_cl_demo_app_133 extends z2ui5_if_app {
     switch (client.get().EVENT) {
       case `BUTTON01`:
       case `BUTTON02`:
-        client.action.gen({ val: z2ui5_if_client.cs_event.set_focus, t_arg: [client.get().EVENT, this.selstart, this.selend] });
+        client.follow_up_action({ val: z2ui5_if_client.cs_event.set_focus, t_arg: [client.get().EVENT, this.selstart, this.selend] });
         client.message_toast_display(`focus changed`);
         break;
     }
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_136.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_136.js
deleted file mode 100644
index b72a856..0000000
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_136.js
+++ /dev/null
@@ -1,94 +0,0 @@
-const z2ui5_cl_sample_context = require("./z2ui5_cl_sample_context");
-const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
-const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
-const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
-
-class z2ui5_cl_demo_app_136 extends z2ui5_if_app {
-  mv_path = ``;
-  mv_value = ``;
-  mr_table = null;
-  mv_check_edit = false;
-  mv_check_download = false;
-  client = null;
-
-  on_event() {
-    let lv_data2;
-    let lv_ready;
-    try {
-      switch (this.client.get().EVENT) {
-        case `START`:
-        case `CHANGE`:
-          this.view_display();
-          break;
-        case `UPLOAD`:
-          let [lv_dummy, lv_data] = this.mv_value.split(`;`);
-          [lv_dummy, lv_data] = lv_data.split(`,`);
-          lv_data2 = z2ui5_cl_sample_context.conv_decode_x_base64(lv_data);
-          lv_ready = z2ui5_cl_sample_context.conv_get_string_by_xstring(lv_data2);
-          this.mr_table = z2ui5_cl_sample_context.itab_get_itab_by_csv(lv_ready);
-          this.client.message_box_display(`CSV loaded to table`);
-          this.view_display();
-          this.mv_value = {};
-          this.mv_path = {};
-          break;
-      }
-    } catch (x) {
-      this.client.message_box_display(x.get_text(), `error`);
-    }
-  }
-
-  view_display() {
-    let sy_tabix = 0;
-    let sy_subrc = 0;
-    let fs_tab = null;
-    let _fs$fs_tab = null;
-    let tab;
-    let lr_fields;
-    let lo_cols;
-    let lo_cells;
-    const view = z2ui5_cl_xml_view.factory();
-    const page = view.shell()
-      .page({ title: `abap2UI5 - CSV to ABAP internal Table`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() });
-    if (this.mr_table) {
-      // TODO(abap2js): ASSIGN mr_table->* TO <tab>.
-      tab = page.table(((this.mv_check_edit === true || this.mv_check_edit === `X`) ? this.client._bind_edit(fs_tab) : this.client._bind_edit(fs_tab)))
-        .header_toolbar()
-        .overflow_toolbar()
-        .title(`CSV Content`)
-        .toolbar_spacer()
-        .get_parent()
-        .get_parent();
-      lr_fields = z2ui5_cl_sample_context.rtti_get_t_attri_by_any(fs_tab);
-      lo_cols = tab.columns();
-      sy_tabix = 0;
-      for (const lr_col of lr_fields) {
-        sy_tabix++;
-        lo_cols.column().text(lr_col.name);
-      }
-      lo_cells = tab.items().column_list_item().cells();
-      sy_tabix = 0;
-      for (const lr_col of lr_fields) {
-        sy_tabix++;
-        lo_cells.text(`{` + lr_col.name + `}`);
-      }
-    }
-    const footer = page.footer().overflow_toolbar();
-    footer._z2ui5()
-      .file_uploader({ value: this.client._bind_edit(this.mv_value), path: this.client._bind_edit(this.mv_path), placeholder: `filepath here...`, upload: this.client._event(`UPLOAD`) });
-    this.client.view_display(view.stringify());
-  }
-
-  async main(client) {
-    this.client = z2ui5_cl_util.abap_copy(client);
-    if (client.check_on_init()) {
-      this.view_display();
-      return;
-    }
-    if (((client.get().CHECK_ON_NAVIGATED) === true || (client.get().CHECK_ON_NAVIGATED) === `X`)) {
-      this.view_display();
-    }
-    this.on_event();
-  }
-}
-
-module.exports = z2ui5_cl_demo_app_136;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_140.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_140.js
new file mode 100644
index 0000000..4088a9b
--- /dev/null
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_140.js
@@ -0,0 +1,49 @@
+const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
+const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
+const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
+
+class z2ui5_cl_demo_app_140 extends z2ui5_if_app {
+  gt_multi = [];
+  gt_sel_multi = [];
+  gt_sel_multi2 = [];
+  client = null;
+
+  on_event() {
+    try {
+      if (this.client.check_on_event(`FILTERBAR`)) {
+        this.client.view_model_update();
+      }
+    } catch (x) {
+      this.client.message_box_display(x.get_text(), `error`);
+    }
+  }
+
+  on_init() {
+    this.gt_multi = [{ key: `A01`, text: `T1` }, { key: `A02`, text: `T2` }, { key: `A03`, text: `T3` }, { key: `A04`, text: `T4` }, { key: `A05`, text: `T5` }];
+    this.gt_sel_multi2 = [`A01`];
+  }
+
+  view_display() {
+    const view = z2ui5_cl_xml_view.factory();
+    view.shell()
+      .page({ title: `abap2UI5 - Multi Combo Box`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() })
+      .simple_form({ title: `Form Title`, editable: true })
+      .content(`form`)
+      .multi_combobox({ name: `MultiComboBox`, selectedkeys: this.client._bind_edit(this.gt_sel_multi2), items: this.client._bind_edit(this.gt_multi) })
+      .item({ key: `{KEY}`, text: `{TEXT}` })
+      .get_parent()
+      .button({ text: `post`, press: this.client._event(`BUTTON_POST`) });
+    this.client.view_display(view.stringify());
+  }
+
+  async main(client) {
+    this.client = z2ui5_cl_util.abap_copy(client);
+    if (client.check_on_init()) {
+      this.on_init();
+    }
+    this.view_display();
+    this.on_event();
+  }
+}
+
+module.exports = z2ui5_cl_demo_app_140;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_143.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_143.js
new file mode 100644
index 0000000..e8f671b
--- /dev/null
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_143.js
@@ -0,0 +1,72 @@
+const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
+const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
+const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
+
+class z2ui5_cl_demo_app_143 extends z2ui5_if_app {
+  gt_data = [];
+  client = null;
+
+  on_event() {
+    try {
+      if (this.client.check_on_event(`ROW_ACTION_ITEM_ADD`)) {
+        this.client.message_toast_display(`Something`);
+        this.client.view_model_update();
+      }
+    } catch (x) {
+      this.client.message_box_display(x.get_text(), `error`);
+    }
+  }
+
+  on_init() {
+    this.gt_data = [{ field1: `21`, field2: `T1`, field3: `TEXT1` }, { field1: `22`, field2: `T1`, field3: `TEXT1` }, { field1: `23`, field2: `T2`, field3: `TEXT1` }, { field1: `24`, field2: `T2`, field3: `TEXT2` }, { field1: `25`, field2: `T3`, field3: `TEXT2` }];
+  }
+
+  view_display() {
+    const view = z2ui5_cl_xml_view.factory();
+    const page1 = view.page({ id: `page_main`, title: `Table Filters Reset after view Update`, class: `sapUiContentPadding`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() });
+    const page = page1.dynamic_page({ headerexpanded: true, headerpinned: true });
+    page1._z2ui5().uitableext(`Table1`);
+    const header_title = page.title({ ns: `f` }).get().dynamic_page_title();
+    header_title.heading(`f`).hbox().title(`Table`);
+    header_title.expanded_content(`f`);
+    header_title.snapped_content(`f`);
+    const cont = page.content(`f`);
+    const table = cont.vbox()
+      .ui_table({ rows: this.client._bind(this.gt_data), id: `Table1`, editable: false, alternaterowcolors: true, enablecellfilter: true, rowactioncount: `1`, fixedcolumncount: `1`, visiblerowcount: `7`, selectionmode: `None` });
+    table.ui_columns()
+      .ui_column({ sortproperty: `FIELD1`, filterproperty: `FIELD1`, autoresizable: `true` })
+      .text(`Field1`)
+      .ui_template()
+      .text(`{FIELD1}`)
+      .get_parent()
+      .get_parent()
+      .ui_column({ sortproperty: `FIELD2`, filterproperty: `FIELD2`, autoresizable: `true` })
+      .text(`Field2`)
+      .ui_template()
+      .text(`{FIELD2}`)
+      .get_parent()
+      .get_parent()
+      .ui_column({ sortproperty: `FIELD3`, filterproperty: `FIELD3`, autoresizable: `true` })
+      .text(`Field3`)
+      .ui_template()
+      .text(`{FIELD3}`)
+      .get_parent()
+      .get_parent()
+      .get_parent()
+      .ui_row_action_template()
+      .ui_row_action()
+      .ui_row_action_item({ icon: `sap-icon://add`, text: `Add`, press: this.client._event(`ROW_ACTION_ITEM_ADD`, [`\${MATNR}`]) });
+    this.client.view_display(view.stringify());
+  }
+
+  async main(client) {
+    this.client = z2ui5_cl_util.abap_copy(client);
+    if (client.check_on_init()) {
+      this.on_init();
+    }
+    this.view_display();
+    this.on_event();
+  }
+}
+
+module.exports = z2ui5_cl_demo_app_143;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_160.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_160.js
index 552769a..a82426e 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_160.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_160.js
@@ -1,3 +1,4 @@
+const z2ui5_cl_sample_context = require("./z2ui5_cl_sample_context");
 const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
 const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
 const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
@@ -6,44 +7,37 @@ class z2ui5_cl_demo_app_160 extends z2ui5_if_app {
   mt_output = [];
   client = null;
 
-  load_output_table() {
-    let ls_output = {};
+  async main(client) {
+    this.client = z2ui5_cl_util.abap_copy(client);
+    if (client.check_on_init()) {
+      this.model_init();
+      this.view_display();
+    } else {
+      this.on_event();
+    }
+  }
+
+  model_init() {
     this.mt_output = {};
     for (let sy_index = 1; sy_index <= 10; sy_index++) {
-      ls_output.index = z2ui5_cl_util.abap_copy(sy_index);
-      ls_output.set_sk = `Test`;
-      ls_output.matnr = `1234567`;
-      ls_output.description = `Test`;
-      ls_output.pl_01 = 0;
-      ls_output.pl_02 = 0;
-      this.mt_output.push(ls_output);
+      this.mt_output.push({ index: sy_index, set_sk: `Test`, matnr: `1234567`, description: `Test`, pl_01: 0, pl_02: 0 });
     }
   }
 
   on_event() {
-    let lv_id_event;
-    let lv_tab_index;
-    let ls_row_submit;
-    let lv_id_parent;
-    let lt_event_arguments = [];
     if (this.client.check_on_event(`PL_TOTAL_CHANGE`)) {
-      lt_event_arguments = z2ui5_cl_util.struct_lower_keys(this.client.get().T_EVENT_ARG);
-      lv_id_event = z2ui5_cl_util.abap_copy(lt_event_arguments[(1) - 1]);
-      lv_tab_index = z2ui5_cl_util.abap_copy(lt_event_arguments[(2) - 1]);
-      ls_row_submit = z2ui5_cl_util.abap_copy(this.mt_output[(lv_tab_index) - 1]);
-      lv_id_parent = z2ui5_cl_util.abap_copy(lt_event_arguments[(3) - 1]);
-      this.client.message_box_display(lv_tab_index + lv_id_event + lv_id_parent);
+      this.client.message_box_display(`Id of Input via source object: ` + this.client.get_event_arg() + z2ui5_cl_sample_context.cv_char_util_newline + `Id of Input via event.oSource.sId: ` + this.client.get_event_arg(2) + z2ui5_cl_sample_context.cv_char_util_newline + `Value of same row, index: ` + this.client.get_event_arg(3) + z2ui5_cl_sample_context.cv_char_util_newline + `Id of parent (row) via event.oSource.oParent.sId: ` + this.client.get_event_arg(4) + z2ui5_cl_sample_context.cv_char_util_newline + `Attribute of parameters.value: ` + this.client.get_event_arg(5));
     }
-    this.client.view_model_update();
   }
 
-  render_main_screen() {
+  view_display() {
     const view = z2ui5_cl_xml_view.factory();
     const page = view.shell()
       .page({ title: `abap2UI5 - Event on cell level`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() })
       .header_content()
       .link()
       .get_parent();
+    page.text(`Make an input and press ENTER`);
     const table = page.flex_box({ height: `85vh` })
       .ui_table({ alternaterowcolors: `true`, selectionmode: `None`, visiblerowcountmode: `Auto`, fixedrowcount: `1`, rows: this.client._bind_edit(this.mt_output) });
     const columns = table.ui_columns();
@@ -55,118 +49,16 @@ class z2ui5_cl_demo_app_160 extends z2ui5_if_app {
       .text(`Column 2`)
       .ui_template()
       .text(`{MATNR}`);
-    columns.ui_column({ width: `20rem`, sortproperty: `DESCRIPTION`, filterproperty: `DESCRIPTION` })
-      .text(`Column 3`)
-      .ui_template()
-      .text(`{DESCRIPTION}`);
-    columns.ui_column({ width: `5rem`, sortproperty: `IS_TOTAL`, filterproperty: `IS_TOTAL` })
-      .text(`Column 4`)
-      .ui_template()
-      .text(`{IS_TOTAL}`);
     columns.ui_column({ width: `5rem`, sortproperty: `PL_TOTAL`, filterproperty: `PL_TOTAL` })
       .text(`Column 5`)
       .ui_template()
-      .input({ value: `{PL_TOTAL}`, submit: this.client._event(`PL_TOTAL_CHANGE`, [`\${$source>/id}`, `\${INDEX}`, `$event.oSource.oParent.sId`]), editable: true, type: `Number` });
+      .input({ value: `{PL_TOTAL}`, submit: this.client._event(`PL_TOTAL_CHANGE`, [`\${$source>/id}`, `$event.oSource.sId`, `\${INDEX}`, `$event.oSource.oParent.sId`, `\${$parameters>/value}`]), editable: true, type: `Number` });
     columns.ui_column({ width: `4rem`, sortproperty: `per_cent_total`, filterproperty: `per_cent_total` })
       .text(`Column 6`)
       .ui_template()
-      .text(`{per_cent_total} %`);
-    columns.ui_column({ width: `5rem`, sortproperty: `IS_01_PREV`, filterproperty: `IS_01_PREV` })
-      .text(`Column 7`)
-      .ui_template()
-      .text(`{IS_01_PREV}`);
-    columns.ui_column({ width: `5rem`, sortproperty: `PL_01`, filterproperty: `PL_01` })
-      .text(`Column 8`)
-      .ui_template()
-      .input({ value: `{PL_01}`, editable: true, type: `Number` });
-    columns.ui_column({ width: `4rem`, sortproperty: `per_cent_01`, filterproperty: `per_cent_01` })
-      .text(`Column 9`)
-      .ui_template()
-      .text(`{per_cent_01} %`);
-    columns.ui_column({ width: `5rem`, sortproperty: `IS_02_PREV`, filterproperty: `IS_02_PREV` })
-      .text(`Column 10`)
-      .ui_template()
-      .text(`{IS_02_PREV}`);
-    columns.ui_column({ width: `5rem`, sortproperty: `PL_02`, filterproperty: `PL_02` })
-      .text(`Column 11`)
-      .ui_template()
-      .input({ value: `{PL_02}`, editable: true, type: `Number` });
-    columns.ui_column({ width: `4rem`, sortproperty: `per_cent_02`, filterproperty: `per_cent_02` })
-      .text(`Column 12`)
-      .ui_template()
-      .text(`{per_cent_02} %`);
-    columns.ui_column({ width: `5rem`, sortproperty: `IS_03_PREV`, filterproperty: `IS_03_PREV` })
-      .text(`Column 13`)
-      .ui_template()
-      .text(`{IS_03_PREV}`);
-    columns.ui_column({ width: `5rem`, sortproperty: `PL_03`, filterproperty: `PL_03` })
-      .text(`Column 14`)
-      .ui_template()
-      .input({ value: `{PL_03}`, editable: true, type: `Number` });
-    columns.ui_column({ width: `4rem`, sortproperty: `per_cent_03`, filterproperty: `per_cent_03` })
-      .text(`Column 15`)
-      .ui_template()
-      .text(`{per_cent_03} %`);
-    columns.ui_column({ width: `5rem`, sortproperty: `IS_Q01_PREV`, filterproperty: `IS_Q01_PREV` })
-      .text(`Column 16`)
-      .ui_template()
-      .text(`{IS_Q01_PREV}`);
-    columns.ui_column({ width: `5rem`, sortproperty: `PL_Q01`, filterproperty: `PL_Q01` })
-      .text(`Column 17`)
-      .ui_template()
-      .text(`{PL_Q01}`);
-    columns.ui_column({ width: `4rem`, sortproperty: `per_cent_q01`, filterproperty: `per_cent_q01` })
-      .text(`Column 18`)
-      .ui_template()
-      .text(`{per_cent_q01} %`);
-    columns.ui_column({ width: `5rem`, sortproperty: `IS_Q02_PREV`, filterproperty: `IS_Q02_PREV` })
-      .text(`Column 19`)
-      .ui_template()
-      .text(`{IS_Q02_PREV}`);
-    columns.ui_column({ width: `5rem`, sortproperty: `PL_Q02`, filterproperty: `PL_Q02` })
-      .text(`Column 20`)
-      .ui_template()
-      .input({ value: `{PL_Q02}`, editable: true, type: `Number` });
-    columns.ui_column({ width: `4rem`, sortproperty: `per_cent_q02`, filterproperty: `per_cent_q02` })
-      .text(`Column 21`)
-      .ui_template()
-      .text(`{per_cent_q02} %`);
-    columns.ui_column({ width: `5rem`, sortproperty: `IS_Q03_PREV`, filterproperty: `IS_Q03_PREV` })
-      .text(`Column 22`)
-      .ui_template()
-      .text(`{IS_Q03_PREV}`);
-    columns.ui_column({ width: `5rem`, sortproperty: `PL_Q03`, filterproperty: `PL_Q03` })
-      .text(`Column 23`)
-      .ui_template()
-      .input({ value: `{PL_Q03}`, editable: true, type: `Number` });
-    columns.ui_column({ width: `4rem`, sortproperty: `per_cent_q03`, filterproperty: `per_cent_q03` })
-      .text(`Column 24`)
-      .ui_template()
-      .text(`{per_cent_q03} %`);
-    columns.ui_column({ width: `5rem`, sortproperty: `IS_Q04_PREV`, filterproperty: `IS_Q04_PREV` })
-      .text(`Column 25`)
-      .ui_template()
-      .text(`{IS_Q04_PREV}`);
-    columns.ui_column({ width: `5rem`, sortproperty: `PL_Q04`, filterproperty: `PL_Q04` })
-      .text(`Column 26`)
-      .ui_template()
-      .input({ value: `{PL_Q04}`, editable: true, type: `Number` });
-    columns.ui_column({ width: `4rem`, sortproperty: `per_cent_q04`, filterproperty: `per_cent_q04` })
-      .text(`Column 27`)
-      .ui_template()
-      .text(`{per_cent_q04} %`);
+      .text(`{PL_TOTAL} %`);
     this.client.view_display(view.stringify());
   }
-
-  async main(client) {
-    this.client = z2ui5_cl_util.abap_copy(client);
-    if (client.check_on_init()) {
-      this.load_output_table();
-      this.render_main_screen();
-    } else {
-      this.on_event();
-    }
-  }
 }
 
 module.exports = z2ui5_cl_demo_app_160;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_161.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_161.js
index 987ceb6..4cb052b 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_161.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_161.js
@@ -51,7 +51,7 @@ class z2ui5_cl_demo_app_161 extends z2ui5_if_app {
 
   async main(client) {
     this.client = z2ui5_cl_util.abap_copy(client);
-    if (((client.get().CHECK_ON_NAVIGATED) === true || (client.get().CHECK_ON_NAVIGATED) === `X`)) {
+    if (client.check_on_navigated()) {
       this.view_display();
       return;
     }
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_167.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_167.js
index 90057f1..e0b7404 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_167.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_167.js
@@ -26,14 +26,13 @@ class z2ui5_cl_demo_app_167 extends z2ui5_if_app {
       this.mv_value = `my value`;
       this.set_view();
     }
-    const lt_arg = client.get().T_EVENT_ARG;
     switch (client.get().EVENT) {
       case `EVENT_FIX_VAL`:
       case `EVENT_MODEL_VALUE`:
       case `SOURCE_PROPERTY_TEXT`:
       case `EVENT_PROPERTY_VALUE`:
       case `PARENT_PROPERTY_ID`:
-        client.message_box_display(`backend event: ${lt_arg[(1) - 1]}`);
+        client.message_box_display(`backend event: ${client.get_event_arg()}`);
         break;
     }
     client.view_model_update();
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_170.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_170.js
new file mode 100644
index 0000000..20c8cc5
--- /dev/null
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_170.js
@@ -0,0 +1,94 @@
+const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
+const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
+const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
+
+class z2ui5_cl_demo_app_170 extends z2ui5_if_app {
+  mv_selected_key = ``;
+  client = null;
+
+  simple_popup1() {
+    const popup = z2ui5_cl_xml_view.factory_popup();
+    const dialog = popup.dialog({ stretch: true, afterclose: this.client._event(`BTN_OK_1ND`) }).content();
+    const content = dialog.icon_tab_bar({ selectedkey: this.client._bind_edit(this.mv_selected_key), select: this.client._event_client(`POPUP_NAV_CONTAINER_TO`, [`NavCon`, `\${$parameters>/selectedKey}`]), headermode: `Inline`, expanded: true, expandable: false })
+      .items()
+      .icon_tab_filter({ key: `page1`, text: `Home` })
+      .get_parent()
+      .icon_tab_filter({ key: `page2`, text: `Applications` })
+      .get_parent()
+      .icon_tab_filter({ key: `page3`, text: `Users and Groups` })
+      .items()
+      .icon_tab_filter({ key: `page11`, text: `User 1` })
+      .get_parent()
+      .icon_tab_filter({ key: `page32`, text: `User 2` })
+      .get_parent()
+      .icon_tab_filter({ key: `page33`, text: `User 3` })
+      .get_parent()
+      .get_parent()
+      .get_parent()
+      .get_parent()
+      .content()
+      .vbox({ height: `100%` })
+      .nav_container({ id: `NavCon`, initialpage: `page1`, defaulttransitionname: `flip`, height: `400px` })
+      .pages()
+      .page({ title: `first page`, id: `page1` })
+      .get_parent()
+      .page({ title: `second page`, id: `page2` })
+      .get_parent()
+      .page({ title: `third page`, id: `page3` });
+    dialog.get_parent()
+      .footer()
+      .overflow_toolbar()
+      .toolbar_spacer()
+      .button({ text: `OK`, press: this.client._event(`BTN_OK_1ND`), type: `Emphasized` });
+    this.client.popup_display(popup.stringify());
+  }
+
+  simple_popup2() {
+    const popup = z2ui5_cl_xml_view.factory_popup();
+    const dialog = popup.dialog({ afterclose: this.client._event(`BTN_OK_2ND`) }).content();
+    const content = dialog.label(`this is a second popup`);
+    dialog.get_parent()
+      .footer()
+      .overflow_toolbar()
+      .toolbar_spacer()
+      .button({ text: `GOTO 1ST POPUP`, press: this.client._event(`BTN_OK_2ND`), type: `Emphasized` });
+    this.client.popup_display(popup.stringify());
+  }
+
+  view_display() {
+    const view = z2ui5_cl_xml_view.factory();
+    view.shell()
+      .page({ title: `abap2UI5 - Popup To Popup`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() })
+      .button({ text: `Open Popup...`, press: this.client._event(`POPUP`) });
+    this.client.view_display(view.stringify());
+  }
+
+  on_event() {
+    switch (this.client.get().EVENT) {
+      case `GOTO_2ND`:
+        this.simple_popup2();
+        break;
+      case `BTN_OK_2ND`:
+        this.client.popup_destroy();
+        this.simple_popup1();
+        break;
+      case `BTN_OK_1ND`:
+        this.client.popup_destroy();
+        break;
+      case `POPUP`:
+        this.simple_popup1();
+        break;
+    }
+  }
+
+  async main(client) {
+    this.client = z2ui5_cl_util.abap_copy(client);
+    if (((client.get().CHECK_ON_NAVIGATED) === true || (client.get().CHECK_ON_NAVIGATED) === `X`)) {
+      this.view_display();
+      return;
+    }
+    this.on_event();
+  }
+}
+
+module.exports = z2ui5_cl_demo_app_170;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_173.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_173.js
index 9f15400..9de0d96 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_173.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_173.js
@@ -12,9 +12,9 @@ class z2ui5_cl_demo_app_173 extends z2ui5_if_app {
     let view = z2ui5_cl_xml_view.factory();
     view = view.shell()
       .page({ id: `page_main`, class: `sapUiContentPadding`, title: `abap2UI5 - Sample Templating I`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() });
-    view.table(this.client._bind(this.mt_data))
+    view.table(this.client._bind_edit(this.mt_data))
       .columns()
-      .template_repeat({ list: `{template>/MT_LAYOUT}`, var: `L0` })
+      .template_repeat({ list: `{template>/XX/MT_LAYOUT}`, var: `L0` })
       .column({ mergeduplicates: `{L0>MERGE}`, visible: `{L0>VISIBLE}` })
       .text(`{L0>FNAME}`)
       .get_parent()
@@ -23,7 +23,7 @@ class z2ui5_cl_demo_app_173 extends z2ui5_if_app {
       .items()
       .column_list_item()
       .cells()
-      .template_repeat({ list: `{template>/MT_LAYOUT}`, var: `L1` })
+      .template_repeat({ list: `{template>/XX/MT_LAYOUT}`, var: `L1` })
       .object_identifier({ text: `{= '{' + \${L1>FNAME} + '}' }` });
     view.label(`IF Template (with re-rendering)`);
     view.switch({ state: this.client._bind_edit(this.mv_flag), change: this.client._event(`CHANGE_FLAG`) });
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_175.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_175.js
deleted file mode 100644
index b2f8a39..0000000
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_175.js
+++ /dev/null
@@ -1,26 +0,0 @@
-const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
-const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
-
-class z2ui5_cl_demo_app_175 extends z2ui5_if_app {
-  async main(client) {
-    this.view_display({ client: client });
-  }
-
-  view_display({ client } = {}) {
-    let lr_view = z2ui5_cl_xml_view.factory();
-    lr_view = lr_view.shell()
-      .page({ id: `page_main`, title: `abap2UI5 - Demo Wizard Control`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
-    const lr_wizard = lr_view.wizard();
-    const lr_wiz_step1 = lr_wizard.wizard_step({ title: `Step1`, validated: true });
-    lr_wiz_step1.message_strip(`STEP1`);
-    const lr_wiz_step2 = lr_wizard.wizard_step({ title: `Step2`, validated: true });
-    lr_wiz_step2.message_strip(`STEP2`);
-    const lr_wiz_step3 = lr_wizard.wizard_step({ title: `Step3`, validated: true });
-    lr_wiz_step3.message_strip(`STEP3`);
-    const lr_wiz_step4 = lr_wizard.wizard_step({ title: `Step4`, validated: true });
-    lr_wiz_step4.message_strip(`STEP4`);
-    client.view_display(lr_view.stringify());
-  }
-}
-
-module.exports = z2ui5_cl_demo_app_175;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_176.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_176.js
index ed4278c..3591241 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_176.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_176.js
@@ -19,9 +19,9 @@ class z2ui5_cl_demo_app_176 extends z2ui5_if_app {
     const lo_view_nested = z2ui5_cl_xml_view.factory();
     lo_view_nested.shell()
       .page(`Nested View`)
-      .table(i_client._bind(this.mt_data))
+      .table(i_client._bind_edit(this.mt_data))
       .columns()
-      .template_repeat({ list: `{template>/MT_LAYOUT}`, var: `LO` })
+      .template_repeat({ list: `{template>/XX/MT_LAYOUT}`, var: `LO` })
       .column({ mergeduplicates: `{LO>MERGE}`, visible: `{LO>VISIBLE}` })
       .get_parent()
       .get_parent()
@@ -29,7 +29,7 @@ class z2ui5_cl_demo_app_176 extends z2ui5_if_app {
       .items()
       .column_list_item()
       .cells()
-      .template_repeat({ list: `{template>/MT_LAYOUT}`, var: `LO2` })
+      .template_repeat({ list: `{template>/XX/MT_LAYOUT}`, var: `LO2` })
       .object_identifier({ text: `{= '{' + \${LO2>FNAME} + '}' }` });
     i_client.nest_view_display({ val: lo_view_nested.stringify(), id: `test`, method_insert: `addContent` });
   }
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_181.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_181.js
index 7883c99..eaceb55 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_181.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_181.js
@@ -18,6 +18,8 @@ class z2ui5_cl_demo_app_181 extends z2ui5_if_app {
     const view = z2ui5_cl_xml_view.factory();
     const page = view.shell()
       .page({ title: `Cards Demo`, class: `sapUiContentPadding`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.f.Card/sample/sap.f.sample.Card` });
     this.mt_cities = [{ text: `Berlin`, key: `BR` }, { text: `London`, key: `LN` }, { text: `Madrid`, key: `MD` }, { text: `Prague`, key: `PR` }, { text: `Paris`, key: `PS` }, { text: `Sofia`, key: `SF` }, { text: `Vienna`, key: `VN` }];
     this.mt_products = [{ title: `Notebook HT`, subtitle: `ID23452256-D44`, revenue: `27.25K EUR`, status: `success`, status_schema: `Success` }, { title: `Notebook XT`, subtitle: `ID27852256-D47`, revenue: `7.35K EUR`, status: `exceeded`, status_schema: `Error` }, { title: `Notebook ST`, subtitle: `ID123555587-I05`, revenue: `22.89K EUR`, status: `warning`, status_schema: `Warning` }];
     const card_1 = page.card({ width: `300px`, class: `sapUiMediumMargin` })
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_187.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_187.js
deleted file mode 100644
index e0e8988..0000000
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_187.js
+++ /dev/null
@@ -1,35 +0,0 @@
-const z2ui5_cl_sample_context = require("./z2ui5_cl_sample_context");
-const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
-const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
-const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
-
-class z2ui5_cl_demo_app_187 extends z2ui5_if_app {
-  async main(client) {
-    let ls_msg2;
-    let lv_val;
-    let ls_msg = null;
-    if (client.check_on_init()) {
-      client.view_display(z2ui5_cl_xml_view.factory().shell().page({ title: `abap2UI5 - Popup To Confirm`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() }).button({ text: `SY`, press: client._event(`SY`) }).button({ text: `BAPIRET`, press: client._event(`BAPIRET`) }).button({ text: `CX_ROOT`, press: client._event(`CX_ROOT`) }).stringify());
-      return;
-    }
-    switch (client.get().EVENT) {
-      case `SY`:
-        ls_msg2 = z2ui5_cl_sample_context.msg_get_by_msg({ id: `NET`, no: `001` });
-        client.message_box_display(ls_msg2);
-        break;
-      case `BAPIRET`:
-        ls_msg = { id: `NET`, number: `001` };
-        client.message_box_display(ls_msg);
-        break;
-      case `CX_ROOT`:
-        try {
-          lv_val = z2ui5_cl_util.abap_div(1, 0);
-        } catch (lx) {
-          client.message_box_display(lx);
-        }
-        break;
-    }
-  }
-}
-
-module.exports = z2ui5_cl_demo_app_187;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_189.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_189.js
index 9f2aab6..086aa46 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_189.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_189.js
@@ -12,10 +12,10 @@ class z2ui5_cl_demo_app_189 extends z2ui5_if_app {
   dispatch() {
     switch (this.client.get().EVENT) {
       case `one_enter`:
-        this.client.action.gen({ val: z2ui5_if_client.cs_event.set_focus, t_arg: [`IdTwo`] });
+        this.client.follow_up_action({ val: z2ui5_if_client.cs_event.set_focus, t_arg: [`IdTwo`] });
         break;
       case `two_enter`:
-        this.client.action.gen({ val: z2ui5_if_client.cs_event.set_focus, t_arg: [`IdThree`] });
+        this.client.follow_up_action({ val: z2ui5_if_client.cs_event.set_focus, t_arg: [`IdThree`] });
         break;
     }
     this.client.view_model_update();
@@ -40,7 +40,7 @@ class z2ui5_cl_demo_app_189 extends z2ui5_if_app {
     this.client = z2ui5_cl_util.abap_copy(client);
     if (client.check_on_init()) {
       this.render();
-      client.action.gen({ val: z2ui5_if_client.cs_event.set_focus, t_arg: [`IdOne`] });
+      client.follow_up_action({ val: z2ui5_if_client.cs_event.set_focus, t_arg: [`IdOne`] });
     }
     this.dispatch();
   }
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_202.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_202.js
index 20e7364..1bce757 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_202.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_202.js
@@ -32,10 +32,10 @@ class z2ui5_cl_demo_app_202 extends z2ui5_if_app {
     }
     switch (client.get().EVENT) {
       case `STEP22`:
-        client.action.gen({ val: z2ui5_if_client.cs_event.wizard_set_next_step, t_arg: [`wiz`, `STEP2`, `STEP22`] });
+        client.follow_up_action({ val: z2ui5_if_client.cs_event.wizard_set_next_step, t_arg: [`wiz`, `STEP2`, `STEP22`] });
         break;
       case `STEP23`:
-        client.action.gen({ val: z2ui5_if_client.cs_event.wizard_set_next_step, t_arg: [`wiz`, `STEP2`, `STEP23`] });
+        client.follow_up_action({ val: z2ui5_if_client.cs_event.wizard_set_next_step, t_arg: [`wiz`, `STEP2`, `STEP23`] });
         break;
     }
     client.view_model_update();
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_205.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_205.js
index 640869a..9f488d9 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_205.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_205.js
@@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_205 extends z2ui5_if_app {
     const page = z2ui5_cl_xml_view.factory()
       .shell()
       .page({ title: `abap2UI5 - Sample: Flex Box - Basic Alignment`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.FlexBox/sample/sap.m.sample.FlexBoxBasicAlignment` });
     const layout = page.vbox()
       .panel({ headertext: `Upper left` })
       .flex_box({ height: `100px`, alignitems: `Start`, justifycontent: `Start` })
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_206.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_206.js
index a93f00a..12ecefa 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_206.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_206.js
@@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_206 extends z2ui5_if_app {
     const page = z2ui5_cl_xml_view.factory()
       .shell()
       .page({ title: `abap2UI5 - Sample: Text - Max Lines`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.Text/sample/sap.m.sample.TextMaxLines` });
     const layout = page.vertical_layout({ class: `sapUiContentPadding`, width: `100%` });
     layout.text(`Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ` + `At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. ` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat`)
       .get_parent()
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_207.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_207.js
index 6e2b4f2..be8cb97 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_207.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_207.js
@@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_207 extends z2ui5_if_app {
     const page = z2ui5_cl_xml_view.factory()
       .shell()
       .page({ title: `abap2UI5 - Sample: Radio Button`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.RadioButton/sample/sap.m.sample.RadioButton` });
     const layout = page.vbox(`sapUiSmallMargin`)
       .label({ text: `Default RadioButton use`, labelfor: `GroupA` })
       .radio_button_group({ id: `GroupA` })
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_208.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_208.js
index 3e1db43..c9afcf7 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_208.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_208.js
@@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_208 extends z2ui5_if_app {
     const page = z2ui5_cl_xml_view.factory()
       .shell()
       .page({ title: `abap2UI5 - Sample: Radio Button Group`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.RadioButtonGroup/sample/sap.m.sample.RadioButtonGroup` });
     const layout = page.vbox(`sapUiSmallMargin`)
       .label({ labelfor: `rbg1`, text: `An example with 'matrix' layout` })
       .radio_button_group({ id: `rbg1`, columns: `3`, width: `100%`, class: `sapUiMediumMarginBottom` })
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_209.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_209.js
index 10b0767..b815550 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_209.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_209.js
@@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_209 extends z2ui5_if_app {
     const page = z2ui5_cl_xml_view.factory()
       .shell()
       .page({ title: `abap2UI5 - Sample: InfoLabel`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.tnt.InfoLabel/sample/sap.tnt.sample.InfoLabel` });
     const layout = page.scroll_container({ vertical: true, height: `100%` })
       .flex_box({ direction: `Column`, alignitems: `Start`, class: `sapUiMediumMargin` })
       .flex_box({ direction: `Row`, alignitems: `Start`, class: `sapUiTinyMarginBottom` })
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_210.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_210.js
index 7e02081..ed2e7a6 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_210.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_210.js
@@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_210 extends z2ui5_if_app {
     const page = z2ui5_cl_xml_view.factory()
       .shell()
       .page({ title: `abap2UI5 - Sample: Input - Types`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.Input/sample/sap.m.sample.InputTypes` });
     const layout = page.vertical_layout({ class: `sapUiContentPadding`, width: `100%` });
     layout.label({ text: `Text`, labelfor: `inputText` });
     layout.input({ id: `inputText`, placeholder: `Enter text`, class: `sapUiSmallMarginBottom` });
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_213.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_213.js
index b09c0c8..ba6892f 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_213.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_213.js
@@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_213 extends z2ui5_if_app {
     const page = z2ui5_cl_xml_view.factory()
       .shell()
       .page({ title: `abap2UI5 - Sample: Input - Password`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.Input/sample/sap.m.sample.InputPassword` });
     const layout = page.vertical_layout({ class: `sapUiContentPadding`, width: `100%` });
     layout.label({ text: `Password`, labelfor: `passwordInput` });
     layout.input({ id: `passwordInput`, type: `Password`, placeholder: `Enter password` });
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_214.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_214.js
index 7395ff2..36b359a 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_214.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_214.js
@@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_214 extends z2ui5_if_app {
     const page = z2ui5_cl_xml_view.factory()
       .shell()
       .page({ title: `abap2UI5 - Sample: Standalone Icon Tab Header`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.IconTabHeader/sample/sap.m.sample.IconTabHeader` });
     const layout = page.icon_tab_header({ mode: `Inline` })
       .items()
       .icon_tab_filter({ key: `info`, text: `Info` })
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_215.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_215.js
index ecaae7b..a47d543 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_215.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_215.js
@@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_215 extends z2ui5_if_app {
     const page = z2ui5_cl_xml_view.factory()
       .shell()
       .page({ title: `abap2UI5 - Sample: Busy Indicator`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.BusyIndicator/sample/sap.m.sample.BusyIndicator` });
     const layout = page.vertical_layout({ class: `sapUiContentPadding`, width: `100%` });
     layout.busy_indicator({ text: `... something is happening`, class: `sapUiTinyMarginBottom` });
     layout.hbox({ justifycontent: `Start`, alignitems: `Center` }).busy_indicator({ size: `3em` });
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_216.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_216.js
index 2e318bc..3a1e74c 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_216.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_216.js
@@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_216 extends z2ui5_if_app {
     const page = z2ui5_cl_xml_view.factory()
       .shell()
       .page({ title: `abap2UI5 - Sample: Action List Item`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.ActionListItem/sample/sap.m.sample.ActionListItem` });
     const layout = page.list({ headertext: `Actions` })
       .action_list_item({ text: `Reject` })
       .get_parent()
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_217.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_217.js
index 7e7cca8..8bbd5ab 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_217.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_217.js
@@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_217 extends z2ui5_if_app {
     const page = z2ui5_cl_xml_view.factory()
       .shell()
       .page({ title: `abap2UI5 - Sample: Placing a Title in OverflowToolbar/Toolbar`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.OverflowToolbar/sample/sap.m.sample.TitleToolBar` });
     const layout = page.overflow_toolbar({ design: `Transparent`, height: `3rem` }).title(`Title Only`);
     page.overflow_toolbar({ design: `Transparent`, height: `3rem` })
       .title(`Title and Actions`)
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_218.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_218.js
index 950bbbe..a96b688 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_218.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_218.js
@@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_218 extends z2ui5_if_app {
     const page = z2ui5_cl_xml_view.factory()
       .shell()
       .page({ title: `abap2UI5 - Sample: Flex Box - Opposing Alignment`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.FlexBox/sample/sap.m.sample.FlexBoxOpposingAlignment` });
     const layout = page.panel({ headertext: `Horizontally opposing flex items` })
       .flex_box({ alignitems: `Start`, justifycontent: `SpaceBetween` })
       .button({ text: `1`, type: `Accept` })
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_219.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_219.js
index b1b7292..7d23481 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_219.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_219.js
@@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_219 extends z2ui5_if_app {
     const page = z2ui5_cl_xml_view.factory()
       .shell()
       .page({ title: `abap2UI5 - Sample: Input List Item`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.InputListItem/sample/sap.m.sample.InputListItem` });
     const layout = page.list({ headertext: `Input` })
       .input_list_item(`WLAN`)
       .switch({ state: `true` })
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_220.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_220.js
index 14a2288..ecbe240 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_220.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_220.js
@@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_220 extends z2ui5_if_app {
     const page = z2ui5_cl_xml_view.factory()
       .shell()
       .page({ title: `abap2UI5 - Sample: Rating Indicator`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.RatingIndicator/sample/sap.m.sample.RatingIndicator` });
     const layout = page.vertical_layout({ class: `sapUiContentPadding` });
     layout.label({ text: `Rating Indicator default size`, labelfor: `RI_default` });
     layout.rating_indicator({ id: `RI_default`, maxvalue: `5`, class: `sapUiSmallMarginBottom`, value: `4`, tooltip: `Rating Tooltip` });
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_221.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_221.js
index 63304ab..1f3fcae 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_221.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_221.js
@@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_221 extends z2ui5_if_app {
     const page = z2ui5_cl_xml_view.factory()
       .shell()
       .page({ title: `abap2UI5 - Sample: Icon Tab Bar - Icons Only`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.IconTabBar/sample/sap.m.sample.IconTabBarMulti` });
     const layout = page.icon_tab_bar({ id: `idIconTabBarMulti`, expanded: `{device>/isNoPhone}`, class: `sapUiResponsiveContentPadding` })
       .items()
       .icon_tab_filter({ icon: `sap-icon://hint`, key: `info` })
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_222.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_222.js
index e357888..7752084 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_222.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_222.js
@@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_222 extends z2ui5_if_app {
     const page = z2ui5_cl_xml_view.factory()
       .shell()
       .page({ title: `abap2UI5 - Sample: Icon Tab Bar - Text and Count`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.IconTabBar/sample/sap.m.sample.IconTabBarFiori2` });
     const layout = page.icon_tab_bar({ id: `idIconTabBarFiori2`, expanded: `{device>/isNoPhone}`, class: `sapUiResponsiveContentPadding` })
       .items()
       .icon_tab_filter({ text: `Info`, key: `info`, count: `3` })
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_223.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_223.js
index 5a4bb70..6cbf5df 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_223.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_223.js
@@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_223 extends z2ui5_if_app {
     const page = z2ui5_cl_xml_view.factory()
       .shell()
       .page({ title: `abap2UI5 - Sample: Icon Tab Bar - Inline Mode`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.IconTabBar/sample/sap.m.sample.IconTabBarInlineMode` });
     const layout = page.icon_tab_bar({ id: `idIconTabBarInlineMode`, headermode: `Inline`, expanded: `{device>/isNoPhone}`, class: `sapUiResponsiveContentPadding` })
       .items()
       .icon_tab_filter({ text: `Info`, key: `info`, count: `3` })
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_224.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_224.js
index ae46148..f3c786e 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_224.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_224.js
@@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_224 extends z2ui5_if_app {
     const page = z2ui5_cl_xml_view.factory()
       .shell()
       .page({ title: `Sample: Icon Tab Bar - Text Only`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.IconTabBar/sample/sap.m.sample.IconTabBarNoIcons` });
     const layout = page.icon_tab_bar({ id: `idIconTabBarNoIcons`, expanded: `{device>/isNoPhone}`, class: `sapUiResponsiveContentPadding` })
       .items()
       .icon_tab_filter({ text: `Info`, key: `info` })
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_225.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_225.js
index 7119af1..f29fbb8 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_225.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_225.js
@@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_225 extends z2ui5_if_app {
     const page = z2ui5_cl_xml_view.factory()
       .shell()
       .page({ title: `abap2UI5 - Sample: Icon Tab Bar - Separator`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.IconTabBar/sample/sap.m.sample.IconTabSeparator` });
     const layout = page.label({ wrapping: `true`, text: `No icon(='') used as separator, the separator will be a vertical line.`, class: `sapUiSmallMargin` });
     layout.icon_tab_bar({ id: `idIconTabBarSeparatorNoIcon`, expanded: `false`, class: `sapUiResponsiveContentPadding` })
       .items()
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_226.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_226.js
index 3f96543..4c10386 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_226.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_226.js
@@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_226 extends z2ui5_if_app {
     const page = z2ui5_cl_xml_view.factory()
       .shell()
       .page({ title: `abap2UI5 - Sample: Icon Tab Bar - Sub tabs`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.IconTabBar/sample/sap.m.sample.IconTabBarSubTabs` });
     const layout = page.label({ wrapping: `true`, text: `IconTabBar with filters with own content and sub tabs. The click area is split to allow the user to display the content or alternatively to expand/collapse the sub tabs.`, class: `sapUiSmallMargin` });
     layout.icon_tab_bar({ class: `sapUiResponsiveContentPadding` })
       .items()
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_227.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_227.js
index 8b4cd3b..aa1c792 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_227.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_227.js
@@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_227 extends z2ui5_if_app {
     const page_01 = z2ui5_cl_xml_view.factory()
       .shell()
       .page({ title: `abap2UI5 - Sample: Page, Toolbar and Bar`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
+    page_01.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.Page/sample/sap.m.sample.Page` });
     const page_02 = page_01.page({ title: `Title`, class: `sapUiContentPadding sapUiResponsivePadding--header sapUiResponsivePadding--subHeader sapUiResponsivePadding--content sapUiResponsivePadding--footer`, shownavbutton: `true` })
       .header_content()
       .button({ icon: `sap-icon://action`, tooltip: `Share` })
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_228.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_228.js
index 077ad56..bce83d7 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_228.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_228.js
@@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_228 extends z2ui5_if_app {
     const page = z2ui5_cl_xml_view.factory()
       .shell()
       .page({ title: `abap2UI5 - Sample: Numeric Content Without Margins`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.NumericContent/sample/sap.m.sample.NumericContentWithoutMargin` });
     const layout = page.label(`Numeric content with margins`);
     layout.numeric_content({ value: `65.5`, scale: `MM`, class: `sapUiSmallMargin`, withmargin: true });
     layout.numeric_content({ value: `65.5`, scale: `MM`, valuecolor: `Good`, indicator: `Up`, class: `sapUiSmallMargin`, withmargin: true });
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_229.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_229.js
index d2b7060..ab14f36 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_229.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_229.js
@@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_229 extends z2ui5_if_app {
     const page = z2ui5_cl_xml_view.factory()
       .shell()
       .page({ title: `abap2UI5 - Sample: ComboBox - Suggestions wrapping`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.ComboBox/sample/sap.m.sample.ComboBoxWrapping` });
     const layout = page.vertical_layout({ class: `sapUiContentPadding`, width: `100%` });
     layout.label({ text: `Product`, labelfor: `wrappingComboBox` });
     layout.combobox({ id: `wrappingComboBox` })
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_230.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_230.js
index c24304d..bf2b7e3 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_230.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_230.js
@@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_230 extends z2ui5_if_app {
     const page = z2ui5_cl_xml_view.factory()
       .shell()
       .page({ title: `abap2UI5 - Sample: Segmented Button in Input List Item`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.SegmentedButton/sample/sap.m.sample.SegmentedButtonLI` });
     const layout = page.list({ headertext: `Input List Item` })
       .input_list_item(`Battery Saving`)
       .segmented_button(`SBYes`)
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_231.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_231.js
deleted file mode 100644
index 3de321b..0000000
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_231.js
+++ /dev/null
@@ -1,80 +0,0 @@
-const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
-const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
-const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
-
-class z2ui5_cl_demo_app_231 extends z2ui5_if_app {
-  drs1 = {};
-  drs2 = {};
-  drs3 = {};
-  drs4 = {};
-  drs5 = {};
-  mindate = `20160101`;
-  maxdate = `20161231`;
-  text = ``;
-
-  view_display({ client } = {}) {
-    const view = z2ui5_cl_xml_view.factory();
-    view._generic_property({ n: `core:require`, v: `{Helper:'z2ui5/Util'}` });
-    const page = view.shell()
-      .page({ title: `abap2UI5 - Sample: Date Range Selection`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
-    page.header_content()
-      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.DateRangeSelection/sample/sap.m.sample.DateRangeSelection` });
-    const vbox = page.vbox();
-    vbox.label({ text: `DateRangeSelection displayFormat 'yyyy/MM/dd', set via binding:`, labelfor: `DRS1` })
-      .date_range_selection({ id: `DRS1`, displayformat: `yyyy/MM/dd`, change: client._event(`handleChange`, [`DRS2`]), datevalue: `{= Helper.DateCreateObject($` + client._bind(this.drs1.start, { name: `drs1-start` }) + `) }`, seconddatevalue: `{= Helper.DateCreateObject($` + client._bind(this.drs1.end, { name: `drs1-end` }) + `) }` });
-    vbox.label({ text: `DateRangeSelection with minDate=2016-01-01 and maxDate=2016-12-31:`, labelfor: `DRS2` })
-      .date_range_selection({ id: `DRS2`, mindate: `{= Helper.DateCreateObject($` + client._bind(this.mindate) + `) }`, maxdate: `{= Helper.DateCreateObject($` + client._bind(this.maxdate) + `) }`, change: client._event(`handleChange`, [`DRS2`]), datevalue: `{= Helper.DateCreateObject($` + client._bind(this.drs2.start, { name: `drs2-start` }) + `) }`, seconddatevalue: `{= Helper.DateCreateObject($` + client._bind(this.drs2.end, { name: `drs2-end` }) + `) }` });
-    vbox.label({ text: `DateRangeSelection with OK button in the footer and with shortcut for today:"`, labelfor: `DRS3` })
-      .date_range_selection({ id: `DRS3`, showfooter: true, change: client._event(`handleChange`, [`DRS3`]), datevalue: `{= Helper.DateCreateObject($` + client._bind(this.drs3.start, { name: `drs3-start` }) + `) }`, seconddatevalue: `{= Helper.DateCreateObject($` + client._bind(this.drs3.end, { name: `drs3-end` }) + `) }` });
-    vbox.label({ text: `DateRangeSelection with displayFormat 'MM/yyyy':`, labelfor: `DRS3` })
-      .date_range_selection({ id: `DRS4`, change: client._event(`handleChange`, [`DRS4`]), displayformat: `MM/yyyy`, datevalue: `{= Helper.DateCreateObject($` + client._bind(this.drs4.start, { name: `drs4-start` }) + `) }`, seconddatevalue: `{= Helper.DateCreateObject($` + client._bind(this.drs4.end, { name: `drs4-end` }) + `) }` });
-    vbox.label({ text: `DateRangeSelection with displayFormat 'MM/yyyy':`, labelfor: `DRS3` })
-      .date_range_selection({ id: `DRS5`, change: client._event(`handleChange`, [`DRS5`]), displayformat: `yyyy`, datevalue: `{= Helper.DateCreateObject($` + client._bind(this.drs5.start, { name: `drs5-start` }) + `) }`, seconddatevalue: `{= Helper.DateCreateObject($` + client._bind(this.drs5.end, { name: `drs5-end` }) + `) }` });
-    vbox.label({ text: `Change event`, labelfor: `TextEvent` });
-    vbox.text({ id: `TextEvent`, text: client._bind_edit(this.text) });
-    client.view_display(page.stringify());
-  }
-
-  initialize() {
-    this.drs1.start = `20140202`;
-    this.drs1.end = `20140217`;
-    this.drs2.start = `20160216`;
-    this.drs2.end = `20160218`;
-    this.drs3.start = `20140202`;
-    this.drs3.end = `20140217`;
-    this.drs4.start = `20190401`;
-    this.drs4.end = `20191001`;
-    this.drs5.start = `20150101`;
-    this.drs5.end = `20191001`;
-  }
-
-  on_event({ client } = {}) {
-    let sy_subrc = 0;
-    let fs_drs = null;
-    let _fs$fs_drs = null;
-    let args;
-    let source;
-    let drs;
-    if (client.check_on_event(`handleChange`)) {
-      args = client.get().T_EVENT_ARG;
-      source = z2ui5_cl_util.abap_copy(args[(1) - 1]);
-      // TODO(abap2js): ASSIGN me->(source) TO FIELD-SYMBOL(<drs>).
-      drs = ({ ...fs_drs });
-      this.text = `Id: ${source}
-` + `From: ${drs.start}
-` + `To: ${drs.end}`;
-    }
-  }
-
-  async main(client) {
-    if (client.check_on_init()) {
-      this.initialize();
-      this.view_display({ client: client });
-    } else {
-      client.view_model_update();
-    }
-    this.on_event({ client: client });
-  }
-}
-
-module.exports = z2ui5_cl_demo_app_231;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_232.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_232.js
index 52bd9cb..e981973 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_232.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_232.js
@@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_232 extends z2ui5_if_app {
     const page = z2ui5_cl_xml_view.factory()
       .shell()
       .page({ title: `Sample: MultiInput - Suggestions wrapping`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.MultiInput/sample/sap.m.sample.MultiInputWrapping` });
     const layout = page.vertical_layout({ class: `sapUiContentPadding`, width: `100%` });
     layout.label({ text: `Product`, labelfor: `wrappingMultiInput` });
     layout.multi_input({ id: `wrappingMultiInput`, placeholder: `Enter product`, showsuggestion: true, width: `50%` })
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_233.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_233.js
index 2696534..f9a5ca6 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_233.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_233.js
@@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_233 extends z2ui5_if_app {
     const page = z2ui5_cl_xml_view.factory()
       .shell()
       .page({ title: `Sample: MultiComboBox - Suggestions wrapping`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.MultiComboBox/sample/sap.m.sample.MultiComboBoxWrapping` });
     const layout = page.vertical_layout({ class: `sapUiContentPadding`, width: `100%` });
     layout.label({ text: `Product`, labelfor: `wrappingMultiComboBox` });
     layout.multi_combobox({ id: `wrappingMultiComboBox`, width: `350px` })
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_234.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_234.js
index cbf21de..6f6d40d 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_234.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_234.js
@@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_234 extends z2ui5_if_app {
     const page = z2ui5_cl_xml_view.factory()
       .shell()
       .page({ title: `abap2UI5 - Sample: TextArea - Value States`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.TextArea/sample/sap.m.sample.TextAreaValueStates` });
     const layout = page.vertical_layout({ class: `sapUiContentPadding`, width: `100%` })
       .content(`layout`)
       .text_area({ valuestate: `Warning`, placeholder: `ValueState : Warning`, width: `100%` })
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_235.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_235.js
index 0ef8fa9..afac623 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_235.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_235.js
@@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_235 extends z2ui5_if_app {
     const page_01 = z2ui5_cl_xml_view.factory()
       .shell()
       .page({ title: `abap2UI5 - Sample: Toolbar vs Bar vs OverflowToolbar`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
+    page_01.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.Toolbar/sample/sap.m.sample.ToolbarVsBar` });
     const page_02 = page_01.page({ title: `Bar can center a Title.`, titlelevel: `H2`, class: `sapUiContentPadding`, shownavbutton: true })
       .header_content()
       .button({ icon: `sap-icon://action` })
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_236.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_236.js
index ade635d..dca147a 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_236.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_236.js
@@ -6,6 +6,8 @@ class z2ui5_cl_demo_app_236 extends z2ui5_if_app {
     const page = z2ui5_cl_xml_view.factory()
       .shell()
       .page({ title: `abap2UI5 - Sample: TextArea - Growing`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.TextArea/sample/sap.m.sample.TextAreaGrowing` });
     const layout = page.vertical_layout({ class: `sapUiContentPadding`, width: `100%` })
       .content(`layout`)
       .message_strip({ showicon: true, text: `This TextArea shows up to 7 lines, then a scrollbar is presented.` })
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_237.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_237.js
index 18eb766..596bf3d 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_237.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_237.js
@@ -12,6 +12,8 @@ class z2ui5_cl_demo_app_237 extends z2ui5_if_app {
       .header_content()
       .button({ id: `hint_icon`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: client._event(`POPOVER`) })
       .get_parent();
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.Slider/sample/sap.m.sample.Slider` });
     const layout = page.vertical_layout({ class: `sapUiContentPadding`, width: `100%` })
       .text({ text: `Slider without text field`, class: `sapUiSmallMarginBottom` })
       .slider({ value: `30`, width: `90%`, class: `sapUiSmallMarginBottom` })
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_239.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_239.js
index 08ae864..9746765 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_239.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_239.js
@@ -14,6 +14,7 @@ class z2ui5_cl_demo_app_239 extends z2ui5_if_app {
     page.header_content()
       .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.CheckBox/sample/sap.m.sample.CheckBox` });
     const layout = page.vbox()
+      .checkbox()
       .checkbox({ text: `Option a`, selected: true })
       .checkbox({ text: `Option b` })
       .checkbox({ text: `Option c`, selected: true })
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_241.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_241.js
index 6369cb3..c820a45 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_241.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_241.js
@@ -14,7 +14,7 @@ class z2ui5_cl_demo_app_241 extends z2ui5_if_app {
     page.header_content()
       .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.TileContent/sample/sap.m.sample.TileContent` });
     const layout = page.grid({ containerquery: true, class: `sapUiSmallMarginTop` })
-      .tile_content({ footer: `Current Quarter`, unit: `EUR` })
+      .tile_content({ footer: `Current Quarter`, unit: `EUR`, class: `sapUiSmallMargin` })
       .numeric_content({ scale: `M`, value: `1.96`, valuecolor: `Error`, indicator: `Up` })
       .get_parent()
       .get_parent()
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_243.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_243.js
new file mode 100644
index 0000000..d7d51a1
--- /dev/null
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_243.js
@@ -0,0 +1,44 @@
+const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
+const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
+
+class z2ui5_cl_demo_app_243 extends z2ui5_if_app {
+  view_display({ client } = {}) {
+    const page = z2ui5_cl_xml_view.factory()
+      .shell()
+      .page({ title: `abap2UI5 - Sample: Negative Margins`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() })
+      .page({ showheader: `false`, class: `sapUiContentPadding` })
+      .sub_header()
+      .toolbar({ design: `Info` })
+      .icon({ src: `sap-icon://begin` })
+      .text(`This sample demonstrates classes which let you to add negative margin at two opposite sides (begin/end).`)
+      .get_parent()
+      .get_parent();
+    const layout = page.panel({ class: `sapUiTinyNegativeMarginBeginEnd` })
+      .content()
+      .text({ text: `This panel uses margin class 'sapUiTinyNegativeMarginBeginEnd' to add a -0.5rem space at the panel's left and right sides.`, class: `sapMH4FontSize` })
+      .get_parent()
+      .get_parent()
+      .panel({ class: `sapUiSmallNegativeMarginBeginEnd` })
+      .content()
+      .text({ text: `This panel uses margin class 'sapUiSmallNegativeMarginBeginEnd' to add a -1rem space at the panel's left and right sides.`, class: `sapMH4FontSize` })
+      .get_parent()
+      .get_parent()
+      .panel({ class: `sapUiMediumNegativeMarginBeginEnd` })
+      .content()
+      .text({ text: `This panel uses margin class 'sapUiMediumNegativeMarginBeginEnd' to add a -2rem space at the panel's left and right sides.`, class: `sapMH4FontSize` })
+      .get_parent()
+      .get_parent()
+      .panel({ class: `sapUiLargeNegativeMarginBeginEnd` })
+      .content()
+      .text({ text: `This panel uses margin class 'sapUiLargeNegativeMarginBeginEnd' to add a -3rem space at the panel's left and right sides.`, class: `sapMH4FontSize` });
+    client.view_display(page.stringify());
+  }
+
+  async main(client) {
+    if (client.check_on_init()) {
+      this.view_display({ client: client });
+    }
+  }
+}
+
+module.exports = z2ui5_cl_demo_app_243;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_250.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_250.js
index f255cd4..4c3524d 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_250.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_250.js
@@ -28,7 +28,7 @@ class z2ui5_cl_demo_app_250 extends z2ui5_if_app {
       .button({ text: `Centered content`, type: `Accept` })
       .toolbar_spacer()
       .get_parent()
-      .message_strip({ text: `Right aligned content.`, class: `sapUiTinyMargin` })
+      .message_strip({ text: `Right Aligned Content.`, class: `sapUiTinyMargin` })
       .overflow_toolbar({ class: `sapUiMediumMarginTop` })
       .toolbar_spacer()
       .button({ text: `Right aligned content`, type: `Accept` })
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_258.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_258.js
new file mode 100644
index 0000000..f0e3a95
--- /dev/null
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_258.js
@@ -0,0 +1,126 @@
+const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
+const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
+const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
+
+class z2ui5_cl_demo_app_258 extends z2ui5_if_app {
+  selected_menu_entry = ``;
+  client = null;
+
+  on_event({ client } = {}) {
+    switch (client.get().EVENT) {
+      case `MENU_HOME`:
+        client.message_toast_display(`Home Button pressed`);
+        this.selected_menu_entry = `Home`;
+        break;
+      case `MENU_HOME_1`:
+        client.message_toast_display(`Home Sub 1 Button pressed`);
+        this.selected_menu_entry = `Home1`;
+        break;
+      case `MENU_HOME_2`:
+        client.message_toast_display(`Home Sub 2 Button pressed`);
+        this.selected_menu_entry = `Home2`;
+        break;
+      case `MENU_HOME_3`:
+        client.message_toast_display(`Home Sub 3 Button pressed`);
+        this.selected_menu_entry = `Home3`;
+        break;
+      case `MENU_CUSTOMER`:
+        client.message_toast_display(`Customer Button pressed`);
+        this.selected_menu_entry = `Customers`;
+        break;
+      case `MENU_SUPPLIER`:
+        client.message_toast_display(`Supplier Button pressed`);
+        this.selected_menu_entry = `Suppliers`;
+        break;
+      case `MENU_FIX1`:
+        client.message_toast_display(`Fixed Button 1 pressed`);
+        this.selected_menu_entry = `Fix1`;
+        break;
+      case `MENU_FIX2`:
+        client.message_toast_display(`Fixed Button 2 pressed`);
+        this.selected_menu_entry = `Fix2`;
+        break;
+      case `MENU_FIX3`:
+        client.message_toast_display(`Fixed Button 3 pressed`);
+        this.selected_menu_entry = `Fix3`;
+        break;
+    }
+  }
+
+  render_main_view({ client } = {}) {
+    const view = z2ui5_cl_xml_view.factory();
+    view._generic({ ns: `html`, name: `style` })
+      ._cc_plain_xml(`.sapMPage>section { height: 100% }` + `#mainView--site_content { border-radius: 0.75em }`);
+    const page = view.page({ title: `abap2UI5 - Sample: Side Navigation`, navbuttonpress: client._event_nav_app_leave(), enablescrolling: false, class: `sapUiResponsivePadding--header sapUiResponsivePadding--content sapUiResponsivePadding--footer`, shownavbutton: client.check_app_prev_stack() });
+    const content = page.flex_box({ width: `100%`, height: `90%`, alignitems: `Start` });
+    const navlist = content.flex_box({ width: `100%`, height: `100%`, direction: `Column` })
+      .layout_data()
+      .flex_item_data({ growfactor: `1`, basesize: `0` })
+      .get_parent()
+      .side_navigation({ id: `sideNavigation`, class: `sapUiTinyMarginTop`, selectedkey: client._bind(this.selected_menu_entry) })
+      .navigation_list();
+    navlist.navigation_list_item({ text: `Home`, icon: `sap-icon://home`, select: client._event(`MENU_HOME`), key: `Home` })
+      .get_child()
+      .navigation_list_item({ text: `Home Sub 1`, select: client._event(`MENU_HOME_1`), key: `Home1` })
+      .navigation_list_item({ text: `Home Sub 2`, select: client._event(`MENU_HOME_2`), key: `Home2` })
+      .navigation_list_item({ text: `Home Sub 3`, select: client._event(`MENU_HOME_3`), key: `Home3` });
+    navlist.navigation_list_item({ text: `Customers`, icon: `sap-icon://customer`, select: client._event(`MENU_CUSTOMER`), key: `Customers` });
+    navlist.navigation_list_item({ text: `Suppliers`, icon: `sap-icon://supplier`, select: client._event(`MENU_SUPPLIER`), key: `Suppliers` });
+    navlist.get_parent()
+      .fixed_item()
+      .navigation_list()
+      .navigation_list_item({ text: `Fixed Entry 1`, icon: `sap-icon://heart`, select: client._event(`MENU_FIX1`), key: `Fix1` })
+      .navigation_list_item({ text: `Fixed Entry 2`, icon: `sap-icon://flight`, select: client._event(`MENU_FIX2`), key: `Fix2` })
+      .navigation_list_item({ text: `Fixed Entry 3`, icon: `sap-icon://email-read`, select: client._event(`MENU_FIX3`), key: `Fix3` })
+      .navigation_list_item({ text: `Link`, icon: `sap-icon://chain-link`, href: `https://github.com/abap2UI5/abap2UI5` });
+    const site_content = content.flex_box({ id: `site_content`, class: `sapUiTinyMarginTop sapUiTinyMarginBegin`, width: `100%`, height: `100%`, backgrounddesign: `Solid`, alignitems: `Center`, justifycontent: `Center` })
+      .layout_data()
+      .flex_item_data({ growfactor: `4`, backgrounddesign: `Solid` })
+      .get_parent();
+    this.render_site_content({ client, site_content });
+    client.view_display(page.stringify());
+  }
+
+  render_site_content({ client, site_content } = {}) {
+    switch (this.selected_menu_entry) {
+      case `Home`:
+        site_content.text(`Welcome to the Home Page`);
+        break;
+      case `Home1`:
+        site_content.text(`Welcome to the Home Sub Page 1`);
+        break;
+      case `Home2`:
+        site_content.text(`Welcome to the Home Sub Page 2`);
+        break;
+      case `Home3`:
+        site_content.text(`Welcome to the Home Sub Page 3`);
+        break;
+      case `Customers`:
+        site_content.text(`Welcome to the Customers Page`);
+        break;
+      case `Suppliers`:
+        site_content.text(`Welcome to the Suppliers Page`);
+        break;
+      case `Fix1`:
+        site_content.text(`Welcome to the first fixed Page`);
+        break;
+      case `Fix2`:
+        site_content.text(`Welcome to the second fixed Page`);
+        break;
+      case `Fix3`:
+        site_content.text(`Welcome to the third fixed Page`);
+        break;
+    }
+  }
+
+  async main(client) {
+    this.client = z2ui5_cl_util.abap_copy(client);
+    if (client.check_on_init()) {
+      this.selected_menu_entry = `Home`;
+    }
+    this.on_event({ client: client });
+    this.render_main_view({ client: client });
+  }
+}
+
+module.exports = z2ui5_cl_demo_app_258;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_259.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_259.js
index 1b8f002..138d93b 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_259.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_259.js
@@ -91,7 +91,7 @@ class z2ui5_cl_demo_app_259 extends z2ui5_if_app {
         this.popover_display({ id: `button_hint_id` });
         break;
       case `onPress`:
-        client.message_toast_display(`${client.get_event_arg(1)} Pressed`);
+        client.message_toast_display(`${client.get_event_arg()} Pressed`);
         break;
     }
   }
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_261.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_261.js
index 60ccbe4..ba98dff 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_261.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_261.js
@@ -12,7 +12,7 @@ class z2ui5_cl_demo_app_261 extends z2ui5_if_app {
     page.header_content()
       .button({ id: `hint_icon`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: client._event(`POPOVER`) });
     page.header_content()
-      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/#/entity/sap.m.NewsContent/sample/sap.m.sample.NewsContent` });
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.NewsContent/sample/sap.m.sample.NewsContent` });
     page.tile_content({ class: `sapUiSmallMargin` })
       .content()
       .news_content({ contenttext: `SAP Unveils Powerful New Player Comparison Tool Exclusively on NFL.com`, subheader: `August 21, 2013`, press: client._event(`NEWS_CONTENT_PRESS`) });
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_264.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_264.js
index f8b65d0..432710c 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_264.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_264.js
@@ -46,7 +46,7 @@ class z2ui5_cl_demo_app_264 extends z2ui5_if_app {
       sy_tabix = 0;
       for (const fs_fs_a_data of this.lt_a_data) {
         sy_tabix++;
-        fs_fs_a_data.label = this.s_text + ` ` + fs_fs_a_data.value_state;
+        fs_fs_a_data.label = this.s_text + fs_fs_a_data.value_state;
       }
     }
     this.on_event({ client: client });
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_265.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_265.js
index d16a82e..70649ea 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_265.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_265.js
@@ -12,7 +12,7 @@ class z2ui5_cl_demo_app_265 extends z2ui5_if_app {
     page.header_content()
       .button({ id: `button_hint_id`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: client._event(`CLICK_HINT_ICON`) });
     page.header_content()
-      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk#/entity/sap.ui.codeeditor.CodeEditor/sample/sap.ui.codeeditor.sample.CodeEditor` });
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.ui.codeeditor.CodeEditor/sample/sap.ui.codeeditor.sample.CodeEditor` });
     page.code_editor({ type: `json`, value: `\\{  ` + ` "Chinese" : "你好世界",  ` + ` "Dutch" : "Hallo wereld",  ` + ` "English" : "Hello world",  ` + ` "French" : "Bonjour monde",  ` + ` "German" : "Hallo Welt",  ` + ` "Greek" : "γειά σου κόσμος",  ` + ` "Italian" : "Ciao mondo",  ` + ` "Japanese" : "こんにちは世界",  ` + ` "Korean" : "여보세요 세계",  ` + ` "Portuguese" : "Olá mundo",  ` + ` "Russian" : "Здравствуй мир",  ` + ` "Spanish" : "Hola mundo"  ` + `}`, height: `300px` });
     client.view_display(page.stringify());
   }
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_266.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_266.js
index 5d56b0f..af9eccb 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_266.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_266.js
@@ -12,7 +12,7 @@ class z2ui5_cl_demo_app_266 extends z2ui5_if_app {
     page_01.header_content()
       .button({ id: `button_hint_id`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: client._event(`CLICK_HINT_ICON`) });
     page_01.header_content()
-      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/#/entity/sap.m.ToggleButton/sample/sap.m.sample.ToggleButton` });
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.ToggleButton/sample/sap.m.sample.ToggleButton` });
     const page_02 = page_01.page({ title: `Page`, class: `sapUiContentPadding` })
       .custom_header()
       .bar()
@@ -73,7 +73,7 @@ class z2ui5_cl_demo_app_266 extends z2ui5_if_app {
         this.popover_display({ id: `button_hint_id` });
         break;
       case `onPress`:
-        if (client.get_event_arg(1) === `X`) {
+        if (client.get_event_arg() === `X`) {
           client.message_toast_display(`${client.get_event_arg(2)} Pressed`);
         } else {
           client.message_toast_display(`${client.get_event_arg(2)} Unpressed`);
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_272.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_272.js
index c8d0d29..0028bcf 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_272.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_272.js
@@ -20,7 +20,7 @@ class z2ui5_cl_demo_app_272 extends z2ui5_if_app {
     page.header_content(`uxap`)
       .button({ id: `button_hint_id`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: client._event(`CLICK_HINT_ICON`) });
     page.header_content(`uxap`)
-      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: base_url + `sdk/#/api/sap.uxap.ObjectPageHeader` });
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: base_url + `sdk/#/entity/sap.m.ObjectHeader/sample/sap.m.sample.ObjectHeaderCircleImage` });
     client.view_display(view.stringify());
   }
 
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_276.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_276.js
index 2bf4a14..cd27ec3 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_276.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_276.js
@@ -6,7 +6,6 @@ class z2ui5_cl_demo_app_276 extends z2ui5_if_app {
   client = null;
 
   view_display({ client } = {}) {
-    const css = `.tileLayout {` + `    float: left;` + `}`;
     const page = z2ui5_cl_xml_view.factory()
       .shell()
       .page({ title: `abap2UI5 - Sample: Monitor Tile`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
@@ -14,13 +13,14 @@ class z2ui5_cl_demo_app_276 extends z2ui5_if_app {
       .button({ id: `button_hint_id`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: client._event(`CLICK_HINT_ICON`) });
     page.header_content()
       .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.GenericTile/sample/sap.m.sample.GenericTileAsMonitorTile` });
-    page.generic_tile({ class: `sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout`, header: `Cumulative Totals`, subheader: `Expenses`, press: client._event(`press`) })
+    page.hbox({ alignitems: `Start` })
+      .generic_tile({ class: `sapUiTinyMarginBegin sapUiTinyMarginTop`, header: `Cumulative Totals`, subheader: `Expenses`, press: client._event(`press`) })
       .tile_content({ unit: `Unit`, footer: `Footer Text` })
       .numeric_content({ value: `1762`, icon: `sap-icon://line-charts`, withmargin: false })
       .get_parent()
       .get_parent()
       .get_parent()
-      .generic_tile({ class: `sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout`, header: `Cumulative Totals`, subheader: `Expenses`, press: client._event(`press`) })
+      .generic_tile({ class: `sapUiTinyMarginBegin sapUiTinyMarginTop`, header: `Cumulative Totals`, subheader: `Expenses`, press: client._event(`press`) })
       .tile_content({ unit: `Unit`, footer: `Footer Text` })
       .numeric_content({ value: `12`, withmargin: false });
     client.view_display(page.stringify());
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_279.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_279.js
index 01f3009..b17e61d 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_279.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_279.js
@@ -19,7 +19,7 @@ class z2ui5_cl_demo_app_279 extends z2ui5_if_app {
     box.button({ text: `Reset`, press: this.client._event(`reset`), class: `sapUiSmallMarginBegin`, visible: this.client._bind(this.dirty) });
     page._z2ui5().dirty(this.client._bind(this.dirty));
     this.client.view_display(page.stringify());
-    this.client.action.gen({ val: z2ui5_if_client.cs_event.set_focus, t_arg: [`input`] });
+    this.client.follow_up_action({ val: z2ui5_if_client.cs_event.set_focus, t_arg: [`input`] });
   }
 
   on_event() {
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_282.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_282.js
index 799b858..d1e6185 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_282.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_282.js
@@ -90,7 +90,7 @@ class z2ui5_cl_demo_app_282 extends z2ui5_if_app {
         this.popover_display({ id: `button_hint_id` });
         break;
       case `onPress`:
-        client.message_toast_display(`${client.get_event_arg(1)} Pressed`);
+        client.message_toast_display(`${client.get_event_arg()} Pressed`);
         break;
     }
   }
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_283.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_283.js
index ee9b3ed..168a1ab 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_283.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_283.js
@@ -37,7 +37,7 @@ class z2ui5_cl_demo_app_283 extends z2ui5_if_app {
         this.popover_display({ id: `button_hint_id` });
         break;
       case `onPost`:
-        client.message_toast_display(`Posted new feed entry: ${client.get_event_arg(1)}`);
+        client.message_toast_display(`Posted new feed entry: ${client.get_event_arg()}`);
         break;
     }
   }
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_287.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_287.js
index 7094a44..80f7238 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_287.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_287.js
@@ -4,6 +4,7 @@ const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
 
 class z2ui5_cl_demo_app_287 extends z2ui5_if_app {
   lt_o_model = [];
+  wrapping = false;
   client = null;
 
   view_display({ client } = {}) {
@@ -14,9 +15,16 @@ class z2ui5_cl_demo_app_287 extends z2ui5_if_app {
       .button({ id: `button_hint_id`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: client._event(`CLICK_HINT_ICON`) });
     page.header_content()
       .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.StandardListItem/sample/sap.m.sample.StandardListItemWrapping` });
-    page.list({ id: `myList`, mode: `MultiSelect`, headertext: `Wrapping texts`, items: client._bind(this.lt_o_model) })
+    page.list({ id: `myList`, mode: `MultiSelect`, items: client._bind(this.lt_o_model) })
+      .header_toolbar()
+      .toolbar()
+      .title(`Wrapping texts`)
+      .toolbar_spacer()
+      .toggle_button({ text: `Toggle Wrapping`, pressed: client._bind_edit(this.wrapping) })
+      .get_parent()
+      .get_parent()
       .items()
-      .standard_list_item({ title: `{TITLE}`, description: `{DESC}`, icon: `{ICON}`, iconinset: false, highlight: `{HIGHLIGHT}`, info: `{INFO}`, infostate: `{HIGHLIGHT}`, type: `Detail`, wrapping: true, wrapcharlimit: `{WRAPCHARLIMIT}` });
+      .standard_list_item({ title: `{TITLE}`, description: `{DESC}`, icon: `{ICON}`, iconinset: false, highlight: `{HIGHLIGHT}`, info: `{INFO}`, infostate: `{HIGHLIGHT}`, type: `Detail`, wrapping: client._bind_edit(this.wrapping), wrapcharlimit: `{WRAPCHARLIMIT}` });
     client.view_display(page.stringify());
   }
 
@@ -37,7 +45,7 @@ class z2ui5_cl_demo_app_287 extends z2ui5_if_app {
     this.client = z2ui5_cl_util.abap_copy(client);
     if (client.check_on_init()) {
       this.view_display({ client: client });
-      this.lt_o_model = [{ title: `wrapCharLimit is set to Default. Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ` + `At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. ` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.`, desc: `Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ` + `At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. ` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.`, icon: `sap-icon://favorite`, highlight: `Success`, info: `Completed` }, { title: `wrapCharLimit is set to 100. Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ` + `At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. ` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.`, desc: `Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.`, icon: `sap-icon://employee`, highlight: `Error`, info: `Incomplete`, wrapcharlimit: 100 }, { title: `Title text`, desc: `Description text`, icon: `sap-icon://accept`, highlight: `Information`, info: `Information`, wrapcharlimit: 10 }];
+      this.lt_o_model = [{ title: `Short title`, icon: `sap-icon://favorite`, highlight: `Success`, info: `Available` }, { title: `Short title with long info text`, icon: `sap-icon://employee`, highlight: `Error`, info: `This is a very long information status text that demonstrates truncation and wrapping behavior` }, { title: `wrapCharLimit is set to Default. Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ` + `At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. ` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.`, desc: `Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ` + `At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. ` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.`, icon: `sap-icon://favorite`, highlight: `Success`, info: `Completed` }, { title: `wrapCharLimit is set to 100. Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ` + `At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. ` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.`, desc: `Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.`, icon: `sap-icon://employee`, highlight: `Error`, info: `Incomplete`, wrapcharlimit: 100 }, { title: `Title text`, desc: `Description text`, icon: `sap-icon://accept`, highlight: `Information`, info: `Information`, wrapcharlimit: 10 }];
     }
     this.on_event({ client: client });
   }
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_289.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_289.js
index cecf87e..c4f6d30 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_289.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_289.js
@@ -41,7 +41,7 @@ class z2ui5_cl_demo_app_289 extends z2ui5_if_app {
         this.popover_display({ id: `button_hint_id` });
         break;
       case `onPress`:
-        client.message_toast_display(`${client.get_event_arg(1)} marker pressed!`);
+        client.message_toast_display(`${client.get_event_arg()} marker pressed!`);
         break;
     }
   }
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_290.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_290.js
index c893683..1a4903e 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_290.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_290.js
@@ -79,7 +79,7 @@ class z2ui5_cl_demo_app_290 extends z2ui5_if_app {
         this.popover_display({ id: `button_hint_id` });
         break;
       case `onListItemPress`:
-        client.message_toast_display(`Pressed: ${client.get_event_arg(1)}`);
+        client.message_toast_display(`Pressed: ${client.get_event_arg()}`);
         break;
     }
   }
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_292.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_292.js
index 77defd8..0de58c0 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_292.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_292.js
@@ -15,25 +15,13 @@ class z2ui5_cl_demo_app_292 extends z2ui5_if_app {
       .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.Breadcrumbs/sample/sap.m.sample.BreadcrumbsWithCurrentPageLink` });
     page.vertical_layout({ class: `sapUiContentPadding`, width: `100%` })
       .title(`Breadcrumbs with current page aggregation set`)
-      .breadcrumbs({ id: `idBreadcrumbs`, separatorstyle: `{/selected}`, currentlocationtext: `Page 7` })
+      .breadcrumbs({ id: `idBreadcrumbs`, currentlocationtext: `Page 6` })
       .link({ text: `Home`, press: client._event(`onPress`, [`\${$source>/text}`]) })
       .link({ text: `Page 1`, press: client._event(`onPress`, [`\${$source>/text}`]) })
       .link({ text: `Page 2`, press: client._event(`onPress`, [`\${$source>/text}`]) })
       .link({ text: `Page 3`, press: client._event(`onPress`, [`\${$source>/text}`]) })
       .link({ text: `Page 4`, press: client._event(`onPress`, [`\${$source>/text}`]) })
-      .link({ text: `Page 5`, press: client._event(`onPress`, [`\${$source>/text}`]) })
-      .link({ text: `Page 6`, press: client._event(`onPress`, [`\${$source>/text}`]) })
-      .get_parent()
-      .get_parent();
-    page.hbox({ alignitems: `Center` })
-      .label({ labelfor: `idSeparatorSelect`, text: `Change separator style` })
-      .select({ class: `sapUiSmallMarginBegin`, id: `idSeparatorSelect`, selectedkey: `{/selected}`, change: `onChange` })
-      .item({ key: `Slash`, text: `Slash` })
-      .item({ key: `BackSlash`, text: `BackSlash` })
-      .item({ key: `DoubleSlash`, text: `DoubleSlash` })
-      .item({ key: `DoubleBackSlash`, text: `DoubleBackSlash` })
-      .item({ key: `GreaterThan`, text: `GreaterThan` })
-      .item({ key: `DoubleGreaterThan`, text: `DoubleGreaterThan` });
+      .link({ text: `Page 5`, press: client._event(`onPress`, [`\${$source>/text}`]) });
     client.view_display(page.stringify());
   }
 
@@ -43,7 +31,7 @@ class z2ui5_cl_demo_app_292 extends z2ui5_if_app {
         this.popover_display({ id: `button_hint_id` });
         break;
       case `onPress`:
-        client.message_toast_display(`${client.get_event_arg(1)} has been clicked`);
+        client.message_toast_display(`${client.get_event_arg()} has been clicked`);
         break;
     }
   }
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_294.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_294.js
index 66ba167..2a758ea 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_294.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_294.js
@@ -17,7 +17,7 @@ class z2ui5_cl_demo_app_294 extends z2ui5_if_app {
       .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.DatePicker/sample/sap.m.sample.DatePickerValueState` });
     page.flex_box({ items: client._bind(this.lt_a_data), direction: `Column` })
       .vbox(`sapUiTinyMargin`)
-      .label({ text: `{LABEL}`, labelfor: `SI` })
+      .label({ text: `{LABEL}`, labelfor: `DP` })
       .date_picker({ id: `DP`, width: `100%`, valuestate: `{VALUE_STATE}`, valuestatetext: `{VALUE_STATE_TEXT}` })
       .get_parent()
       .get_parent();
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_295.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_295.js
index 19991d6..d37dabd 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_295.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_295.js
@@ -17,7 +17,7 @@ class z2ui5_cl_demo_app_295 extends z2ui5_if_app {
     page.flex_box({ items: client._bind(this.t_data), direction: `Column` })
       .vbox(`sapUiTinyMargin`)
       .label(`{LABEL}`)
-      .date_range_selection({ width: `100%`, valuestate: `{VALUE_STATE}`, valuestatetext: `{VALUE_STATE_TEXT}` })
+      .date_range_selection({ width: `100%`, delimiter: `–`, valuestate: `{VALUE_STATE}`, valuestatetext: `{VALUE_STATE_TEXT}` })
       .get_parent()
       .get_parent();
     client.view_display(page.stringify());
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_296.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_296.js
index 7a93b63..f7aa5e6 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_296.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_296.js
@@ -16,7 +16,7 @@ class z2ui5_cl_demo_app_296 extends z2ui5_if_app {
     page_01.page({ showheader: false })
       .sub_header()
       .toolbar()
-      .search_field({ width: `100%`, search: client._event(`onSearch`) })
+      .search_field({ width: `100%`, search: client._event(`onSearch`, [`\${$parameters>/searchButtonPressed}`]) })
       .text({ text: `Default Search`, id: `idSearchListToolbar` })
       .get_parent()
       .get_parent()
@@ -33,7 +33,9 @@ class z2ui5_cl_demo_app_296 extends z2ui5_if_app {
         this.popover_display({ id: `button_hint_id` });
         break;
       case `onSearch`:
-        client.message_toast_display(`'search' event fired with 'searchButtonPressed' parameter`);
+        if (client.get_event_arg() === `true`) {
+          client.message_toast_display(`'search' event fired with 'searchButtonPressed' parameter`);
+        }
         break;
     }
   }
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_300.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_300.js
index 974d835..1dd9660 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_300.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_300.js
@@ -14,7 +14,7 @@ class z2ui5_cl_demo_app_300 extends z2ui5_if_app {
     page_01.header_content()
       .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.ObjectStatus/sample/sap.m.sample.ObjectStatus` });
     page_01.vertical_layout({ width: `100%` })
-      .block_layout({ background: `transparent` })
+      .block_layout()
       .block_layout_row()
       .block_layout_cell()
       .vertical_layout({ class: `sapUiContentPadding`, width: `100%` })
@@ -57,7 +57,7 @@ class z2ui5_cl_demo_app_300 extends z2ui5_if_app {
       .get_parent()
       .get_parent();
     page_01.vertical_layout({ class: `sapUiContentPadding`, width: `100%` })
-      .block_layout({ background: `transparent` })
+      .block_layout()
       .block_layout_row()
       .block_layout_cell()
       .label({ text: `ObjectStatus with different indication states.`, design: `Bold`, wrapping: true, class: `sapUiSmallMarginBottom` })
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_302.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_302.js
index 37d02c7..278fd74 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_302.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_302.js
@@ -41,7 +41,7 @@ class z2ui5_cl_demo_app_302 extends z2ui5_if_app {
         this.popover_display({ id: `button_hint_id` });
         break;
       case `onPress`:
-        client.message_toast_display(`${client.get_event_arg(1)} marker pressed!`);
+        client.message_toast_display(`${client.get_event_arg()} marker pressed!`);
         break;
     }
   }
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_303.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_303.js
index b3f3a01..9762131 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_303.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_303.js
@@ -6,6 +6,9 @@ class z2ui5_cl_demo_app_303 extends z2ui5_if_app {
     const view = z2ui5_cl_xml_view.factory();
     const object_page_layout = view.shell()
       .page({ title: `Object Page Header with Header Container`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() })
+      .header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.uxap.ObjectPageLayout/sample/sap.uxap.sample.ObjectPageWithHeaderContainer` })
+      .get_parent()
       .object_page_layout({ showtitleinheadercontent: `Title`, uppercaseanchorbar: false });
     const header_title = object_page_layout.header_title().object_page_dyn_header_title();
     header_title.expanded_heading().title({ text: `Object Page Header with Header Container`, wrapping: true });
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_306.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_306.js
index 5053040..e2f9f45 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_306.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_306.js
@@ -45,6 +45,7 @@ class z2ui5_cl_demo_app_306 extends z2ui5_if_app {
   }
 
   async main(client) {
+    let sy_uzeit = "";
     this.client = z2ui5_cl_util.abap_copy(client);
     if (client.check_on_init()) {
       this.facing_modes = [{ key: ``, text: `` }, { key: `environment`, text: `environment` }, { key: `user`, text: `user` }, { key: `left`, text: `left` }, { key: `right`, text: `right` }];
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_307.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_307.js
index 1db0ef0..2dbd436 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_307.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_307.js
@@ -24,6 +24,8 @@ class z2ui5_cl_demo_app_307 extends z2ui5_if_app {
     const view = z2ui5_cl_xml_view.factory();
     const page = view.shell()
       .page({ title: `Grid List with Drag and Drop`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.f.GridList/sample/sap.f.sample.GridListDragAndDrop` });
     page.panel({ id: `panelForGridList`, backgrounddesign: `Transparent` })
       .header_toolbar()
       .toolbar({ height: `3rem` })
@@ -47,7 +49,7 @@ class z2ui5_cl_demo_app_307 extends z2ui5_if_app {
       .title({ text: `{TITLE}`, wrapping: true })
       .label({ text: `{SUBTITLE}`, wrapping: true });
     client.view_display(view.stringify());
-    client.action.gen({ val: z2ui5_if_client.cs_event.set_title, t_arg: [`Grid List with Drag and Drop`] });
+    client.follow_up_action({ val: z2ui5_if_client.cs_event.set_title, t_arg: [`Grid List with Drag and Drop`] });
   }
 
   on_event({ client } = {}) {
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_316.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_316.js
index e50d009..4b8ecab 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_316.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_316.js
@@ -38,7 +38,7 @@ class z2ui5_cl_demo_app_316 extends z2ui5_if_app {
     url_form.input({ id: `inputUrl`, value: client._bind_edit(this.url.url, { name: `url-url` }), type: `Url`, placeholder: `Enter URL`, class: `sapUiSmallMarginBottom` });
     url_form.button({ text: `Redirect`, press: client._event_client(client.cs_event.urlhelper, [`REDIRECT`, `$${client._bind_edit(this.url)}`]) });
     client.view_display(page.stringify());
-    client.action.gen({ val: z2ui5_if_client.cs_event.set_title, t_arg: [`URL Helper Sample`] });
+    client.follow_up_action({ val: z2ui5_if_client.cs_event.set_title, t_arg: [`URL Helper Sample`] });
   }
 
   async main(client) {
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_325.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_325.js
index 54f699b..602c9cb 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_325.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_325.js
@@ -42,11 +42,11 @@ class z2ui5_cl_demo_app_325 extends z2ui5_if_app {
     }
     switch (client.get().EVENT) {
       case `COPY_INPUT`:
-        client.action.gen({ val: z2ui5_if_client.cs_event.clipboard_copy, t_arg: [this.input] });
+        client.follow_up_action({ val: z2ui5_if_client.cs_event.clipboard_copy, t_arg: [this.input] });
         client.message_toast_display(`input field copied: ${this.input}`);
         break;
       case `COPY_TEXT_AREA`:
-        client.action.gen({ val: z2ui5_if_client.cs_event.clipboard_copy, t_arg: [this.text] });
+        client.follow_up_action({ val: z2ui5_if_client.cs_event.clipboard_copy, t_arg: [this.text] });
         client.message_toast_display(`text area copied: ${this.text}`);
         break;
     }
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_330.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_330.js
index de31c0d..8476871 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_330.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_330.js
@@ -9,6 +9,9 @@ class z2ui5_cl_demo_app_330 extends z2ui5_if_app {
     const view = z2ui5_cl_xml_view.factory();
     const object_page_layout = view.shell()
       .page({ title: `Robot Arm Series 9`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() })
+      .header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.uxap.ObjectPageLayout/sample/sap.uxap.sample.ObjectPageSectionShowTitle` })
+      .get_parent()
       .object_page_layout({ uppercaseanchorbar: false });
     const header_title = object_page_layout.header_title().object_page_dyn_header_title();
     header_title.expanded_heading().title(`Robot Arm Series 9`);
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_352.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_352.js
index 881cd15..a331c44 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_352.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_352.js
@@ -11,8 +11,8 @@ class z2ui5_cl_demo_app_352 extends z2ui5_if_app {
     this.client = z2ui5_cl_util.abap_copy(client);
     if (client.check_on_init()) {
       this.view_display();
-      client.action.gen({ val: z2ui5_if_client.cs_event.set_focus, t_arg: [`ZINPUT`] });
-      client.action.gen({ val: z2ui5_if_client.cs_event.keyboard_set_mode, t_arg: [`ZINPUT`, `numeric`] });
+      client.follow_up_action({ val: z2ui5_if_client.cs_event.set_focus, t_arg: [`ZINPUT`] });
+      client.follow_up_action({ val: z2ui5_if_client.cs_event.keyboard_set_mode, t_arg: [`ZINPUT`, `numeric`] });
     }
     this.on_event();
   }
@@ -31,7 +31,7 @@ class z2ui5_cl_demo_app_352 extends z2ui5_if_app {
 
   on_event() {
     if (this.client.check_on_event(`CALL_KEYBOARD`)) {
-      this.client.action.gen({ val: z2ui5_if_client.cs_event.keyboard_set_mode, t_arg: [`ZINPUT`, `none`] });
+      this.client.follow_up_action({ val: z2ui5_if_client.cs_event.keyboard_set_mode, t_arg: [`ZINPUT`, `none`] });
     }
   }
 }
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_361.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_361.js
new file mode 100644
index 0000000..a7cacab
--- /dev/null
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_361.js
@@ -0,0 +1,25 @@
+const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
+const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
+
+class z2ui5_cl_demo_app_361 extends z2ui5_if_app {
+  async main(client) {
+    let view;
+    let page;
+    if (client.check_on_init()) {
+      view = z2ui5_cl_xml_view.factory();
+      page = view.shell()
+        .page({ title: `abap2UI5 - System Logout`, navbuttonpress: client._event_nav_app_leave(), shownavbutton: client.check_app_prev_stack() });
+      page.message_strip({ text: `Trigger SYSTEM_LOGOUT on the client. Inside a Fiori Launchpad the shell container handles the sign-out; otherwise the app navigates to the ICF logoff endpoint.`, type: `Information`, showicon: true, class: `sapUiMediumMargin` })
+        .button({ text: `Logout now`, icon: `sap-icon://log`, type: `Reject`, class: `sapUiSmallMargin`, press: client._event_client(client.cs_event.system_logout) });
+      page.message_strip({ text: `Trigger SYSTEM_LOGOUT on the client and a redirect to google.com`, type: `Information`, showicon: true, class: `sapUiMediumMargin` })
+        .button({ text: `Logout now`, icon: `sap-icon://log`, type: `Reject`, class: `sapUiSmallMargin`, press: client._event_client(client.cs_event.system_logout, [`/sap/public/bc/icf/logoff?redirecturl=www.google.com`]) });
+      page.message_strip({ text: `Trigger Event LOGOUT which is handled in the APP.`, type: `Information`, showicon: true, class: `sapUiMediumMargin` })
+        .button({ text: `Logout now`, icon: `sap-icon://log`, type: `Reject`, class: `sapUiSmallMargin`, press: client._event(`LOGOUT`) });
+      client.view_display(view.stringify());
+    } else if (client.check_on_event(`LOGOUT`)) {
+      client.follow_up_action(client.cs_event.system_logout);
+    }
+  }
+}
+
+module.exports = z2ui5_cl_demo_app_361;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_362.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_362.js
index 56a1352..0145441 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_362.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_362.js
@@ -26,16 +26,16 @@ class z2ui5_cl_demo_app_362 extends z2ui5_if_app {
   on_event() {
     switch (this.client.get().EVENT) {
       case `SCROLL_TOP`:
-        this.client.action.gen({ val: z2ui5_if_client.cs_event.scroll_to, t_arg: [`id_page`, `0`, `0`, `smooth`] });
+        this.client.follow_up_action({ val: z2ui5_if_client.cs_event.scroll_to, t_arg: [`id_page`, `0`, `0`, `smooth`] });
         break;
       case `SCROLL_MIDDLE`:
-        this.client.action.gen({ val: z2ui5_if_client.cs_event.scroll_to, t_arg: [`id_page`, `1500`, `0`, `smooth`] });
+        this.client.follow_up_action({ val: z2ui5_if_client.cs_event.scroll_to, t_arg: [`id_page`, `1500`, `0`, `smooth`] });
         break;
       case `SCROLL_BOTTOM`:
-        this.client.action.gen({ val: z2ui5_if_client.cs_event.scroll_to, t_arg: [`id_page`, `99999`, `0`, `smooth`] });
+        this.client.follow_up_action({ val: z2ui5_if_client.cs_event.scroll_to, t_arg: [`id_page`, `99999`, `0`, `smooth`] });
         break;
       case `SCROLL_JUMP`:
-        this.client.action.gen({ val: z2ui5_if_client.cs_event.scroll_to, t_arg: [`id_page`, `1500`, `0`] });
+        this.client.follow_up_action({ val: z2ui5_if_client.cs_event.scroll_to, t_arg: [`id_page`, `1500`, `0`] });
         break;
       case `REFRESH`:
         this.restore_scroll();
@@ -49,7 +49,7 @@ class z2ui5_cl_demo_app_362 extends z2ui5_if_app {
     if (!scroll.ID) {
       return;
     }
-    this.client.action.gen({ val: z2ui5_if_client.cs_event.scroll_to, t_arg: [scroll.ID, `${scroll.Y}`, `${scroll.X}`] });
+    this.client.follow_up_action({ val: z2ui5_if_client.cs_event.scroll_to, t_arg: [scroll.ID, `${scroll.Y}`, `${scroll.X}`] });
   }
 
   view_display() {
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_363.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_363.js
index 5798414..fd68015 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_363.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_363.js
@@ -47,7 +47,7 @@ class z2ui5_cl_demo_app_363 extends z2ui5_if_app {
         return;
         break;
     }
-    this.client.action.gen({ val: z2ui5_if_client.cs_event.scroll_into_view, t_arg: [target, behavior, block] });
+    this.client.follow_up_action({ val: z2ui5_if_client.cs_event.scroll_into_view, t_arg: [target, behavior, block] });
   }
 
   view_display() {
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_364.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_364.js
deleted file mode 100644
index 7fc4607..0000000
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_364.js
+++ /dev/null
@@ -1,63 +0,0 @@
-const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
-const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
-const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
-
-class z2ui5_cl_demo_app_364 extends z2ui5_if_app {
-  t_tree = [];
-  client = null;
-
-  async main(client) {
-    this.client = z2ui5_cl_util.abap_copy(client);
-    if (client.check_on_init()) {
-      this.on_init();
-    } else if (client.check_on_event()) {
-      this.on_event();
-    }
-  }
-
-  on_init() {
-    this.t_tree = [{ user: `Manager`, enabled: false, nodes: [{ user: `Employee 1`, enabled: true }, { user: `Employee 2`, enabled: true }, { user: `Employee 3`, enabled: true }] }];
-    this.view_display();
-  }
-
-  on_event() {
-    let sy_tabix = 0;
-    let counter;
-    switch (this.client.get().EVENT) {
-      case `BUTTON_SAVE`:
-        counter = 0;
-        sy_tabix = 0;
-        for (const s_tree of this.t_tree) {
-          sy_tabix++;
-          const _sy_tabix_1 = sy_tabix;
-          sy_tabix = 0;
-          for (const s_node of s_tree.nodes) {
-            sy_tabix++;
-            if (!((s_node.validated === true || s_node.validated === `X`))) continue;
-            counter = counter + 1;
-          }
-          sy_tabix = _sy_tabix_1;
-        }
-        this.client.message_toast_display(`Saved ${counter} checkbox(es)`);
-        break;
-    }
-  }
-
-  view_display() {
-    const view = z2ui5_cl_xml_view.factory();
-    const page = view.shell()
-      .page({ title: `Account Validation`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() });
-    page.overflow_toolbar()
-      .content()
-      .button({ icon: `sap-icon://save`, text: `Save`, press: this.client._event(`BUTTON_SAVE`) });
-    const columns = page.tree_table({ id: `treeTable`, rows: `{path:'` + this.client._bind_edit(this.t_tree, { path: true }) + `', parameters: {arrayNames:['NODES'], numberOfExpandedLevels: 1}}`, selectionmode: `None` })
-      .tree_columns();
-    columns.tree_column(`User`).tree_template().text(`{USER}`);
-    columns.tree_column(`Validated`)
-      .tree_template()
-      .checkbox({ selected: `{VALIDATED}`, enabled: `{ENABLED}`, valuestate: `Success` });
-    this.client.view_display(view.stringify());
-  }
-}
-
-module.exports = z2ui5_cl_demo_app_364;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_368.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_368.js
index 92e1752..52c1464 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_368.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_368.js
@@ -28,7 +28,7 @@ class z2ui5_cl_demo_app_368 extends z2ui5_if_app {
     page.header_content()
       .button({ id: `button_hint_id`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: this.client._event(`CLICK_HINT_ICON`) });
     page.header_content()
-      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.IconTabBar` });
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.IconTabBar/sample/sap.m.sample.IconTabBar` });
     const items = page.icon_tab_bar({ class: `sapUiResponsiveContentPadding`, selectedkey: this.client._bind_edit(this.selectedkey), select: this.client._event(`TAB_SELECT`) })
       .items();
     items.icon_tab_filter({ count: this.client._bind(this.cnt_total), text: `Products`, key: `ALL`, showall: true });
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_370.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_370.js
deleted file mode 100644
index 3d48cec..0000000
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_370.js
+++ /dev/null
@@ -1,58 +0,0 @@
-const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
-const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
-const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
-
-class z2ui5_cl_demo_app_370 extends z2ui5_if_app {
-  t_products = [];
-  client = null;
-
-  async main(client) {
-    this.client = z2ui5_cl_util.abap_copy(client);
-    if (client.check_on_init()) {
-      this.t_products = [{ productid: `1`, productname: `table`, suppliername: `Company 1` }, { productid: `2`, productname: `chair`, suppliername: `Company 2` }, { productid: `3`, productname: `sofa`, suppliername: `Company 3` }, { productid: `4`, productname: `computer`, suppliername: `Company 4` }, { productid: `5`, productname: `printer`, suppliername: `Company 5` }, { productid: `6`, productname: `table2`, suppliername: `Company 6` }];
-      this.view_display();
-    } else {
-      this.on_event();
-    }
-  }
-
-  view_display() {
-    const page = z2ui5_cl_xml_view.factory()
-      .shell()
-      .page({ title: `abap2UI5 - Sample: Object Identifier inside a Table`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() });
-    page.header_content()
-      .button({ id: `button_hint_id`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: this.client._event(`CLICK_HINT_ICON`) });
-    page.header_content()
-      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.ObjectIdentifier` });
-    page.table(this.client._bind(this.t_products))
-      .columns()
-      .column()
-      .text(`Product`)
-      .get_parent()
-      .column()
-      .text(`Supplier`)
-      .get_parent()
-      .get_parent()
-      .items()
-      .column_list_item()
-      .cells()
-      .object_identifier({ title: `{PRODUCTNAME}`, text: `{PRODUCTID}` })
-      .text(`{SUPPLIERNAME}`);
-    this.client.view_display(page.stringify());
-  }
-
-  on_event() {
-    if (this.client.check_on_event(`CLICK_HINT_ICON`)) {
-      this.popover_display({ id: `button_hint_id` });
-    }
-  }
-
-  popover_display({ id } = {}) {
-    const view = z2ui5_cl_xml_view.factory_popup();
-    view.quick_view({ placement: `Bottom`, width: `auto` })
-      .quick_view_page({ pageid: `sampleInformationId`, header: `Sample information`, description: `The object identifier is a display control that enables the user to easily identify a specific object. It shows a title and an additional text inside a table.` });
-    this.client.popover_display(view.stringify(), id);
-  }
-}
-
-module.exports = z2ui5_cl_demo_app_370;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_371.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_371.js
index 32fc7ba..ee94d61 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_371.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_371.js
@@ -15,19 +15,20 @@ class z2ui5_cl_demo_app_371 extends z2ui5_if_app {
   }
 
   view_display() {
-    const base_url = `https://sapui5.hana.ondemand.com/test-resources/sap/m/images/demo/nature/`;
+    const base_url = `https://sapui5.hana.ondemand.com/test-resources/sap/ui/documentation/sdk/images/`;
     const page = z2ui5_cl_xml_view.factory()
       .shell()
       .page({ title: `abap2UI5 - Sample: Carousel`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() });
     page.header_content()
       .button({ id: `button_hint_id`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: this.client._event(`CLICK_HINT_ICON`) });
     page.header_content()
-      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.Carousel` });
-    page.carousel({ loop: true, height: `50%`, pageindicatorplacement: `Bottom` })
-      .image({ src: base_url + `desert.jpg`, alt: `Desert`, densityaware: false })
-      .image({ src: base_url + `elephant.jpg`, alt: `Elephant`, densityaware: false })
-      .image({ src: base_url + `fish.jpg`, alt: `Fish`, densityaware: false })
-      .image({ src: base_url + `forest.jpg`, alt: `Forest`, densityaware: false });
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.Carousel/sample/sap.m.sample.Carousel` });
+    page.title({ id: `carouselTitle`, class: `sapUiSmallMarginTop`, text: `Image Gallery Carousel` });
+    page.carousel({ class: `sapUiContentPadding`, loop: true })
+      .image({ src: base_url + `HT-7777-large.jpg`, alt: `Example picture of speakers` })
+      .image({ src: base_url + `HT-6120-large.jpg`, alt: `Example picture of USB flash drive` })
+      .image({ src: base_url + `HT-6100-large.jpg`, alt: `Example picture of spotlight` })
+      .image({ src: base_url + `screw.jpg`, alt: `Example picture of screw` });
     this.client.view_display(page.stringify());
   }
 
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_372.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_372.js
index 3d63d2d..affbadc 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_372.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_372.js
@@ -9,7 +9,7 @@ class z2ui5_cl_demo_app_372 extends z2ui5_if_app {
     this.client = z2ui5_cl_util.abap_copy(client);
     if (client.check_on_init()) {
       this.view_display();
-    } else {
+    } else if (client.check_on_event()) {
       this.on_event();
     }
   }
@@ -21,29 +21,54 @@ class z2ui5_cl_demo_app_372 extends z2ui5_if_app {
     page.header_content()
       .button({ id: `button_hint_id`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: this.client._event(`CLICK_HINT_ICON`) });
     page.header_content()
-      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.MenuButton` });
-    const vbox = page.vbox(`sapUiSmallMargin`);
-    vbox.label(`Regular mode - the button only opens the menu:`);
-    vbox.menu_button({ text: `File` })
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.MenuButton/sample/sap.m.sample.MenuButton` });
+    const toolbar = page.overflow_toolbar();
+    toolbar.toolbar_spacer();
+    toolbar.label(`In a toolbar`);
+    toolbar.menu_button({ text: `File` })
       .menu()
-      .menu_item({ text: `New`, icon: `sap-icon://create`, press: this.client._event(`MENU_ITEM`, [`\${$source>/text}`]) })
-      .menu_item({ text: `Open`, icon: `sap-icon://open-folder`, press: this.client._event(`MENU_ITEM`, [`\${$source>/text}`]) })
-      .menu_item({ text: `Save`, icon: `sap-icon://save`, press: this.client._event(`MENU_ITEM`, [`\${$source>/text}`]) });
-    vbox.label({ text: `Split mode - the button fires a default action, the arrow opens the menu:`, class: `sapUiSmallMarginTop` });
-    vbox.menu_button({ text: `Save`, buttonmode: `Split`, defaultaction: this.client._event(`DEFAULT_ACTION`) })
+      .menu_item({ text: `Edit`, icon: `sap-icon://edit`, press: this.client._event(`ITEM_PRESS`, [`\${$source>/text}`]) })
+      .menu_item({ text: `Save`, icon: `sap-icon://save`, press: this.client._event(`ITEM_PRESS`, [`\${$source>/text}`]) })
+      .menu_item({ text: `Open`, icon: `sap-icon://open-folder`, press: this.client._event(`ITEM_PRESS`, [`\${$source>/text}`]) });
+    toolbar.toolbar_spacer();
+    const vbox = page.vbox(`sapUiSmallMargin`);
+    vbox.label(`Regular mode button`);
+    this.file_menu_display({ menu_button: vbox.menu_button({ text: `File` }) });
+    vbox.label(`Split mode button with associated last action`);
+    this.file_menu_display({ menu_button: vbox.menu_button({ text: `File Menu`, buttonmode: `Split`, defaultaction: this.client._event(`DEFAULT_ACTION`) }) });
+    vbox.label(`Split mode button with associated last action with initial icon`);
+    this.file_menu_display({ menu_button: vbox.menu_button({ text: `File Menu`, buttonmode: `Split`, defaultaction: this.client._event(`DEFAULT_ACTION`) }) });
+    vbox.label(`Split mode button with default action only`);
+    this.file_menu_display({ menu_button: vbox.menu_button({ text: `File Menu`, buttonmode: `Split`, defaultaction: this.client._event(`DEFAULT_ACTION`) }) });
+    vbox.label(`Split mode with type Accept and constant default action`);
+    vbox.menu_button({ text: `Accept`, buttonmode: `Split`, type: `Accept`, defaultaction: this.client._event(`DEFAULT_ACTION_ACCEPT`) })
       .menu()
-      .menu_item({ text: `Save`, icon: `sap-icon://save`, press: this.client._event(`MENU_ITEM`, [`\${$source>/text}`]) })
-      .menu_item({ text: `Save As`, icon: `sap-icon://duplicate`, press: this.client._event(`MENU_ITEM`, [`\${$source>/text}`]) });
+      .menu_item({ text: `Send the response now`, icon: `sap-icon://response`, press: this.client._event(`MENU_ACTION`, [`\${$source>/text}`]) })
+      .menu_item({ text: `Edit the response before sending`, icon: `sap-icon://edit-outside`, press: this.client._event(`MENU_ACTION`, [`\${$source>/text}`]) })
+      .menu_item({ text: `Do not send a response`, icon: `sap-icon://action`, press: this.client._event(`MENU_ACTION`, [`\${$source>/text}`]) });
     this.client.view_display(page.stringify());
   }
 
+  file_menu_display({ menu_button } = {}) {
+    menu_button.menu()
+      .menu_item({ text: `Edit`, icon: `sap-icon://edit`, press: this.client._event(`MENU_ACTION`, [`\${$source>/text}`]) })
+      .menu_item({ text: `Save`, icon: `sap-icon://save`, press: this.client._event(`MENU_ACTION`, [`\${$source>/text}`]) })
+      .menu_item({ text: `Open`, icon: `sap-icon://open-folder`, press: this.client._event(`MENU_ACTION`, [`\${$source>/text}`]) });
+  }
+
   on_event() {
     switch (this.client.get().EVENT) {
-      case `MENU_ITEM`:
-        this.client.message_toast_display(`${this.client.get_event_arg(1)} selected`);
+      case `ITEM_PRESS`:
+        this.client.message_toast_display(`${this.client.get_event_arg()} Pressed`);
+        break;
+      case `MENU_ACTION`:
+        this.client.message_toast_display(`Action triggered on item: ${this.client.get_event_arg()}`);
         break;
       case `DEFAULT_ACTION`:
-        this.client.message_toast_display(`Default action pressed`);
+        this.client.message_toast_display(`Default action triggered`);
+        break;
+      case `DEFAULT_ACTION_ACCEPT`:
+        this.client.message_toast_display(`Accepted`);
         break;
       case `CLICK_HINT_ICON`:
         this.popover_display({ id: `button_hint_id` });
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_373.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_373.js
deleted file mode 100644
index 0ececce..0000000
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_373.js
+++ /dev/null
@@ -1,63 +0,0 @@
-const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
-const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
-const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
-
-class z2ui5_cl_demo_app_373 extends z2ui5_if_app {
-  client = null;
-
-  async main(client) {
-    this.client = z2ui5_cl_util.abap_copy(client);
-    if (client.check_on_init()) {
-      this.view_display();
-    } else {
-      this.on_event();
-    }
-  }
-
-  view_display() {
-    const page = z2ui5_cl_xml_view.factory()
-      .shell()
-      .page({ title: `abap2UI5 - Sample: Action Sheet`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() });
-    page.header_content()
-      .button({ id: `button_hint_id`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: this.client._event(`CLICK_HINT_ICON`) });
-    page.header_content()
-      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.ActionSheet` });
-    page.vbox(`sapUiSmallMargin`)
-      .button({ id: `button_action_sheet_id`, text: `Open Action Sheet`, press: this.client._event(`OPEN_SHEET`) });
-    this.client.view_display(page.stringify());
-  }
-
-  on_event() {
-    switch (this.client.get().EVENT) {
-      case `OPEN_SHEET`:
-        this.action_sheet_display({ id: `button_action_sheet_id` });
-        break;
-      case `SHEET_ACTION`:
-        this.client.message_toast_display(`${this.client.get_event_arg(1)} pressed`);
-        break;
-      case `CLICK_HINT_ICON`:
-        this.popover_display({ id: `button_hint_id` });
-        break;
-    }
-  }
-
-  action_sheet_display({ id } = {}) {
-    const view = z2ui5_cl_xml_view.factory_popup();
-    view.action_sheet({ title: `Choose an action`, placement: `Bottom`, showcancelbutton: true })
-      .buttons()
-      .button({ text: `Approve`, icon: `sap-icon://accept`, press: this.client._event(`SHEET_ACTION`, [`\${$source>/text}`]) })
-      .button({ text: `Reject`, icon: `sap-icon://decline`, press: this.client._event(`SHEET_ACTION`, [`\${$source>/text}`]) })
-      .button({ text: `Email`, icon: `sap-icon://email`, press: this.client._event(`SHEET_ACTION`, [`\${$source>/text}`]) })
-      .button({ text: `Forward`, icon: `sap-icon://forward`, press: this.client._event(`SHEET_ACTION`, [`\${$source>/text}`]) });
-    this.client.popover_display(view.stringify(), id);
-  }
-
-  popover_display({ id } = {}) {
-    const view = z2ui5_cl_xml_view.factory_popup();
-    view.quick_view({ placement: `Bottom`, width: `auto` })
-      .quick_view_page({ pageid: `sampleInformationId`, header: `Sample information`, description: `The action sheet displays a list of actions next to the control that opened it. On phones the actions are shown in a dialog at the bottom of the screen.` });
-    this.client.popover_display(view.stringify(), id);
-  }
-}
-
-module.exports = z2ui5_cl_demo_app_373;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_374.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_374.js
index 78c12af..d88a5b7 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_374.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_374.js
@@ -26,7 +26,7 @@ class z2ui5_cl_demo_app_374 extends z2ui5_if_app {
       .button({ id: `button_hint_id`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: this.client._event(`CLICK_HINT_ICON`) });
     page.header_content()
       .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.SplitContainer` });
-    const split = page._generic(`SplitContainer`);
+    const split = page.split_container();
     split.master_pages()
       .page(`Master`)
       .list(this.client._bind(this.t_items))
@@ -40,7 +40,7 @@ class z2ui5_cl_demo_app_374 extends z2ui5_if_app {
   on_event() {
     switch (this.client.get().EVENT) {
       case `ITEM_PRESS`:
-        this.detail_text = `${this.client.get_event_arg(1)} selected in the master list.`;
+        this.detail_text = `${this.client.get_event_arg()} selected in the master list.`;
         this.client.view_model_update();
         break;
       case `CLICK_HINT_ICON`:
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_375.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_375.js
index bac52c3..a02a841 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_375.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_375.js
@@ -3,36 +3,42 @@ const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
 const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
 
 class z2ui5_cl_demo_app_375 extends z2ui5_if_app {
+  t_items = [];
   client = null;
 
   async main(client) {
     this.client = z2ui5_cl_util.abap_copy(client);
     if (client.check_on_init()) {
+      this.on_init();
+    } else if (client.check_on_navigated()) {
       this.view_display();
-    } else {
+    } else if (client.check_on_event()) {
       this.on_event();
     }
   }
 
-  view_display() {
-    const page = z2ui5_cl_xml_view.factory()
-      .shell()
-      .page({ title: `abap2UI5 - Sample: Notification List Item`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() });
-    page.header_content()
-      .button({ id: `button_hint_id`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: this.client._event(`CLICK_HINT_ICON`) });
-    page.header_content()
-      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.NotificationListItem` });
-    page.list()
-      .notification_list_item({ title: `New order #2201 received`, description: `A new order was created and is waiting for approval.`, datetime: `2 hours`, unread: true, priority: `High`, authorinitials: `JS`, authorname: `John Smith`, showclosebutton: true, close: this.client._event(`CLOSE`, [`\${$source>/title}`]) })
-      .notification_list_item({ title: `Delivery #98 delayed`, description: `The delivery date moved to next week.`, datetime: `1 day`, unread: true, priority: `Medium`, authorinitials: `AB`, authorname: `Anna Bauer`, showclosebutton: true, close: this.client._event(`CLOSE`, [`\${$source>/title}`]) })
-      .notification_list_item({ title: `Weekly report available`, description: `The weekly sales report is ready for download.`, datetime: `3 days`, unread: false, priority: `None`, authorinitials: `SR`, authorname: `Sara Rossi`, showclosebutton: false });
-    this.client.view_display(page.stringify());
+  on_init() {
+    this.set_data();
+    this.view_display();
   }
 
   on_event() {
+    let closed_title;
     switch (this.client.get().EVENT) {
       case `CLOSE`:
-        this.client.message_toast_display(`Notification closed: ${this.client.get_event_arg(1)}`);
+        closed_title = this.client.get_event_arg();
+        for (let _i = this.t_items.length - 1; _i >= 0; _i--) { const row = this.t_items[_i]; if (row.title === closed_title) this.t_items.splice(_i, 1); }
+        this.client.message_toast_display(`Item Closed: ${closed_title}`);
+        this.view_display();
+        break;
+      case `ITEM_PRESS`:
+        this.client.message_toast_display(`Item Pressed: ${this.client.get_event_arg()}`);
+        break;
+      case `ACCEPT`:
+        this.client.message_toast_display(`Accept Button Pressed`);
+        break;
+      case `REJECT`:
+        this.client.message_toast_display(`Reject Button Pressed`);
         break;
       case `CLICK_HINT_ICON`:
         this.popover_display({ id: `button_hint_id` });
@@ -40,6 +46,50 @@ class z2ui5_cl_demo_app_375 extends z2ui5_if_app {
     }
   }
 
+  view_display() {
+    let sy_tabix = 0;
+    let list_item;
+    const page = z2ui5_cl_xml_view.factory()
+      .shell()
+      .page({ title: `abap2UI5 - Sample: Notification List Item`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() });
+    page.header_content()
+      .button({ id: `button_hint_id`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: this.client._event(`CLICK_HINT_ICON`) });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.NotificationListItem/sample/sap.m.sample.NotificationListItem` });
+    const list = page.vbox(`sapUiSmallMargin`).list();
+    sy_tabix = 0;
+    for (const s_item of this.t_items) {
+      sy_tabix++;
+      list_item = list.notification_list_item({ title: s_item.title, description: s_item.description, datetime: s_item.datetime, unread: s_item.unread, priority: s_item.priority, authorname: s_item.authorname, authorpicture: s_item.authorpicture, showclosebutton: s_item.showclosebutton, truncate: s_item.truncate, hideshowmorebutton: s_item.hideshowmorebutton, showbuttons: s_item.showbuttons, close: this.client._event(`CLOSE`, [`\${$source>/title}`]), press: this.client._event(`ITEM_PRESS`, [`\${$source>/title}`]) });
+      switch (s_item.buttons) {
+        case `ACCEPT_REJECT_LONG`:
+          list_item.buttons()
+            .button({ text: `Accept All Requested Information`, press: this.client._event(`ACCEPT`) })
+            .button({ text: `Reject All Requested Information`, press: this.client._event(`REJECT`) });
+          break;
+        case `ACCEPT_REJECT_ICON`:
+          list_item.buttons()
+            .button({ text: `Accept`, icon: `sap-icon://accept`, press: this.client._event(`ACCEPT`) })
+            .button({ text: `Reject`, icon: `sap-icon://sys-cancel`, press: this.client._event(`REJECT`) });
+          break;
+        case `ACCEPT_REJECT`:
+          list_item.buttons()
+            .button({ text: `Accept`, press: this.client._event(`ACCEPT`) })
+            .button({ text: `Reject`, press: this.client._event(`REJECT`) });
+          break;
+        case `ACCEPT`:
+          list_item.buttons().button({ text: `Accept`, press: this.client._event(`ACCEPT`) });
+          break;
+      }
+    }
+    this.client.view_display(page.stringify());
+  }
+
+  set_data() {
+    let base_url = ``;
+    this.t_items = [{ title: `New order (#2525) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. ` + `Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.`, description: `And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. ` + `Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.`, showclosebutton: true, datetime: `1 hour`, unread: true, priority: `None`, authorname: `Jean Doe`, authorpicture: base_url + `test-resources/sap/m/images/Woman_04.png`, buttons: `ACCEPT_REJECT_LONG` }, { title: `New order (#2524), without action buttons`, description: `Short description`, showclosebutton: true, datetime: `3 days`, unread: true, priority: `High`, authorname: `Office Notification`, authorpicture: `sap-icon://group` }, { title: `New order (#2523) With a long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit.`, description: `And short description`, showclosebutton: false, unread: false, datetime: `3 days`, priority: `High`, authorname: `Patricia Clark`, buttons: `ACCEPT_REJECT_ICON` }, { title: `New order (#2522)`, description: `With a very long description - Lorem ipsum dolor sit amet, consectetur adipiscing elit. ` + `Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.`, showclosebutton: true, datetime: `3 days`, unread: true, priority: `Medium`, authorname: `John Smith` }, { title: `New order (#2521)`, description: `With a very long description and no action buttons below - Lorem ipsum dolor sit amet, consectetur adipiscing elit. ` + `Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.`, showclosebutton: true, datetime: `3 days`, unread: true, priority: `Low`, authorname: `John Smith`, authorpicture: base_url + `test-resources/sap/m/images/headerImg2.jpg` }, { title: `New order (#2525) With a very long title and truncation disabled by default! Lorem ipsum dolor sit amet, consectetur adipiscing elit. ` + `Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.`, description: `And a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. ` + `Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.`, showclosebutton: true, datetime: `2 day`, unread: false, priority: `Low`, authorname: `Jean Doe`, authorpicture: base_url + `test-resources/sap/m/images/Woman_04.png`, truncate: `false`, buttons: `ACCEPT` }, { title: `New order (#2525) With a very long title and with truncation enabled but 'Show More' hidden! Lorem ipsum dolor sit amet, consectetur adipiscing elit. ` + `Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.`, description: `And a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. ` + `Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.`, showclosebutton: true, datetime: `2 day`, unread: false, priority: `Low`, authorname: `Jean Doe`, authorpicture: base_url + `test-resources/sap/m/images/Woman_04.png`, hideshowmorebutton: `true`, showbuttons: `false`, buttons: `ACCEPT_REJECT` }, { title: `New order (#2523) With a long title without description - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet`, showclosebutton: false, unread: false, datetime: `3 days`, priority: `High`, authorname: `Patricia Clark`, authorpicture: base_url + `test-resources/sap/m/images/female_BaySu.jpg`, buttons: `ACCEPT_REJECT_ICON` }, { title: `New order (#2523) With a long title without description`, showclosebutton: true, unread: false, datetime: `3 days`, priority: `High` }];
+  }
+
   popover_display({ id } = {}) {
     const view = z2ui5_cl_xml_view.factory_popup();
     view.quick_view({ placement: `Bottom`, width: `auto` })
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_378.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_378.js
index 313e0fc..c29a466 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_378.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_378.js
@@ -9,53 +9,40 @@ class z2ui5_cl_demo_app_378 extends z2ui5_if_app {
     this.client = z2ui5_cl_util.abap_copy(client);
     if (client.check_on_init()) {
       this.view_display();
-    } else {
-      this.on_event();
+    } else if (client.check_on_event(`CLICK_HINT_ICON`)) {
+      this.popover_display({ id: `button_hint_id` });
     }
   }
 
   view_display() {
+    const lorem = `Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ` + `At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. ` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ` + `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat`;
     const page = z2ui5_cl_xml_view.factory()
       .shell()
-      .page({ title: `abap2UI5 - Sample: Panel`, class: `sapUiContentPadding`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() });
+      .page({ title: `abap2UI5 - Sample: Panel`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() });
     page.header_content()
       .button({ id: `button_hint_id`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: this.client._event(`CLICK_HINT_ICON`) });
     page.header_content()
-      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.Panel` });
-    page.panel({ headertext: `Fixed Panel`, class: `sapUiSmallMarginBottom` })
-      .text(`A basic panel with a header text and content. It cannot be collapsed.`);
-    page.panel({ expandable: true, expanded: true, headertext: `Expandable Panel (initially expanded)`, class: `sapUiSmallMarginBottom`, expand: this.client._event(`EXPAND`, [`\${$source>/expanded}`]) })
-      .text(`Collapse or expand this panel with the arrow in the header. The expand event is sent to the backend.`);
-    page.panel({ expandable: true, expanded: false, headertext: `Expandable Panel (initially collapsed)`, class: `sapUiSmallMarginBottom` })
-      .text(`This content is hidden until the panel is expanded.`);
-    const panel = page.panel({ expandable: true, expanded: true });
-    panel.header_toolbar()
-      .toolbar()
-      .title(`Panel with Header Toolbar`)
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.Panel/sample/sap.m.sample.Panel` });
+    const panel_picture = page.panel({ width: `auto`, class: `sapUiResponsiveMargin` });
+    panel_picture.header_toolbar().overflow_toolbar().title(`Panel with picture`);
+    panel_picture.horizontal_layout()
+      .image({ src: `https://sapui5.hana.ondemand.com/test-resources/sap/ui/documentation/sdk/images/HT-7777-large.jpg`, width: `10em` });
+    panel_picture.text(lorem);
+    const panel_header = page.panel({ width: `auto`, class: `sapUiResponsiveMargin` });
+    panel_header.header_toolbar()
+      .overflow_toolbar()
+      .title(`Header`)
       .toolbar_spacer()
-      .button({ icon: `sap-icon://settings`, type: `Transparent`, tooltip: `Settings`, press: this.client._event(`SETTINGS`) });
-    panel.text(`Instead of a plain header text the panel can host a complete toolbar with actions.`);
+      .button({ icon: `sap-icon://settings` })
+      .button({ icon: `sap-icon://drop-down-list` });
+    panel_header.text(lorem);
     this.client.view_display(page.stringify());
   }
 
-  on_event() {
-    switch (this.client.get().EVENT) {
-      case `EXPAND`:
-        this.client.message_toast_display(`Panel expanded: ${this.client.get_event_arg(1)}`);
-        break;
-      case `SETTINGS`:
-        this.client.message_toast_display(`Settings pressed`);
-        break;
-      case `CLICK_HINT_ICON`:
-        this.popover_display({ id: `button_hint_id` });
-        break;
-    }
-  }
-
   popover_display({ id } = {}) {
     const view = z2ui5_cl_xml_view.factory_popup();
     view.quick_view({ placement: `Bottom`, width: `auto` })
-      .quick_view_page({ pageid: `sampleInformationId`, header: `Sample information`, description: `The panel groups content under a header. It can be expandable and its header can be a plain text or a full toolbar.` });
+      .quick_view_page({ pageid: `sampleInformationId`, header: `Sample information`, description: `Panels are helpful to group custom content. They can be decorated with a plain header text or a complete header toolbar.` });
     this.client.popover_display(view.stringify(), id);
   }
 }
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_379.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_379.js
index 1a016c1..9461403 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_379.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_379.js
@@ -15,28 +15,35 @@ class z2ui5_cl_demo_app_379 extends z2ui5_if_app {
   }
 
   view_display() {
-    const base_url = `https://sapui5.hana.ondemand.com/test-resources/sap/m/images/`;
+    const base_url = `https://sapui5.hana.ondemand.com/test-resources/`;
     const page = z2ui5_cl_xml_view.factory()
       .shell()
       .page({ title: `abap2UI5 - Sample: Image`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() });
     page.header_content()
       .button({ id: `button_hint_id`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: this.client._event(`CLICK_HINT_ICON`) });
     page.header_content()
-      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.Image` });
-    const vbox = page.vbox(`sapUiSmallMargin`);
-    vbox.label(`Fixed width (150px), with alternative text:`);
-    vbox.image({ src: base_url + `SAPLogo.jpg`, alt: `SAP logo`, width: `150px`, densityaware: false });
-    vbox.label({ text: `Clickable image with press event:`, class: `sapUiSmallMarginTop` });
-    vbox.image({ src: base_url + `SAPLogo.jpg`, alt: `SAP logo (clickable)`, width: `75px`, densityaware: false, press: this.client._event(`IMAGE_PRESS`) });
-    vbox.label({ text: `Decorative image (ignored by screen readers):`, class: `sapUiSmallMarginTop` });
-    vbox.image({ src: base_url + `SAPUI5.png`, decorative: true, width: `150px`, densityaware: false });
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.Image/sample/sap.m.sample.Image` });
+    const hbox = page.vbox(`sapUiSmallMarginTopBottom sapUiLargeMarginBeginEnd`)
+      .hbox({ justifycontent: `SpaceBetween` });
+    hbox.vbox()
+      .text({ text: `Image:`, class: `sapUiSmallMarginBottom` })
+      .image({ src: base_url + `sap/ui/documentation/sdk/images/HT-7777-large.jpg`, width: `10em` });
+    hbox.vbox()
+      .text({ text: `Active state image:`, class: `sapUiSmallMarginBottom` })
+      .image({ src: base_url + `sap/ui/documentation/sdk/images/HT-6100-large.jpg`, width: `10em`, decorative: false, press: this.client._event(`IMAGE_PRESS`) });
+    hbox.vbox()
+      .text({ text: `Image using SVG format:`, class: `sapUiSmallMarginBottom` })
+      .image({ src: base_url + `sap/m/demokit/sample/Image/images/sap-logo.svg` });
+    hbox.vbox()
+      .text({ text: `Image displaying inline SVG:`, class: `sapUiSmallMarginBottom` })
+      .image({ src: base_url + `sap/m/demokit/sample/Image/images/sap-logo.svg` });
     this.client.view_display(page.stringify());
   }
 
   on_event() {
     switch (this.client.get().EVENT) {
       case `IMAGE_PRESS`:
-        this.client.message_toast_display(`Image pressed`);
+        this.client.message_toast_display(`The image has been pressed`);
         break;
       case `CLICK_HINT_ICON`:
         this.popover_display({ id: `button_hint_id` });
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_380.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_380.js
deleted file mode 100644
index 88185aa..0000000
--- a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_380.js
+++ /dev/null
@@ -1,48 +0,0 @@
-const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
-const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
-const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
-
-class z2ui5_cl_demo_app_380 extends z2ui5_if_app {
-  client = null;
-
-  async main(client) {
-    this.client = z2ui5_cl_util.abap_copy(client);
-    if (client.check_on_init()) {
-      this.view_display();
-    } else {
-      this.on_event();
-    }
-  }
-
-  view_display() {
-    const page = z2ui5_cl_xml_view.factory()
-      .shell()
-      .page({ title: `abap2UI5 - Sample: Tab Container`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() });
-    page.header_content()
-      .button({ id: `button_hint_id`, icon: `sap-icon://hint`, tooltip: `Sample information`, press: this.client._event(`CLICK_HINT_ICON`) });
-    page.header_content()
-      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.TabContainer` });
-    const tabs = page.tab_container();
-    tabs.tab({ text: `Order 2201`, selected: true })
-      .vbox(`sapUiSmallMargin`)
-      .text(`Content of order 2201: 5 items, delivery next week.`);
-    tabs.tab({ text: `Order 2202` }).vbox(`sapUiSmallMargin`).text(`Content of order 2202: 2 items, delivered.`);
-    tabs.tab({ text: `Order 2203` }).vbox(`sapUiSmallMargin`).text(`Content of order 2203: 12 items, in approval.`);
-    this.client.view_display(page.stringify());
-  }
-
-  on_event() {
-    if (this.client.check_on_event(`CLICK_HINT_ICON`)) {
-      this.popover_display({ id: `button_hint_id` });
-    }
-  }
-
-  popover_display({ id } = {}) {
-    const view = z2ui5_cl_xml_view.factory_popup();
-    view.quick_view({ placement: `Bottom`, width: `auto` })
-      .quick_view_page({ pageid: `sampleInformationId`, header: `Sample information`, description: `The tab container manages several open items in parallel, similar to browser tabs - for example multiple open documents or orders.` });
-    this.client.popover_display(view.stringify(), id);
-  }
-}
-
-module.exports = z2ui5_cl_demo_app_380;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_381.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_381.js
new file mode 100644
index 0000000..4b082b3
--- /dev/null
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_381.js
@@ -0,0 +1,94 @@
+const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
+const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
+const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
+
+class z2ui5_cl_demo_app_381 extends z2ui5_if_app {
+  client = null;
+  message = ``;
+  duration = ``;
+  width = ``;
+  my = ``;
+  at = ``;
+  offset = ``;
+  animation_timing = ``;
+  animation_duration = ``;
+  autoclose = false;
+
+  async main(client) {
+    this.client = z2ui5_cl_util.abap_copy(client);
+    if (client.check_on_init()) {
+      this.on_init();
+      this.view_display();
+    } else if (client.check_on_event(`SHOW`)) {
+      this.show_toast();
+    }
+  }
+
+  on_init() {
+    this.message = `This is a message toast.`;
+    this.duration = `3000`;
+    this.width = `15em`;
+    this.my = `center bottom`;
+    this.at = `center bottom`;
+    this.offset = `0 0`;
+    this.animation_timing = `ease`;
+    this.animation_duration = `1000`;
+    this.autoclose = true;
+  }
+
+  show_toast() {
+    this.client.message_toast_display({ text: this.message, duration: this.duration, width: this.width, my: this.my, at: this.at, offset: this.offset, animationtimingfunction: this.animation_timing, animationduration: this.animation_duration, autoclose: this.autoclose });
+  }
+
+  view_display() {
+    let sy_tabix = 0;
+    const page = z2ui5_cl_xml_view.factory()
+      .shell()
+      .page({ title: `abap2UI5 - Sample: Message Toast`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.MessageToast/sample/sap.m.sample.MessageToast` });
+    const form = page.panel({ headertext: `Message Toast Configuration` })
+      .simple_form({ title: `Settings`, editable: true })
+      .content(`form`);
+    form.label(`Message`)
+      .input(this.client._bind_edit(this.message))
+      .label(`Duration (ms)`)
+      .input({ value: this.client._bind_edit(this.duration), type: `Number` })
+      .label(`Width`)
+      .input(this.client._bind_edit(this.width));
+    const select_my = form.label(`my`).select({ selectedkey: this.client._bind_edit(this.my) });
+    const select_at = form.label(`at`).select({ selectedkey: this.client._bind_edit(this.at) });
+    sy_tabix = 0;
+    for (const position of this.get_positions()) {
+      sy_tabix++;
+      select_my.item({ key: position, text: position });
+      select_at.item({ key: position, text: position });
+    }
+    form.label(`offset`);
+    form.input(this.client._bind_edit(this.offset));
+    const select_animation = form.label(`animationTimingFunction`)
+      .select({ selectedkey: this.client._bind_edit(this.animation_timing) });
+    select_animation.item({ key: `ease`, text: `ease` })
+      .item({ key: `linear`, text: `linear` })
+      .item({ key: `ease-in`, text: `ease-in` })
+      .item({ key: `ease-out`, text: `ease-out` })
+      .item({ key: `ease-in-out`, text: `ease-in-out` });
+    form.label(`animationDuration (ms)`)
+      .input({ value: this.client._bind_edit(this.animation_duration), type: `Number` })
+      .label(`autoClose`)
+      .checkbox(this.client._bind_edit(this.autoclose));
+    form.button({ text: `Show Message Toast`, type: `Emphasized`, press: this.client._event(`SHOW`) });
+    page.footer()
+      .overflow_toolbar()
+      .button({ text: `Back`, icon: `sap-icon://nav-back`, press: this.client._event_nav_app_leave() });
+    this.client.view_display(page.stringify());
+  }
+
+  get_positions() {
+    let result = [];
+    result = [`begin top`, `begin center`, `begin bottom`, `left top`, `left center`, `left bottom`, `center top`, `center center`, `center bottom`, `right top`, `right center`, `right bottom`, `end top`, `end center`, `end bottom`];
+    return result;
+  }
+}
+
+module.exports = z2ui5_cl_demo_app_381;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_382.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_382.js
new file mode 100644
index 0000000..f3f3815
--- /dev/null
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_382.js
@@ -0,0 +1,68 @@
+const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
+const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
+const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
+
+class z2ui5_cl_demo_app_382 extends z2ui5_if_app {
+  client = null;
+  title = ``;
+  message = ``;
+  details = ``;
+
+  async main(client) {
+    this.client = z2ui5_cl_util.abap_copy(client);
+    if (client.check_on_init()) {
+      this.on_init();
+      this.view_display();
+    } else if (client.check_on_event()) {
+      this.on_event();
+    }
+  }
+
+  on_init() {
+    this.title = `abap2UI5`;
+    this.message = `This is a message box.`;
+    this.details = `These are additional details about the message.`;
+  }
+
+  on_event() {
+    switch (this.client.get().EVENT) {
+      case `CUSTOM`:
+        this.client.message_box_display(this.message, `information`, this.title, undefined, undefined, [`Approve`, `Reject`], `Approve`, undefined, undefined, undefined, this.details);
+        break;
+      default:
+        this.client.message_box_display(this.message, this.client.get().EVENT, this.title, undefined, undefined, undefined, undefined, undefined, undefined, undefined, this.details);
+        break;
+    }
+  }
+
+  view_display() {
+    const page = z2ui5_cl_xml_view.factory()
+      .shell()
+      .page({ title: `abap2UI5 - Sample: Message Box`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() });
+    page.header_content()
+      .link({ text: `UI5 Demo Kit`, target: `_blank`, href: `https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.MessageBox/sample/sap.m.sample.MessageBox` });
+    page.panel({ headertext: `Message Box Configuration` })
+      .simple_form({ title: `Settings`, editable: true })
+      .content(`form`)
+      .label(`Title`)
+      .input(this.client._bind_edit(this.title))
+      .label(`Message`)
+      .input(this.client._bind_edit(this.message))
+      .label(`Details`)
+      .text_area({ value: this.client._bind_edit(this.details), rows: `3` });
+    page.footer()
+      .overflow_toolbar()
+      .button({ text: `Back`, icon: `sap-icon://nav-back`, press: this.client._event_nav_app_leave() })
+      .text(`Open Message Box:`)
+      .toolbar_spacer()
+      .button({ text: `Confirm`, press: this.client._event(`confirm`) })
+      .button({ text: `Information`, press: this.client._event(`information`) })
+      .button({ text: `Success`, type: `Success`, press: this.client._event(`success`) })
+      .button({ text: `Warning`, press: this.client._event(`warning`) })
+      .button({ text: `Error`, type: `Reject`, press: this.client._event(`error`) })
+      .button({ text: `Custom`, type: `Emphasized`, press: this.client._event(`CUSTOM`) });
+    this.client.view_display(page.stringify());
+  }
+}
+
+module.exports = z2ui5_cl_demo_app_382;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_383.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_383.js
new file mode 100644
index 0000000..946825f
--- /dev/null
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_383.js
@@ -0,0 +1,57 @@
+const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
+const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
+const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
+
+class z2ui5_cl_demo_app_383 extends z2ui5_if_app {
+  image = ``;
+  client = null;
+
+  async main(client) {
+    this.client = z2ui5_cl_util.abap_copy(client);
+    if (client.check_on_init()) {
+      this.image = `https://raw.githubusercontent.com/abap2UI5/abap2UI5/main/docs/images/logo.png`;
+      this.view_display();
+    } else if (client.check_on_event()) {
+      this.on_event();
+    }
+  }
+
+  view_display() {
+    const view = z2ui5_cl_xml_view.factory();
+    view.shell()
+      .page({ title: `abap2UI5 - Frontend Action - Image Editor Popup Close`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() })
+      .vbox(`sapUiSmallMargin`)
+      .image({ src: this.client._bind(this.image), width: `20rem` })
+      .button({ text: `Edit Image...`, icon: `sap-icon://edit`, press: this.client._event(`EDIT`) });
+    this.client.view_display(view.stringify());
+  }
+
+  popup_display() {
+    const popup = z2ui5_cl_xml_view.factory_popup()
+      .dialog({ title: `Edit Image`, icon: `sap-icon://edit`, contentheight: `80%`, contentwidth: `80%`, verticalscrolling: false, horizontalscrolling: false });
+    popup.image_editor_container().image_editor({ id: `imageEditor`, src: this.image });
+    popup.buttons()
+      .button({ text: `Cancel`, type: `Reject`, press: this.client._event(`CANCEL`) })
+      .button({ text: `Save`, type: `Emphasized`, press: this.client._event_client(this.client.cs_event.image_editor_popup_close) });
+    this.client.popup_display(popup.stringify());
+  }
+
+  on_event() {
+    switch (this.client.get().EVENT) {
+      case `EDIT`:
+        this.popup_display();
+        break;
+      case `SAVE`:
+        this.image = this.client.get_event_arg(1);
+        this.client.popup_destroy();
+        this.client.view_model_update();
+        this.client.message_toast_display(`Image saved`);
+        break;
+      case `CANCEL`:
+        this.client.popup_destroy();
+        break;
+    }
+  }
+}
+
+module.exports = z2ui5_cl_demo_app_383;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_445.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_445.js
new file mode 100644
index 0000000..5d19207
--- /dev/null
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_445.js
@@ -0,0 +1,69 @@
+const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
+const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
+const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
+
+class z2ui5_cl_demo_app_445 extends z2ui5_if_app {
+  client = null;
+
+  async main(client) {
+    this.client = z2ui5_cl_util.abap_copy(client);
+    if (client.check_on_init()) {
+      this.view_display();
+    } else {
+      this.on_event();
+    }
+  }
+
+  on_event() {
+    if (this.client.check_on_event(`OPEN_POPUP`)) {
+      this.popup_display();
+    }
+  }
+
+  device_form({ parent } = {}) {
+    let result = null;
+    const form = parent.simple_form({ editable: false, layout: `ResponsiveGridLayout` });
+    form.label(`System type`)
+      .object_status({ text: `{= \${device>/system/phone} ? 'Phone' : (\${device>/system/tablet} ? 'Tablet' : (\${device>/system/desktop} ? 'Desktop' : 'Other')) }`, state: `Information` });
+    form.label(`Orientation`)
+      .object_status({ text: `{= \${device>/orientation/landscape} ? 'Landscape' : 'Portrait' }` });
+    form.label(`Window size`).object_status({ text: `{device>/resize/width} x {device>/resize/height} px` });
+    form.label(`Touch support`)
+      .object_status({ text: `{= \${device>/support/touch} ? 'Yes' : 'No' }`, state: `{= \${device>/support/touch} ? 'Success' : 'None' }` });
+    form.label(`Browser`).text(`{device>/browser/name} {device>/browser/version}`);
+    form.label(`Operating system`).text(`{device>/os/name} {device>/os/version}`);
+    result = z2ui5_cl_util.abap_copy(form);
+    return result;
+  }
+
+  view_display() {
+    const view = z2ui5_cl_xml_view.factory();
+    const page = view.shell()
+      .page({ title: `abap2UI5 - Device Model`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() });
+    page.message_strip({ text: `The 'device>' model is a one-way JSONModel over sap.ui.Device. ` + `Resize the window or rotate your device and the values update live - ` + `no backend round-trip. It is available in this view and in the dialog below.`, type: `Information`, showicon: true, class: `sapUiSmallMargin` });
+    this.device_form({ parent: page.panel({ headertext: `Live device properties`, class: `sapUiSmallMargin` }) });
+    page.message_strip({ text: `{= \${device>/system/phone} ? 'Compact layout - you are on a phone.' : 'Full layout - tablet or desktop.' }`, type: `{= \${device>/system/phone} ? 'Warning' : 'Success' }`, showicon: true, class: `sapUiSmallMargin` });
+    const tabs = page.panel({ headertext: `Responsive IconTabBar (expanded only when it is not a phone)`, class: `sapUiSmallMargin` })
+      .icon_tab_bar({ expanded: `{= !\${device>/system/phone} }`, class: `sapUiResponsiveContentPadding` })
+      .items();
+    tabs.icon_tab_filter({ text: `Sales`, key: `sales`, icon: `sap-icon://money-bills` })
+      .text(`On a phone the tab content is collapsed to save space; on tablet/desktop it stays expanded.`);
+    tabs.icon_tab_filter({ text: `Stock`, key: `stock`, icon: `sap-icon://product` })
+      .text(`Everything here is driven purely by the device> model - no event handler.`);
+    page.button({ text: `Open dialog (device model inside a popup)`, icon: `sap-icon://sys-monitor`, press: this.client._event(`OPEN_POPUP`), class: `sapUiSmallMargin` });
+    this.client.view_display(view.stringify());
+  }
+
+  popup_display() {
+    const popup = z2ui5_cl_xml_view.factory_popup();
+    const dialog = popup.dialog({ title: `Device model inside a popup`, contentwidth: `{= \${device>/system/phone} ? '95%' : '420px' }` });
+    this.device_form({ parent: dialog.content() });
+    dialog.footer()
+      .overflow_toolbar()
+      .toolbar_spacer()
+      .button({ text: `Close`, type: `Emphasized`, press: this.client._event_client(this.client.cs_event.popup_close) });
+    this.client.popup_display(popup.stringify());
+  }
+}
+
+module.exports = z2ui5_cl_demo_app_445;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_446.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_446.js
new file mode 100644
index 0000000..4911668
--- /dev/null
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_446.js
@@ -0,0 +1,49 @@
+const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
+const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
+const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
+
+class z2ui5_cl_demo_app_446 extends z2ui5_if_app {
+  client = null;
+
+  async main(client) {
+    this.client = z2ui5_cl_util.abap_copy(client);
+    if (client.check_on_init()) {
+      this.view_display();
+    } else {
+      this.on_event();
+    }
+  }
+
+  on_event() {
+    switch (this.client.get().EVENT) {
+      case `TOAST`:
+        this.client.control_call({ object: `MESSAGE_TOAST`, method: `show`, params: [`Hello from control_call!`] });
+        break;
+      case `MSGBOX`:
+        this.client.control_call({ object: `MESSAGE_BOX`, method: `show`, params: [`A message box, opened via control_call.`] });
+        break;
+      case `THEME_DARK`:
+        this.client.control_call({ object: `THEMING`, method: `setTheme`, params: [`sap_horizon_dark`] });
+        break;
+      case `THEME_LIGHT`:
+        this.client.control_call({ object: `THEMING`, method: `setTheme`, params: [`sap_horizon`] });
+        break;
+    }
+    this.view_display();
+  }
+
+  view_display() {
+    const view = z2ui5_cl_xml_view.factory();
+    const page = view.shell()
+      .page({ title: `abap2UI5 - Action - control_call`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() });
+    page.message_strip({ text: `Each button lets the backend call a method on a global frontend object ` + `(MessageToast, MessageBox, Theming) - client-side, after the response renders, ` + `without wiring a control event.`, type: `Information`, showicon: true, class: `sapUiSmallMargin` });
+    page.vbox(`sapUiSmallMargin`)
+      .button({ text: `MessageToast.show`, icon: `sap-icon://information`, press: this.client._event(`TOAST`) })
+      .button({ text: `MessageBox.show`, icon: `sap-icon://message-popup`, press: this.client._event(`MSGBOX`), class: `sapUiTinyMarginTop` })
+      .button({ text: `Theming.setTheme( dark )`, icon: `sap-icon://palette`, press: this.client._event(`THEME_DARK`), class: `sapUiTinyMarginTop` })
+      .button({ text: `Theming.setTheme( light )`, icon: `sap-icon://palette`, press: this.client._event(`THEME_LIGHT`), class: `sapUiTinyMarginTop` });
+    this.client.view_display(view.stringify());
+  }
+}
+
+module.exports = z2ui5_cl_demo_app_446;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_demo_app_447.js b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_447.js
new file mode 100644
index 0000000..65c48f0
--- /dev/null
+++ b/run/input/core/srv/app/samples/z2ui5_cl_demo_app_447.js
@@ -0,0 +1,49 @@
+const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
+const z2ui5_cl_xml_view = require("abap2UI5/z2ui5_cl_xml_view");
+const z2ui5_if_app = require("abap2UI5/z2ui5_if_app");
+
+class z2ui5_cl_demo_app_447 extends z2ui5_if_app {
+  mt_row = [];
+  client = null;
+
+  async main(client) {
+    this.client = z2ui5_cl_util.abap_copy(client);
+    if (client.check_on_init()) {
+      for (let sy_index = 1; sy_index <= 30; sy_index++) {
+        this.mt_row.push({ index: sy_index, text: `Row number ${sy_index}` });
+      }
+      this.view_display();
+    } else {
+      this.on_event();
+    }
+  }
+
+  on_event() {
+    switch (this.client.get().EVENT) {
+      case `FOCUS`:
+        this.client.control_call_by_id({ id: `nameInput`, method: `focus` });
+        break;
+      case `SCROLL`:
+        this.client.control_call_by_id({ id: `bigTable`, method: `scrollToIndex`, params: [`25`] });
+        break;
+    }
+    this.view_display();
+  }
+
+  view_display() {
+    const view = z2ui5_cl_xml_view.factory();
+    const page = view.shell()
+      .page({ title: `abap2UI5 - Action - control_call_by_id`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() });
+    page.message_strip({ text: `The backend calls a whitelisted method on a control resolved by id, after the ` + `response renders: focus() on the input, scrollToIndex() on the table.`, type: `Information`, showicon: true, class: `sapUiSmallMargin` });
+    page.vbox(`sapUiSmallMargin`)
+      .input({ id: `nameInput`, placeholder: `this input can be focused from the backend` })
+      .button({ text: `focus( ) the input`, icon: `sap-icon://edit`, press: this.client._event(`FOCUS`), class: `sapUiTinyMarginTop` })
+      .button({ text: `scrollToIndex( 25 ) on the table`, icon: `sap-icon://down`, press: this.client._event(`SCROLL`), class: `sapUiTinyMarginTop` });
+    const tab = page.table({ id: `bigTable`, items: this.client._bind(this.mt_row) });
+    tab.columns().column().text(`Index`).get_parent().column().text(`Text`).get_parent();
+    tab.items().column_list_item().cells().text(`{INDEX}`).text(`{TEXT}`);
+    this.client.view_display(view.stringify());
+  }
+}
+
+module.exports = z2ui5_cl_demo_app_447;
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_sample_app_001.js b/run/input/core/srv/app/samples/z2ui5_cl_sample_app_001.js
index bee85f3..d0ddf3d 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_sample_app_001.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_sample_app_001.js
@@ -35,7 +35,7 @@ class z2ui5_cl_sample_app_001 extends z2ui5_if_app {
     if (!this.s_scroll.id) {
       return;
     }
-    this.client.action.gen({ val: z2ui5_if_client.cs_event.scroll_to, t_arg: [this.s_scroll.id, `${this.s_scroll.y}`, `${this.s_scroll.x}`] });
+    this.client.follow_up_action({ val: z2ui5_if_client.cs_event.scroll_to, t_arg: [this.s_scroll.id, `${this.s_scroll.y}`, `${this.s_scroll.x}`] });
   }
 
   view_display() {
@@ -44,7 +44,11 @@ class z2ui5_cl_sample_app_001 extends z2ui5_if_app {
     let url;
     let base;
     let new_block;
+    let tenths;
+    let width;
     let row;
+    const t_catalog = this.get_catalog();
+    const t_blocks = this.block_widths({ t_catalog: t_catalog });
     const view = z2ui5_cl_xml_view.factory();
     const page = view.shell()
       .page({ id: `page`, title: `abap2UI5 - Samples`, navbuttonpress: this.client._event_nav_app_leave(), shownavbutton: this.client.check_app_prev_stack() });
@@ -59,12 +63,12 @@ class z2ui5_cl_sample_app_001 extends z2ui5_if_app {
       url = `${this.client.get()
         .S_CONFIG.ORIGIN}${this.client.get()
         .S_CONFIG.PATHNAME}?app_start=z2ui5_cl_demo_app_000`;
-      page.message_strip({ type: `Warning`, showicon: true, enableformattedtext: true, class: `sapUiSmallMarginBottom`, text: `This overview is still under construction. Click <a href="${url}" target="_blank">here</a> to open the classic launchpad overview.` });
+      page.message_strip({ type: `Warning`, showicon: true, enableformattedtext: true, class: `sapUiSmallMarginBottom`, text: `This overview is still under construction. Click <a href="${url}" target="_blank">here</a> to open the classic overview.` });
     }
     let prev_group = ``;
     let prev_base = ``;
     sy_tabix = 0;
-    for (const tile of this.get_catalog()) {
+    for (const tile of t_catalog) {
       sy_tabix++;
       base = this.header_base({ header: tile.header });
       new_block = false;
@@ -75,12 +79,13 @@ class z2ui5_cl_sample_app_001 extends z2ui5_if_app {
         new_block = true;
       }
       prev_base = z2ui5_cl_util.abap_copy(base);
+      tenths = Math.trunc(z2ui5_cl_util.abap_div(((t_blocks.find((row) => row.group === tile.group && row.base === base).width + 45)), 10));
+      width = `${Math.trunc(z2ui5_cl_util.abap_div(tenths, 10))}.${tenths % 10}em`;
       row = page.hbox({ alignitems: `Center`, wrap: `Wrap`, class: ((new_block === true || new_block === `X`) ? `sapUiTinyMarginBegin sapUiSmallMarginTop` : `sapUiTinyMarginBegin`) });
       if (!tile.sub) {
-        row.link({ text: tile.header, press: this.client._event(tile.app) });
+        row.link({ text: tile.header, width, press: this.client._event(tile.app) });
       } else {
-        row.link({ text: tile.header, class: `sapUiTinyMarginEnd`, press: this.client._event(tile.app) })
-          .text(tile.sub);
+        row.link({ text: tile.header, width, press: this.client._event(tile.app) }).text(tile.sub);
       }
     }
     this.client.view_display(view.stringify());
@@ -100,7 +105,50 @@ class z2ui5_cl_sample_app_001 extends z2ui5_if_app {
 
   get_catalog() {
     let result = [];
-    result = [{ group: `framework - basics`, header: `Binding`, sub: `Display dynamic created table RTTI`, app: `z2ui5_cl_demo_app_061` }, { group: `framework - basics`, header: `Binding I`, sub: `Simple - Send values to the backend`, app: `z2ui5_cl_demo_app_001` }, { group: `framework - basics`, header: `Binding II`, sub: `Structure Component Level`, app: `z2ui5_cl_demo_app_166` }, { group: `framework - basics`, header: `Binding III`, sub: `Table Cell Level`, app: `z2ui5_cl_demo_app_144` }, { group: `framework - basics`, header: `Binding IV`, sub: `Expression Binding`, app: `z2ui5_cl_demo_app_027` }, { group: `framework - basics`, header: `Binding V`, sub: `Use of Integer, Decimals, Dates & Time`, app: `z2ui5_cl_demo_app_047` }, { group: `framework - basics`, header: `Binding VII`, sub: `Formatting Currencies`, app: `z2ui5_cl_demo_app_067` }, { group: `framework - basics`, header: `Binding VIII`, sub: `SetSizeLimit`, app: `z2ui5_cl_demo_app_071` }, { group: `framework - basics`, header: `Event I`, sub: `Handle events & change the view`, app: `z2ui5_cl_demo_app_004` }, { group: `framework - basics`, header: `Event III`, sub: `Additional Infos with t_args`, app: `z2ui5_cl_demo_app_167` }, { group: `framework - basics`, header: `Event IV`, sub: `Facet Filter - T_arg with Objects`, app: `z2ui5_cl_demo_app_197` }, { group: `framework - basics`, header: `Message`, sub: `Message Box`, app: `z2ui5_cl_demo_app_008` }, { group: `framework - basics`, header: `Message`, sub: `Message Toast`, app: `z2ui5_cl_demo_app_187` }, { group: `framework - basics`, header: `More`, sub: `Call and leave to apps`, app: `z2ui5_cl_demo_app_024` }, { group: `framework - basics`, header: `More`, sub: `Read Frontend Infos`, app: `z2ui5_cl_demo_app_122` }, { group: `framework - basics`, header: `Nested Views I`, sub: `Basic Example`, app: `z2ui5_cl_demo_app_065` }, { group: `framework - basics`, header: `Nested Views II`, sub: `Head & Item Table`, app: `z2ui5_cl_demo_app_097` }, { group: `framework - basics`, header: `Nested Views III`, sub: `Head & Item Table & Detail`, app: `z2ui5_cl_demo_app_098` }, { group: `framework - basics`, header: `Nested Views IV`, sub: `Sub-App`, app: `z2ui5_cl_demo_app_104` }, { group: `framework - basics`, header: `Popover`, sub: `Display with Menu`, app: `z2ui5_cl_demo_app_163` }, { group: `framework - basics`, header: `Popover I`, sub: `Simple Example`, app: `z2ui5_cl_demo_app_026` }, { group: `framework - basics`, header: `Popover II`, sub: `Item Level of Table`, app: `z2ui5_cl_demo_app_052` }, { group: `framework - basics`, header: `Popover III`, sub: `List to select in Popover`, app: `z2ui5_cl_demo_app_081` }, { group: `framework - basics`, header: `Popover IV`, sub: `with Quick View`, app: `z2ui5_cl_demo_app_109` }, { group: `framework - basics`, header: `Popup I`, sub: `Different ways of calling Popups`, app: `z2ui5_cl_demo_app_012` }, { group: `framework - basics`, header: `Popup II`, sub: `Create Popup for Value Help`, app: `z2ui5_cl_demo_app_009` }, { group: `framework - basics`, header: `Popup III`, sub: `Popup in Popup - Backend Stack Handling`, app: `z2ui5_cl_demo_app_161` }, { group: `framework - basics`, header: `Templating I`, sub: `Basic Example`, app: `z2ui5_cl_demo_app_173` }, { group: `framework - basics`, header: `Templating II`, sub: `Nested Views`, app: `z2ui5_cl_demo_app_176` }, { group: `framework - action`, header: `Clipboard`, sub: `Copy & Paste Text`, app: `z2ui5_cl_demo_app_325` }, { group: `framework - action`, header: `Focus I`, sub: `Set Focus in Textfield`, app: `z2ui5_cl_demo_app_133` }, { group: `framework - action`, header: `Focus II`, sub: `Jump with the focus`, app: `z2ui5_cl_demo_app_189` }, { group: `framework - action`, header: `Keyboard`, sub: `Hide/show Soft Keyboard`, app: `z2ui5_cl_demo_app_352` }, { group: `framework - action`, header: `Scroll I`, sub: `Scroll to position`, app: `z2ui5_cl_demo_app_362` }, { group: `framework - action`, header: `Scroll II`, sub: `Scroll into view`, app: `z2ui5_cl_demo_app_363` }, { group: `framework - action`, header: `Timer I`, sub: `Wait n MS and call again the server`, app: `z2ui5_cl_demo_app_028` }, { group: `framework - action`, header: `Timer II`, sub: `Set Loading Indicator while Server Request`, app: `z2ui5_cl_demo_app_064` }, { group: `framework - action`, header: `Title`, sub: `Set Title`, app: `z2ui5_cl_demo_app_125` }, { group: `framework - action`, header: `URL I`, sub: `New Tab Open an URL in a new tab`, app: `z2ui5_cl_demo_app_073` }, { group: `framework - action`, header: `URL II`, sub: `Open Telephon, Email usw`, app: `z2ui5_cl_demo_app_316` }, { group: `controls - extended`, header: `CameraSelector`, sub: ``, app: `z2ui5_cl_demo_app_306` }, { group: `controls - extended`, header: `Data loss protection`, sub: ``, app: `z2ui5_cl_demo_app_279` }, { group: `controls - extended`, header: `File Uploader I`, sub: ``, app: `z2ui5_cl_demo_app_074` }, { group: `controls - extended`, header: `File Uploader II`, sub: ``, app: `z2ui5_cl_demo_app_075` }, { group: `controls - extended`, header: `File Uploader III`, sub: ``, app: `z2ui5_cl_demo_app_136` }, { group: `controls - extended`, header: `Multi Input`, sub: ``, app: `z2ui5_cl_demo_app_078` }, { group: `controls - extended`, header: `Nav Container I`, sub: ``, app: `z2ui5_cl_demo_app_088` }, { group: `controls - extended`, header: `Wizard Control I`, sub: ``, app: `z2ui5_cl_demo_app_175` }, { group: `controls - extended`, header: `Wizard Control II`, sub: `Next step & SubSequentStep`, app: `z2ui5_cl_demo_app_202` }, { group: `controls`, header: `Action List Item`, sub: ``, app: `z2ui5_cl_demo_app_216` }, { group: `controls`, header: `Action Sheet`, sub: `Choose an Action`, app: `z2ui5_cl_demo_app_373` }, { group: `controls`, header: `Bar`, sub: `Page, Toolbar & Bar`, app: `z2ui5_cl_demo_app_227` }, { group: `controls`, header: `Bar`, sub: `Toolbar vs Bar vs OverflowToolbar`, app: `z2ui5_cl_demo_app_235` }, { group: `controls`, header: `Breadcrumbs`, sub: `sample with current page link`, app: `z2ui5_cl_demo_app_292` }, { group: `controls`, header: `Busy Indicator`, sub: ``, app: `z2ui5_cl_demo_app_215` }, { group: `controls`, header: `Button`, sub: ``, app: `z2ui5_cl_demo_app_259` }, { group: `controls`, header: `Card`, sub: `with Header & Content`, app: `z2ui5_cl_demo_app_181` }, { group: `controls`, header: `Carousel`, sub: `Browse through Pages`, app: `z2ui5_cl_demo_app_371` }, { group: `controls`, header: `Checkbox`, sub: ``, app: `z2ui5_cl_demo_app_239` }, { group: `controls`, header: `Code Editor`, sub: ``, app: `z2ui5_cl_demo_app_035` }, { group: `controls`, header: `Code Editor`, sub: ``, app: `z2ui5_cl_demo_app_265` }, { group: `controls`, header: `Color Picker`, sub: ``, app: `z2ui5_cl_demo_app_270` }, { group: `controls`, header: `ComboBox`, sub: `Suggestions wrapping`, app: `z2ui5_cl_demo_app_229` }, { group: `controls`, header: `Date Picker`, sub: `Value States`, app: `z2ui5_cl_demo_app_294` }, { group: `controls`, header: `Date Range Selection`, sub: ``, app: `z2ui5_cl_demo_app_231` }, { group: `controls`, header: `Date Range Selection`, sub: `Value States`, app: `z2ui5_cl_demo_app_295` }, { group: `controls`, header: `Date Time Picker`, sub: `Value States`, app: `z2ui5_cl_demo_app_377` }, { group: `controls`, header: `Dynamic Page`, sub: `Display items`, app: `z2ui5_cl_demo_app_030` }, { group: `controls`, header: `Feed Input`, sub: ``, app: `z2ui5_cl_demo_app_101` }, { group: `controls`, header: `Feed Input`, sub: `Icon Variants`, app: `z2ui5_cl_demo_app_283` }, { group: `controls`, header: `Flex Box`, sub: `Basic Alignment`, app: `z2ui5_cl_demo_app_205` }, { group: `controls`, header: `Flex Box`, sub: `Direction & Order`, app: `z2ui5_cl_demo_app_245` }, { group: `controls`, header: `Flex Box`, sub: `Opposing Alignment`, app: `z2ui5_cl_demo_app_218` }, { group: `controls`, header: `Flex Box`, sub: `Render Type`, app: `z2ui5_cl_demo_app_252` }, { group: `controls`, header: `Flexible Column Layout`, sub: `Master details with tree`, app: `z2ui5_cl_demo_app_069` }, { group: `controls`, header: `Formatted Text`, sub: `Display HTML`, app: `z2ui5_cl_demo_app_015` }, { group: `controls`, header: `Generic Tag`, sub: `Since 1.70`, app: `z2ui5_cl_demo_app_062` }, { group: `controls`, header: `Generic Tag`, sub: `with Different Configurations`, app: `z2ui5_cl_demo_app_257` }, { group: `controls`, header: `Grid`, sub: `Split View in different Areas`, app: `z2ui5_cl_demo_app_367` }, { group: `controls`, header: `Grid List`, sub: `with Drag&Drop`, app: `z2ui5_cl_demo_app_307` }, { group: `controls`, header: `Header Container`, sub: `Vertical Mode`, app: `z2ui5_cl_demo_app_280` }, { group: `controls`, header: `HTML`, sub: ``, app: `z2ui5_cl_demo_app_242` }, { group: `controls`, header: `Icon Tab Bar`, sub: `Filter Table with Counts`, app: `z2ui5_cl_demo_app_368` }, { group: `controls`, header: `Icon Tab Bar`, sub: `Icons Only`, app: `z2ui5_cl_demo_app_221` }, { group: `controls`, header: `Icon Tab Bar`, sub: `Inline Mode`, app: `z2ui5_cl_demo_app_223` }, { group: `controls`, header: `Icon Tab Bar`, sub: `Separator`, app: `z2ui5_cl_demo_app_225` }, { group: `controls`, header: `Icon Tab Bar`, sub: `Sub tabs`, app: `z2ui5_cl_demo_app_226` }, { group: `controls`, header: `Icon Tab Bar`, sub: `Text and Count`, app: `z2ui5_cl_demo_app_222` }, { group: `controls`, header: `Icon Tab Bar`, sub: `Text Only`, app: `z2ui5_cl_demo_app_224` }, { group: `controls`, header: `Icon Tab Header`, sub: `Standalone Icon Tab Header`, app: `z2ui5_cl_demo_app_214` }, { group: `controls`, header: `Image`, sub: `Sizing & Press Event`, app: `z2ui5_cl_demo_app_379` }, { group: `controls`, header: `InfoLabel`, sub: ``, app: `z2ui5_cl_demo_app_209` }, { group: `controls`, header: `Input`, sub: `Description`, app: `z2ui5_cl_demo_app_251` }, { group: `controls`, header: `Input`, sub: `Password`, app: `z2ui5_cl_demo_app_213` }, { group: `controls`, header: `Input`, sub: `Suggestions wrapping`, app: `z2ui5_cl_demo_app_246` }, { group: `controls`, header: `Input`, sub: `Types`, app: `z2ui5_cl_demo_app_210` }, { group: `controls`, header: `Input List Item`, sub: ``, app: `z2ui5_cl_demo_app_219` }, { group: `controls`, header: `InvisibleText`, sub: ``, app: `z2ui5_cl_demo_app_282` }, { group: `controls`, header: `Label`, sub: ``, app: `z2ui5_cl_demo_app_051` }, { group: `controls`, header: `LightBox`, sub: ``, app: `z2ui5_cl_demo_app_273` }, { group: `controls`, header: `Link`, sub: ``, app: `z2ui5_cl_demo_app_293` }, { group: `controls`, header: `List I`, sub: `Basic`, app: `z2ui5_cl_demo_app_003` }, { group: `controls`, header: `List II`, sub: `Events & Visualization`, app: `z2ui5_cl_demo_app_048` }, { group: `controls`, header: `Mask Input`, sub: ``, app: `z2ui5_cl_demo_app_110` }, { group: `controls`, header: `Menu Button`, sub: `Regular & Split Mode`, app: `z2ui5_cl_demo_app_372` }, { group: `controls`, header: `Message Strip`, sub: ``, app: `z2ui5_cl_demo_app_238` }, { group: `controls`, header: `Message Strip`, sub: `with enableFormattedText`, app: `z2ui5_cl_demo_app_291` }, { group: `controls`, header: `Message View`, sub: `Custom Popup, Popover & Output`, app: `z2ui5_cl_demo_app_038` }, { group: `controls`, header: `Multi Combo Box`, sub: `Suggestions wrapping`, app: `z2ui5_cl_demo_app_233` }, { group: `controls`, header: `Multi Input`, sub: `Suggestions wrapping`, app: `z2ui5_cl_demo_app_232` }, { group: `controls`, header: `Multi Input`, sub: `Value States`, app: `z2ui5_cl_demo_app_267` }, { group: `controls`, header: `Notification List Item`, sub: `Priority & Close Button`, app: `z2ui5_cl_demo_app_375` }, { group: `controls`, header: `Object Attribute`, sub: `inside a Table`, app: `z2ui5_cl_demo_app_302` }, { group: `controls`, header: `Object Header`, sub: `with Circle-shaped Image`, app: `z2ui5_cl_demo_app_272` }, { group: `controls`, header: `Object Identifier`, sub: `inside a Table`, app: `z2ui5_cl_demo_app_370` }, { group: `controls`, header: `Object List Item`, sub: `markers aggregation`, app: `z2ui5_cl_demo_app_290` }, { group: `controls`, header: `Object Marker`, sub: `inside a Table`, app: `z2ui5_cl_demo_app_289` }, { group: `controls`, header: `Object Number`, sub: `inside a Table`, app: `z2ui5_cl_demo_app_369` }, { group: `controls`, header: `Object Page`, sub: `with Avatar (since 1.73)`, app: `z2ui5_cl_demo_app_017` }, { group: `controls`, header: `Object Page`, sub: `with Hidden Section Titles`, app: `z2ui5_cl_demo_app_330` }, { group: `controls`, header: `Object Page Header`, sub: `with Header Container`, app: `z2ui5_cl_demo_app_303` }, { group: `controls`, header: `Object Status`, sub: ``, app: `z2ui5_cl_demo_app_300` }, { group: `controls`, header: `Overflow Toolbar`, sub: ``, app: `z2ui5_cl_demo_app_217` }, { group: `controls`, header: `Overflow Toolbar`, sub: `Alignment`, app: `z2ui5_cl_demo_app_250` }, { group: `controls`, header: `Page`, sub: `Header, Sub-Header & Footer`, app: `z2ui5_cl_demo_app_366` }, { group: `controls`, header: `Panel`, sub: `Expandable & Header Toolbar`, app: `z2ui5_cl_demo_app_378` }, { group: `controls`, header: `Planning Calendar`, sub: ``, app: `z2ui5_cl_demo_app_080` }, { group: `controls`, header: `Progress Indicator`, sub: ``, app: `z2ui5_cl_demo_app_022` }, { group: `controls`, header: `Radio Button`, sub: ``, app: `z2ui5_cl_demo_app_207` }, { group: `controls`, header: `Radio Button Group`, sub: ``, app: `z2ui5_cl_demo_app_208` }, { group: `controls`, header: `Range Slider`, sub: ``, app: `z2ui5_cl_demo_app_005` }, { group: `controls`, header: `Rating Indicator`, sub: ``, app: `z2ui5_cl_demo_app_220` }, { group: `controls`, header: `Rich Text Editor`, sub: ``, app: `z2ui5_cl_demo_app_106` }, { group: `controls`, header: `Search Field`, sub: ``, app: `z2ui5_cl_demo_app_296` }, { group: `controls`, header: `Search Field I`, sub: `Filter with enter`, app: `z2ui5_cl_demo_app_053` }, { group: `controls`, header: `Search Field II`, sub: `Filter with Live Change Event`, app: `z2ui5_cl_demo_app_059` }, { group: `controls`, header: `Segmented Button`, sub: `in Input List Item`, app: `z2ui5_cl_demo_app_230` }, { group: `controls`, header: `Select`, sub: ``, app: `z2ui5_cl_demo_app_288` }, { group: `controls`, header: `Select`, sub: `Validation states`, app: `z2ui5_cl_demo_app_298` }, { group: `controls`, header: `Select`, sub: `with icons`, app: `z2ui5_cl_demo_app_297` }, { group: `controls`, header: `Select`, sub: `Wrapping text`, app: `z2ui5_cl_demo_app_299` }, { group: `controls`, header: `Slide Tile`, sub: ``, app: `z2ui5_cl_demo_app_274` }, { group: `controls`, header: `Slider`, sub: ``, app: `z2ui5_cl_demo_app_237` }, { group: `controls`, header: `Split Container`, sub: `Master & Detail Pages`, app: `z2ui5_cl_demo_app_374` }, { group: `controls`, header: `Splitter Layout`, sub: `2 areas`, app: `z2ui5_cl_demo_app_247` }, { group: `controls`, header: `Splitter Layout`, sub: `2 non-resizable areas`, app: `z2ui5_cl_demo_app_248` }, { group: `controls`, header: `Splitter Layout`, sub: `3 areas`, app: `z2ui5_cl_demo_app_249` }, { group: `controls`, header: `Splitter Layout`, sub: `Nested with 7 Areas`, app: `z2ui5_cl_demo_app_260` }, { group: `controls`, header: `Splitter Layout`, sub: `Side Panel`, app: `z2ui5_cl_demo_app_103` }, { group: `controls`, header: `Standard List Item`, sub: `Wrapping`, app: `z2ui5_cl_demo_app_287` }, { group: `controls`, header: `Step Input`, sub: ``, app: `z2ui5_cl_demo_app_041` }, { group: `controls`, header: `Step Input`, sub: `Value States`, app: `z2ui5_cl_demo_app_264` }, { group: `controls`, header: `Switch`, sub: ``, app: `z2ui5_cl_demo_app_240` }, { group: `controls`, header: `Tab Container`, sub: `Multiple Items`, app: `z2ui5_cl_demo_app_380` }, { group: `controls`, header: `Table`, sub: `Selection Modes: Single Select & Multi Select`, app: `z2ui5_cl_demo_app_019` }, { group: `controls`, header: `Table`, sub: `Set Columns Editable`, app: `z2ui5_cl_demo_app_011` }, { group: `controls`, header: `Text`, sub: `Max Lines`, app: `z2ui5_cl_demo_app_206` }, { group: `controls`, header: `Text Area`, sub: ``, app: `z2ui5_cl_demo_app_021` }, { group: `controls`, header: `Text Area`, sub: `Growing`, app: `z2ui5_cl_demo_app_236` }, { group: `controls`, header: `Text Area`, sub: `Value States`, app: `z2ui5_cl_demo_app_234` }, { group: `controls`, header: `Tile`, sub: `Feed and News Tile`, app: `z2ui5_cl_demo_app_278` }, { group: `controls`, header: `Tile`, sub: `Feed Content`, app: `z2ui5_cl_demo_app_275` }, { group: `controls`, header: `Tile`, sub: `Image Content`, app: `z2ui5_cl_demo_app_271` }, { group: `controls`, header: `Tile`, sub: `Monitor Tile`, app: `z2ui5_cl_demo_app_276` }, { group: `controls`, header: `Tile`, sub: `News Content`, app: `z2ui5_cl_demo_app_261` }, { group: `controls`, header: `Tile`, sub: `Numeric Content of Different Colors`, app: `z2ui5_cl_demo_app_262` }, { group: `controls`, header: `Tile`, sub: `Numeric Content with Icon`, app: `z2ui5_cl_demo_app_263` }, { group: `controls`, header: `Tile`, sub: `Numeric Content Without Margins`, app: `z2ui5_cl_demo_app_228` }, { group: `controls`, header: `Tile`, sub: `Statuses`, app: `z2ui5_cl_demo_app_281` }, { group: `controls`, header: `Tile`, sub: `Tile Content`, app: `z2ui5_cl_demo_app_241` }, { group: `controls`, header: `Time Picker`, sub: `Formats & Steps`, app: `z2ui5_cl_demo_app_376` }, { group: `controls`, header: `Toggle Button`, sub: ``, app: `z2ui5_cl_demo_app_266` }, { group: `controls`, header: `Toolbar`, sub: `Add a container & toolbar`, app: `z2ui5_cl_demo_app_006` }, { group: `controls`, header: `Tree Table I`, sub: `Popup Select Entry`, app: `z2ui5_cl_demo_app_068` }, { group: `controls`, header: `Tree Table II`, sub: `Checkbox Binding per Node`, app: `z2ui5_cl_demo_app_364` }, { group: `controls`, header: `ui.Table I`, sub: `Simple example`, app: `z2ui5_cl_demo_app_070` }, { group: `controls`, header: `ui.Table II`, sub: `Events on Cell Level`, app: `z2ui5_cl_demo_app_160` }];
+    result = [{ group: `framework - basics`, header: `Binding I`, sub: `Level Simple`, app: `z2ui5_cl_demo_app_001` }, { group: `framework - basics`, header: `Binding II`, sub: `Level Structure/Component`, app: `z2ui5_cl_demo_app_166` }, { group: `framework - basics`, header: `Binding III`, sub: `Level Table/Cell`, app: `z2ui5_cl_demo_app_144` }, { group: `framework - basics`, header: `Binding IV`, sub: `Expression Binding`, app: `z2ui5_cl_demo_app_027` }, { group: `framework - basics`, header: `Binding V`, sub: `Formatting Integers, Decimals, Dates & Time`, app: `z2ui5_cl_demo_app_047` }, { group: `framework - basics`, header: `Binding VII`, sub: `Formatting Currencies`, app: `z2ui5_cl_demo_app_067` }, { group: `framework - basics`, header: `Event I`, sub: `Handle events & change the view`, app: `z2ui5_cl_demo_app_004` }, { group: `framework - basics`, header: `Event II`, sub: `Additional Infos with t_args`, app: `z2ui5_cl_demo_app_167` }, { group: `framework - basics`, header: `Event III`, sub: `Facet Filter - T_arg with Objects`, app: `z2ui5_cl_demo_app_197` }, { group: `framework - basics`, header: `Message`, sub: `Backend`, app: `z2ui5_cl_demo_app_008` }, { group: `framework - basics`, header: `Message`, sub: `MessageBox`, app: `z2ui5_cl_demo_app_382` }, { group: `framework - basics`, header: `Message`, sub: `MessageToast`, app: `z2ui5_cl_demo_app_381` }, { group: `framework - basics`, header: `More`, sub: `Call and leave to apps`, app: `z2ui5_cl_demo_app_024` }, { group: `framework - basics`, header: `More`, sub: `Generic Data Reference`, app: `z2ui5_cl_demo_app_061` }, { group: `framework - basics`, header: `More`, sub: `Model Size Limit`, app: `z2ui5_cl_demo_app_071` }, { group: `framework - basics`, header: `More`, sub: `Read Frontend Infos`, app: `z2ui5_cl_demo_app_122` }, { group: `framework - basics`, header: `More`, sub: `Require Object in XML View`, app: `z2ui5_cl_demo_app_163` }, { group: `framework - basics`, header: `Nested Views I`, sub: `Basic Example`, app: `z2ui5_cl_demo_app_065` }, { group: `framework - basics`, header: `Nested Views II`, sub: `Head & Item Table`, app: `z2ui5_cl_demo_app_097` }, { group: `framework - basics`, header: `Nested Views III`, sub: `Head & Item Table & Detail`, app: `z2ui5_cl_demo_app_098` }, { group: `framework - basics`, header: `Nested Views IV`, sub: `Sub-App`, app: `z2ui5_cl_demo_app_104` }, { group: `framework - basics`, header: `Popover I`, sub: `Simple Example`, app: `z2ui5_cl_demo_app_026` }, { group: `framework - basics`, header: `Popover II`, sub: `Item Level of Table`, app: `z2ui5_cl_demo_app_052` }, { group: `framework - basics`, header: `Popover III`, sub: `List to select in Popover`, app: `z2ui5_cl_demo_app_081` }, { group: `framework - basics`, header: `Popover IV`, sub: `with Quick View`, app: `z2ui5_cl_demo_app_109` }, { group: `framework - basics`, header: `Popup I`, sub: `Different ways of calling Popups`, app: `z2ui5_cl_demo_app_012` }, { group: `framework - basics`, header: `Popup II`, sub: `Create Popup for Value Help`, app: `z2ui5_cl_demo_app_009` }, { group: `framework - basics`, header: `Popup III`, sub: `Popup in Popup - Backend Stack Handling`, app: `z2ui5_cl_demo_app_161` }, { group: `framework - basics`, header: `Templating I`, sub: `Basic Example`, app: `z2ui5_cl_demo_app_173` }, { group: `framework - basics`, header: `Templating II`, sub: `Nested Views`, app: `z2ui5_cl_demo_app_176` }, { group: `framework - action`, header: `Action`, sub: `control_call`, app: `z2ui5_cl_demo_app_446` }, { group: `framework - action`, header: `Action`, sub: `control_call_by_id`, app: `z2ui5_cl_demo_app_447` }, { group: `framework - action`, header: `Browser`, sub: `Logout`, app: `z2ui5_cl_demo_app_361` }, { group: `framework - action`, header: `Browser`, sub: `Title`, app: `z2ui5_cl_demo_app_125` }, { group: `framework - action`, header: `Focus I`, sub: `Set Focus in Textfield`, app: `z2ui5_cl_demo_app_133` }, { group: `framework - action`, header: `Focus II`, sub: `Jump with the focus`, app: `z2ui5_cl_demo_app_189` }, { group: `framework - action`, header: `Image Editor`, sub: `Edit in Popup and return PNG`, app: `z2ui5_cl_demo_app_383` }, { group: `framework - action`, header: `Input`, sub: `Clipboard`, app: `z2ui5_cl_demo_app_325` }, { group: `framework - action`, header: `Input`, sub: `Hide/show Soft Keyboard`, app: `z2ui5_cl_demo_app_352` }, { group: `framework - action`, header: `Scroll I`, sub: `Scroll to position`, app: `z2ui5_cl_demo_app_362` }, { group: `framework - action`, header: `Scroll II`, sub: `Scroll into view`, app: `z2ui5_cl_demo_app_363` }, { group: `framework - action`, header: `Timer I`, sub: `Wait n MS and call again the server`, app: `z2ui5_cl_demo_app_028` }, { group: `framework - action`, header: `Timer II`, sub: `Loading Indicator with WAIT UP Backend`, app: `z2ui5_cl_demo_app_064` }, { group: `framework - action`, header: `URL I`, sub: `New Tab Open an URL in a new tab`, app: `z2ui5_cl_demo_app_073` }, { group: `framework - action`, header: `URL II`, sub: `Open Telephon, Email usw`, app: `z2ui5_cl_demo_app_316` }, { group: `framework - extended Controls (CC and Action)`, header: `A Nav Container`, sub: ``, app: `z2ui5_cl_demo_app_088` }, { group: `framework - extended Controls (CC and Action)`, header: `A Nav Container`, sub: `Popup`, app: `z2ui5_cl_demo_app_170` }, { group: `framework - extended Controls (CC and Action)`, header: `A Wizard Control`, sub: ``, app: `z2ui5_cl_demo_app_202` }, { group: `framework - extended Controls (CC and Action)`, header: `C File Uploader`, sub: ``, app: `z2ui5_cl_demo_app_074` }, { group: `framework - extended Controls (CC and Action)`, header: `C Geoloaction`, sub: ``, app: `z2ui5_cl_demo_app_120` }, { group: `framework - extended Controls (CC and Action)`, header: `C Multi Input`, sub: ``, app: `z2ui5_cl_demo_app_078` }, { group: `framework - extended Controls (CC and Action)`, header: `CC CameraSelector`, sub: ``, app: `z2ui5_cl_demo_app_306` }, { group: `framework - extended Controls (CC and Action)`, header: `CC Data loss protection`, sub: ``, app: `z2ui5_cl_demo_app_279` }, { group: `framework - use cases`, header: `sap.m.List`, sub: `Events & Visualization`, app: `z2ui5_cl_demo_app_048` }, { group: `framework - use cases`, header: `sap.m.SearchField`, sub: `Live Search`, app: `z2ui5_cl_demo_app_059` }, { group: `framework - use cases`, header: `sap.m.SearchField`, sub: `Search`, app: `z2ui5_cl_demo_app_053` }, { group: `framework - use cases`, header: `sap.m.Table`, sub: `Backend Filter`, app: `z2ui5_cl_demo_app_045` }, { group: `framework - use cases`, header: `sap.m.Table`, sub: `Editable`, app: `z2ui5_cl_demo_app_011` }, { group: `framework - use cases`, header: `sap.m.Table`, sub: `Selection Modes: Single Select & Multi Select`, app: `z2ui5_cl_demo_app_019` }, { group: `framework - use cases`, header: `sap.m.Table`, sub: `Table with sap.m.ScrollContainer`, app: `z2ui5_cl_demo_app_006` }, { group: `framework - use cases`, header: `sap.ui.Device`, sub: `Device Model in views and popups`, app: `z2ui5_cl_demo_app_445` }, { group: `framework - use cases`, header: `sap.ui.Table`, sub: `Events on Cell Level`, app: `z2ui5_cl_demo_app_160` }, { group: `framework - use cases`, header: `sap.ui.Table`, sub: `Filtering`, app: `z2ui5_cl_demo_app_143` }, { group: `framework - use cases`, header: `sap.ui.Table`, sub: `Full Example`, app: `z2ui5_cl_demo_app_070` }, { group: `controls - sap.m`, header: `sap.m.ActionListItem`, sub: `Use the Action List Item to trigger an action directly from a list`, app: `z2ui5_cl_demo_app_216` }, { group: `controls - sap.m`, header: `sap.m.Breadcrumbs`, sub: `Breadcrumbs sample with current page set as aggregation, resulting in a link`, app: `z2ui5_cl_demo_app_292` }, { group: `controls - sap.m`, header: `sap.m.BusyIndicator`, sub: `The Busy Indicator signals that some operation is going on and that the user must wait. It does not block the current UI screen so other operations could be triggered in parallel.`, app: `z2ui5_cl_demo_app_215` }, { group: `controls - sap.m`, header: `sap.m.Button`, sub: `Buttons trigger user actions and come in a variety of shapes and colors. Placing a button on a page header or footer changes its appearance.`, app: `z2ui5_cl_demo_app_259` }, { group: `controls - sap.m`, header: `sap.m.Carousel`, sub: `A sample of a Carousel that contains images.`, app: `z2ui5_cl_demo_app_371` }, { group: `controls - sap.m`, header: `sap.m.CheckBox`, sub: `Checkboxes allow users to select a subset of options. If you want to offer an off/on setting you should use the Switch control instead.`, app: `z2ui5_cl_demo_app_239` }, { group: `controls - sap.m`, header: `sap.m.ComboBox`, sub: `Suggestions wrap automatically when longer then the dropdown width`, app: `z2ui5_cl_demo_app_229` }, { group: `controls - sap.m`, header: `sap.m.DatePicker`, sub: `This example shows different DatePicker value states.`, app: `z2ui5_cl_demo_app_294` }, { group: `controls - sap.m`, header: `sap.m.DateRangeSelection`, sub: `This example shows different DateRangeSelection value states.`, app: `z2ui5_cl_demo_app_295` }, { group: `controls - sap.m`, header: `sap.m.DateTimePicker`, sub: `Value States`, app: `z2ui5_cl_demo_app_377` }, { group: `controls - sap.m`, header: `sap.m.FeedContent`, sub: `Shows the tile containing the text of the feed, a subheader, and a numeric value.`, app: `z2ui5_cl_demo_app_275` }, { group: `controls - sap.m`, header: `sap.m.FeedInput`, sub: ``, app: `z2ui5_cl_demo_app_114` }, { group: `controls - sap.m`, header: `sap.m.FeedInput`, sub: `This sample shows a standalone feed input with different settings.`, app: `z2ui5_cl_demo_app_283` }, { group: `controls - sap.m`, header: `sap.m.FeedListItem`, sub: `This sample shows you how to build a complete feed user interface by combining a FeedInput with a list of FeedListItems.`, app: `z2ui5_cl_demo_app_101` }, { group: `controls - sap.m`, header: `sap.m.FlexBox`, sub: `Flex Box items can be placed in different areas using the justifyContent and alignItem properties.`, app: `z2ui5_cl_demo_app_205` }, { group: `controls - sap.m`, header: `sap.m.FlexBox`, sub: `Flex items can be rendered differently. By default, they are wrapped in a div element. Optionally, the bare controls can be rendered directly. This can affect the resulting layout.`, app: `z2ui5_cl_demo_app_252` }, { group: `controls - sap.m`, header: `sap.m.FlexBox`, sub: `In this Flex Box the items are aligned at opposing ends of the container with justifyContent set to 'SpaceBetween'.`, app: `z2ui5_cl_demo_app_218` }, { group: `controls - sap.m`, header: `sap.m.FlexBox`, sub: `You can influence the direction and order of elements in horizontal and vertical Flex Box controls with the direction property.`, app: `z2ui5_cl_demo_app_245` }, { group: `controls - sap.m`, header: `sap.m.FormattedText`, sub: `The control can be used for embedding formatted HTML text into your application.`, app: `z2ui5_cl_demo_app_015` }, { group: `controls - sap.m`, header: `sap.m.GenericTag`, sub: `Previews of the GenericTag control based on combinations of different sets of properties.`, app: `z2ui5_cl_demo_app_257` }, { group: `controls - sap.m`, header: `sap.m.GenericTile`, sub: `Shows Feed Tile and News Tile samples that can contain feed content, news content, and a footer.`, app: `z2ui5_cl_demo_app_278` }, { group: `controls - sap.m`, header: `sap.m.GenericTile`, sub: `Shows Monitor Tile samples that can contain header, subheader, icon, key value, unit, and a footer.`, app: `z2ui5_cl_demo_app_276` }, { group: `controls - sap.m`, header: `sap.m.GenericTile`, sub: `Shows the GenericTile while it is loading, if loading fails, and in disabled status.`, app: `z2ui5_cl_demo_app_281` }, { group: `controls - sap.m`, header: `sap.m.HeaderContainer`, sub: `The Header Container with a vertical layout and with divider lines.`, app: `z2ui5_cl_demo_app_280` }, { group: `controls - sap.m`, header: `sap.m.IconTabBar`, sub: `In this example, the Icon Tab Bar is used to apply filters on a table and display the count of the items for each view.`, app: `z2ui5_cl_demo_app_368` }, { group: `controls - sap.m`, header: `sap.m.IconTabBar`, sub: `In this example, the Icon Tab Bar tabs display icons only.`, app: `z2ui5_cl_demo_app_221` }, { group: `controls - sap.m`, header: `sap.m.IconTabBar`, sub: `In this example, the Icon Tab Bar tabs display text and corresponding count.`, app: `z2ui5_cl_demo_app_222` }, { group: `controls - sap.m`, header: `sap.m.IconTabBar`, sub: `In this example, the Icon Tab Bar tabs display text only.`, app: `z2ui5_cl_demo_app_224` }, { group: `controls - sap.m`, header: `sap.m.IconTabBar`, sub: `In this example, the Icon Tab Bar tabs display the text and the count in one line.`, app: `z2ui5_cl_demo_app_223` }, { group: `controls - sap.m`, header: `sap.m.IconTabBar`, sub: `This is an example how to use separators in the Icon Tab Bar. You can choose an icon as a separator or use the default vertical line.`, app: `z2ui5_cl_demo_app_225` }, { group: `controls - sap.m`, header: `sap.m.IconTabBar`, sub: `This sample illustrates nested tabs with or without own content in their root-level tab.`, app: `z2ui5_cl_demo_app_226` }, { group: `controls - sap.m`, header: `sap.m.IconTabHeader`, sub: `Icon Tab Header used standalone, outside of Icon Tab Bar.`, app: `z2ui5_cl_demo_app_214` }, { group: `controls - sap.m`, header: `sap.m.Image`, sub: `Images are faster than words and attract people's attention. Images can also have an active state or be used in SVG format.`, app: `z2ui5_cl_demo_app_379` }, { group: `controls - sap.m`, header: `sap.m.ImageContent`, sub: `Shows ImageContent that can include an icon, a profile image, or a logo with a tooltip.`, app: `z2ui5_cl_demo_app_271` }, { group: `controls - sap.m`, header: `sap.m.Input`, sub: `Input type corresponds to the type attribute of the HTML input tag. On touch devices, it controls the keyboard layout. On desktop, the effect of this setting is browser dependent.`, app: `z2ui5_cl_demo_app_210` }, { group: `controls - sap.m`, header: `sap.m.Input`, sub: `Suggestions wrap automatically when longer then the dropdown width`, app: `z2ui5_cl_demo_app_246` }, { group: `controls - sap.m`, header: `sap.m.Input`, sub: `This sample illustrates the usage of the description with input fields, e.g. description for units of measurements and currencies.`, app: `z2ui5_cl_demo_app_251` }, { group: `controls - sap.m`, header: `sap.m.Input`, sub: `To make sure the password is not shown as clear text you set the 'type' of an input control to 'Password'.`, app: `z2ui5_cl_demo_app_213` }, { group: `controls - sap.m`, header: `sap.m.InputListItem`, sub: `Use the Input List Item on phones to build form like user interfaces.`, app: `z2ui5_cl_demo_app_219` }, { group: `controls - sap.m`, header: `sap.m.Label`, sub: `Labels are helpful when you need to describe some other UI control.`, app: `z2ui5_cl_demo_app_051` }, { group: `controls - sap.m`, header: `sap.m.LightBox`, sub: `Displays several image thumbnails. Clicking on each of them will open a LightBox.`, app: `z2ui5_cl_demo_app_273` }, { group: `controls - sap.m`, header: `sap.m.Link`, sub: `Here are some links. Typically links are used in user interfaces to trigger navigation to related content inside or outside of the current application.`, app: `z2ui5_cl_demo_app_293` }, { group: `controls - sap.m`, header: `sap.m.MaskInput`, sub: `The sap.m.MaskInput control allows users to easily enter data in a certain format and in a fixed- width input (for example: date, time, credit card number, and others).`, app: `z2ui5_cl_demo_app_110` }, { group: `controls - sap.m`, header: `sap.m.MenuButton`, sub: `This control is used to open a menu in both desktop and mobile.`, app: `z2ui5_cl_demo_app_372` }, { group: `controls - sap.m`, header: `sap.m.MessageStrip`, sub: `A sample MessageStrip that shows status messages with additional formatting.`, app: `z2ui5_cl_demo_app_291` }, { group: `controls - sap.m`, header: `sap.m.MessageStrip`, sub: `MessageStrip for showing status messages.`, app: `z2ui5_cl_demo_app_238` }, { group: `controls - sap.m`, header: `sap.m.MessageView`, sub: `A sample with Message View and inside a Dialog and grouping of items`, app: `z2ui5_cl_demo_app_038` }, { group: `controls - sap.m`, header: `sap.m.MultiComboBox`, sub: ``, app: `z2ui5_cl_demo_app_140` }, { group: `controls - sap.m`, header: `sap.m.MultiComboBox`, sub: `Suggestions wrap automatically when longer then the dropdown width`, app: `z2ui5_cl_demo_app_233` }, { group: `controls - sap.m`, header: `sap.m.MultiInput`, sub: `Suggestions wrap automatically when longer then the dropdown width`, app: `z2ui5_cl_demo_app_232` }, { group: `controls - sap.m`, header: `sap.m.MultiInput`, sub: `This sample illustrates the different value states of the sap.m.MultiInput control.`, app: `z2ui5_cl_demo_app_267` }, { group: `controls - sap.m`, header: `sap.m.NewsContent`, sub: `This control is used to display the news content text and subheader in a tile.`, app: `z2ui5_cl_demo_app_261` }, { group: `controls - sap.m`, header: `sap.m.NotificationListItem`, sub: `A list item suitable for showing notifications to the user.`, app: `z2ui5_cl_demo_app_375` }, { group: `controls - sap.m`, header: `sap.m.NumericContent`, sub: `Shows NumericContent including an icon.`, app: `z2ui5_cl_demo_app_263` }, { group: `controls - sap.m`, header: `sap.m.NumericContent`, sub: `Shows NumericContent including numbers, units of measurement, and status arrows indicating a trend. The numbers can be colored according to their meaning.`, app: `z2ui5_cl_demo_app_262` }, { group: `controls - sap.m`, header: `sap.m.NumericContent`, sub: `This is an example of the NumericContent that contains no margins, so the control is aligned to the left and to the top without any margins.`, app: `z2ui5_cl_demo_app_228` }, { group: `controls - sap.m`, header: `sap.m.ObjectAttribute`, sub: `This is an example of Object Attribute used inside Table.`, app: `z2ui5_cl_demo_app_302` }, { group: `controls - sap.m`, header: `sap.m.ObjectHeader`, sub: `An Object Header can set shape of the image by using 'imageShape' property. The shapes could be Square (by default) and Circle. Note: This example shows the image inside ObjectHeader with the responsive property set to true. On phone i` + `n portrait mode, the image is hidden.`, app: `z2ui5_cl_demo_app_272` }, { group: `controls - sap.m`, header: `sap.m.ObjectListItem`, sub: `This sample shows the different states of an Object List Item, which can be set using the markers aggregation.`, app: `z2ui5_cl_demo_app_290` }, { group: `controls - sap.m`, header: `sap.m.ObjectMarker`, sub: `The ObjectMarker is a small building block representing an object by an icon or text and icon. Often it is used in a table.`, app: `z2ui5_cl_demo_app_289` }, { group: `controls - sap.m`, header: `sap.m.ObjectNumber`, sub: `inside a Table`, app: `z2ui5_cl_demo_app_369` }, { group: `controls - sap.m`, header: `sap.m.ObjectStatus`, sub: `The object status is a small building block representing a status with a semantic color.`, app: `z2ui5_cl_demo_app_300` }, { group: `controls - sap.m`, header: `sap.m.OverflowToolbar`, sub: `OverflowToolbar and Toolbar are often used for left/right alignment. This is easily achieved with ToolbarSpacer.`, app: `z2ui5_cl_demo_app_250` }, { group: `controls - sap.m`, header: `sap.m.OverflowToolbar`, sub: `The sap.m.Title control can be used to place a title inside an OverflowToolbar/Toolbar.`, app: `z2ui5_cl_demo_app_217` }, { group: `controls - sap.m`, header: `sap.m.Page`, sub: `Each screen of a mobile application is typically represented by a 'Page' consisting of a header, a scrollable content area and optionally a footer. The standard header offers a navigation button and a title. Alternatively you can provi` + `de a customer header. Gernerally you should use Toolbars in the Page. If you need a centered title you may use a Bar.`, app: `z2ui5_cl_demo_app_227` }, { group: `controls - sap.m`, header: `sap.m.Page`, sub: `Header, Sub-Header & Footer`, app: `z2ui5_cl_demo_app_366` }, { group: `controls - sap.m`, header: `sap.m.Panel`, sub: `Panels are helpful to group custom content. They can be decorated with header and info toolbars.`, app: `z2ui5_cl_demo_app_378` }, { group: `controls - sap.m`, header: `sap.m.ProgressIndicator`, sub: `Shows the progress of a process in a graphical way. To indicate the progress, the inside of the ProgressIndicator is filled with a color.`, app: `z2ui5_cl_demo_app_022` }, { group: `controls - sap.m`, header: `sap.m.RadioButton`, sub: `Typically the Radio Button is used by other controls. E.g. the List uses it for the single selection. But you can also use the Radio Buttons control directly, to allow selection of exactly one of multiple options.`, app: `z2ui5_cl_demo_app_207` }, { group: `controls - sap.m`, header: `sap.m.RadioButtonGroup`, sub: `A wrapper for a group of radio buttons.`, app: `z2ui5_cl_demo_app_208` }, { group: `controls - sap.m`, header: `sap.m.RangeSlider`, sub: ``, app: `z2ui5_cl_demo_app_005` }, { group: `controls - sap.m`, header: `sap.m.RatingIndicator`, sub: `A Rating Indicator can be used to both indicate and/or rate content.`, app: `z2ui5_cl_demo_app_220` }, { group: `controls - sap.m`, header: `sap.m.SearchField`, sub: `Use the Search Field to let the user enter a search string and trigger the search process.`, app: `z2ui5_cl_demo_app_296` }, { group: `controls - sap.m`, header: `sap.m.SegmentedButton`, sub: `Segmented Button used in Input List Item component`, app: `z2ui5_cl_demo_app_230` }, { group: `controls - sap.m`, header: `sap.m.Select`, sub: `Illustrates how the text in items wrap.`, app: `z2ui5_cl_demo_app_299` }, { group: `controls - sap.m`, header: `sap.m.Select`, sub: `Illustrates the usage of a Select in header, footer and content of a page. Note the different display options.`, app: `z2ui5_cl_demo_app_288` }, { group: `controls - sap.m`, header: `sap.m.Select`, sub: `Illustrates the usage of a Select with icons`, app: `z2ui5_cl_demo_app_297` }, { group: `controls - sap.m`, header: `sap.m.Select`, sub: `Visualizes the validation state of the control, for example, Error, Warning and Success.`, app: `z2ui5_cl_demo_app_298` }, { group: `controls - sap.m`, header: `sap.m.Slider`, sub: `With the Slider a user can choose a value from a numerical range.`, app: `z2ui5_cl_demo_app_237` }, { group: `controls - sap.m`, header: `sap.m.SlideTile`, sub: `Shows Generic Tile with the 2x1 frame type displayed as sliding tiles.`, app: `z2ui5_cl_demo_app_274` }, { group: `controls - sap.m`, header: `sap.m.SplitContainer`, sub: `Master & Detail Pages`, app: `z2ui5_cl_demo_app_374` }, { group: `controls - sap.m`, header: `sap.m.StandardListItem`, sub: `This sample demonstrates the wrapping behavior of the title text and the description text. In desktop mode, the character limit is set to 300 characters, whereas in the phone mode, the character limit is set to 100 characters.`, app: `z2ui5_cl_demo_app_287` }, { group: `controls - sap.m`, header: `sap.m.StepInput`, sub: `This example shows different StepInput value states.`, app: `z2ui5_cl_demo_app_264` }, { group: `controls - sap.m`, header: `sap.m.Switch`, sub: `"Some say it is only a switch, I say it is one of the most stylish controls in the universe of mobile UI controls." (unknown developer)`, app: `z2ui5_cl_demo_app_240` }, { group: `controls - sap.m`, header: `sap.m.Text`, sub: `The Text control has a property to limit the number of lines for wrapping texts.`, app: `z2ui5_cl_demo_app_206` }, { group: `controls - sap.m`, header: `sap.m.Text`, sub: `with class -Standard Margins - Negative Margins`, app: `z2ui5_cl_demo_app_243` }, { group: `controls - sap.m`, header: `sap.m.TextArea`, sub: `Since 1.38 the growing property of sap.m.TextArea gives the ability of a control to automatically grow and shrink dynamically with its content.`, app: `z2ui5_cl_demo_app_236` }, { group: `controls - sap.m`, header: `sap.m.TextArea`, sub: `This sample illustrates the different value states of the sap.m.TextArea control.`, app: `z2ui5_cl_demo_app_234` }, { group: `controls - sap.m`, header: `sap.m.TileContent`, sub: `Shows the universal container for different content types and context information in the footer area.`, app: `z2ui5_cl_demo_app_241` }, { group: `controls - sap.m`, header: `sap.m.TimePicker`, sub: `Formats & Steps`, app: `z2ui5_cl_demo_app_376` }, { group: `controls - sap.m`, header: `sap.m.ToggleButton`, sub: `Toggle Buttons can be toggled between pressed and normal state.`, app: `z2ui5_cl_demo_app_266` }, { group: `controls - sap.m`, header: `sap.m.Toolbar`, sub: `Toolbar handles overflow by shrinking items. OverflowToolbar provides an overflow menu. Bar is able to perfectly center a text if nothing overflows.`, app: `z2ui5_cl_demo_app_235` }, { group: `controls - sap.uxap`, header: `sap.uxap.ObjectPageLayout`, sub: `Object Page sample showing a layout with subsection titles on top. This is the default layout. The sample also shows the 'Edit header' button in the Header Content area.`, app: `z2ui5_cl_demo_app_017` }, { group: `controls - sap.uxap`, header: `sap.uxap.ObjectPageLayout`, sub: `ObjectPage sample that demonstrates the combination of header facets and showTitle properties of sections and subsections.`, app: `z2ui5_cl_demo_app_330` }, { group: `controls - sap.uxap`, header: `sap.uxap.ObjectPageLayout`, sub: `ObjectPage sample with Header Container`, app: `z2ui5_cl_demo_app_303` }, { group: `controls - sap.f`, header: `sap.f.Card`, sub: `This sample illustrates how to specify the predefined header and the content of the Card control.`, app: `z2ui5_cl_demo_app_181` }, { group: `controls - sap.f`, header: `sap.f.DynamicPage`, sub: `Dynamic Page freestyle example with a responsive sap.m.Table in the content area, showing that each control can be placed in the title and the header content areas.`, app: `z2ui5_cl_demo_app_030` }, { group: `controls - sap.f`, header: `sap.f.GridList`, sub: `This sample represents GridList with enabled Drag and Drop functionality.`, app: `z2ui5_cl_demo_app_307` }, { group: `controls - sap.ui.core`, header: `sap.ui.core.HTML`, sub: `With the HTML controls you can easily embed any kind of HTML content into your UI5 mobile application.`, app: `z2ui5_cl_demo_app_242` }, { group: `controls - sap.ui.core`, header: `sap.ui.core.InvisibleText`, sub: `Many controls provide the associations ariaLabelledBy and ariaDescribedBy for accessibility purposes. The InvisibleText control can be used by application to provide hidden texts on the UI which can be referenced via these associations` + `.`, app: `z2ui5_cl_demo_app_282` }, { group: `controls - sap.ui.layout`, header: `sap.ui.Grid`, sub: `Split View in different Areas`, app: `z2ui5_cl_demo_app_367` }, { group: `controls - sap.ui.layout`, header: `sap.ui.layout.ResponsiveSplitter`, sub: `ResponsiveSplitter is used to visually divide the content of its parent. It consists of PaneContainers that further agregate other PaneContainers and SplitPanes. SplitPanes can be moved to the pagination when a minimum width of their p` + `arent is reached.`, app: `z2ui5_cl_demo_app_103` }, { group: `controls - sap.ui.layout`, header: `sap.ui.layout.Splitter`, sub: `Nested Splitter example with 7 content areas`, app: `z2ui5_cl_demo_app_260` }, { group: `controls - sap.ui.layout`, header: `sap.ui.layout.Splitter`, sub: `Simple splitter example with three content areas`, app: `z2ui5_cl_demo_app_249` }, { group: `controls - sap.ui.layout`, header: `sap.ui.layout.Splitter`, sub: `Simple splitter example with two content areas`, app: `z2ui5_cl_demo_app_247` }, { group: `controls - sap.ui.layout`, header: `sap.ui.layout.Splitter`, sub: `Simple splitter example with two content areas that cannot be resized`, app: `z2ui5_cl_demo_app_248` }, { group: `controls - sap.tnt`, header: `sap.tnt.InfoLabel`, sub: `InfoLabel with all available color schemes`, app: `z2ui5_cl_demo_app_209` }, { group: `controls - sap.tnt`, header: `sap.tnt.NavigationList`, sub: `simple`, app: `z2ui5_cl_demo_app_258` }, { group: `controls - sap.ui.codeeditor`, header: `sap.ui.codeeditor.CodeEditor`, sub: ``, app: `z2ui5_cl_demo_app_265` }, { group: `controls - sap.ui.unified`, header: `sap.ui.unified.ColorPicker`, sub: ``, app: `z2ui5_cl_demo_app_270` }];
+    return result;
+  }
+
+  block_widths({ t_catalog } = {}) {
+    let result = [];
+    let sy_tabix = 0;
+    let sy_subrc = 0;
+    let fs_block = null;
+    let _fs$fs_block = null;
+    let base;
+    let width;
+    sy_tabix = 0;
+    for (const tile of t_catalog) {
+      sy_tabix++;
+      base = this.header_base({ header: tile.header });
+      {
+        const _t = result;
+        const _i = _t.findIndex((_r) => _r.group === tile.group && _r.base === base);
+        sy_subrc = _i >= 0 && _i < _t.length ? 0 : 4;
+        fs_block = sy_subrc === 0 ? _t[_i] : null;
+        _fs$fs_block = sy_subrc === 0 ? { o: _t, k: _i } : null;
+      }
+      if (sy_subrc !== 0) {
+        fs_block = { group: tile.group, base: base };
+        result.push(fs_block);
+      }
+      width = this.header_width({ header: tile.header });
+      if (width > fs_block.width) {
+        fs_block.width = z2ui5_cl_util.abap_copy(width);
+      }
+    }
+    return result;
+  }
+
+  header_width({ header } = {}) {
+    let result = 0;
+    let char;
+    let off = 0;
+    while (off < header.length) {
+      char = header.substr(off, 1);
+      result = result + ([...String(char)].some(($c) => String(`MW`).includes($c)) ? 95 : [...String(char)].some(($c) => String(`mw`).includes($c)) ? 80 : [...String(char)].some(($c) => String(`ijltfrI. -`).includes($c)) ? 35 : [...String(char)].some(($c) => String(`ABCDEFGHJKLNOPQRSTUVXYZ`).includes($c)) ? 75 : 55);
+      off = off + 1;
+    }
     return result;
   }
 
diff --git a/run/input/core/srv/app/samples/z2ui5_cl_sample_context.js b/run/input/core/srv/app/samples/z2ui5_cl_sample_context.js
index 3f70374..a09676a 100644
--- a/run/input/core/srv/app/samples/z2ui5_cl_sample_context.js
+++ b/run/input/core/srv/app/samples/z2ui5_cl_sample_context.js
@@ -232,7 +232,7 @@ class z2ui5_cl_sample_context {
     let lv_value;
     const lt_mapping = z2ui5_cl_sample_context.filter_get_token_range_mapping();
     const lt_tab = {};
-    z2ui5_cl_sample_context.itab_corresponding({ val: { val, tab: lt_tab } });
+    z2ui5_cl_sample_context.itab_corresponding({ val, tab: lt_tab });
     sy_tabix = 0;
     for (const lr_row of lt_tab) {
       sy_tabix++;
@@ -253,6 +253,9 @@ class z2ui5_cl_sample_context {
     let lv_index;
     let lv_name;
     let lv_value;
+    if (!val) {
+      return;
+    }
     const lv_search = ((ignore_case === true || ignore_case === `X`) ? val.toUpperCase() : val);
     sy_tabix = 0;
     for (const fs_row of tab) {
diff --git a/run/input/core/srv/z2ui5/00/03/z2ui5_cl_a2ui5_context.js b/run/input/core/srv/z2ui5/00/03/z2ui5_cl_a2ui5_context.js
index b989426..1735e1f 100644
--- a/run/input/core/srv/z2ui5/00/03/z2ui5_cl_a2ui5_context.js
+++ b/run/input/core/srv/z2ui5/00/03/z2ui5_cl_a2ui5_context.js
@@ -206,7 +206,7 @@ class z2ui5_cl_a2ui5_context {
     let lv_value;
     const lt_mapping = z2ui5_cl_a2ui5_context.filter_get_token_range_mapping();
     const lt_tab = {};
-    z2ui5_cl_a2ui5_context.itab_corresponding({ val: { val, tab: lt_tab } });
+    z2ui5_cl_a2ui5_context.itab_corresponding({ val, tab: lt_tab });
     sy_tabix = 0;
     for (const lr_row of lt_tab) {
       sy_tabix++;
diff --git a/run/input/core/srv/z2ui5/01/02/z2ui5_cl_core_app.js b/run/input/core/srv/z2ui5/01/02/z2ui5_cl_core_app.js
index 2e33ab3..d33134e 100644
--- a/run/input/core/srv/z2ui5/01/02/z2ui5_cl_core_app.js
+++ b/run/input/core/srv/z2ui5/01/02/z2ui5_cl_core_app.js
@@ -127,7 +127,7 @@ class z2ui5_cl_core_app {
   }
 
   _create_model() {
-    return new z2ui5_cl_core_srv_model(this.mt_attri, this.mo_app);
+    return new z2ui5_cl_core_srv_model({ attri: this.mt_attri, app: this.mo_app });
   }
 
   _serializable_state() {
diff --git a/run/input/core/srv/z2ui5/01/02/z2ui5_cl_core_srv_model.js b/run/input/core/srv/z2ui5/01/02/z2ui5_cl_core_srv_model.js
index a3bc379..98c1b1c 100644
--- a/run/input/core/srv/z2ui5/01/02/z2ui5_cl_core_srv_model.js
+++ b/run/input/core/srv/z2ui5/01/02/z2ui5_cl_core_srv_model.js
@@ -178,10 +178,16 @@ class z2ui5_cl_core_srv_model {
   //  INSTANCE API (1:1 with abap)
   // ============================================================
 
-  constructor(attri, app) {
-    // mt_attri is by-ref in abap (REF TO ty_t_attri). We mirror that with a
-    // {value: [...]} holder so callers can pass a shared list around.
-    this.mt_attri = attri && Array.isArray(attri.value) ? attri : { value: attri || [] };
+  constructor({ attri, app } = {}) {
+    // Named-args ctor — the transpiler invokes `NEW cls( attri = .. app = .. )`
+    // as `new cls({ attri, app })`; hand-port callers pass the same shape.
+    // mt_attri is by-ref in abap (REF TO ty_t_attri); we mirror that with a
+    // {value: [...]} holder so mutations propagate to the caller's list. The
+    // transpiler passes an internal table as a plain array (REF #( itab )), so
+    // wrap it while sharing the array identity; an existing holder is reused.
+    this.mt_attri = attri && Array.isArray(attri.value) ? attri
+                  : Array.isArray(attri) ? { value: attri }
+                  : { value: [] };
     this.mo_app   = app;
   }
 
diff --git a/run/input/core/srv/z2ui5/02/z2ui5_cl_xml_view.js b/run/input/core/srv/z2ui5/02/z2ui5_cl_xml_view.js
index c49af7e..d605096 100644
--- a/run/input/core/srv/z2ui5/02/z2ui5_cl_xml_view.js
+++ b/run/input/core/srv/z2ui5/02/z2ui5_cl_xml_view.js
@@ -196,6 +196,16 @@ class z2ui5_cl_xml_view {
     return this.oParent;
   }
 
+  /**
+   * Returns the child at `index` (1-based, mirroring abap `mt_child[ index ]`).
+   * Used to descend into a just-added container leaf to attach nested items,
+   * e.g. `navlist.navigation_list_item({...}).get_child().navigation_list_item({...})`
+   * builds a NavigationListItem with sub-items.
+   */
+  get_child(index = 1) {
+    return this.aChild[index - 1];
+  }
+
   /**
    * Returns a z2ui5_cl_xml_view_cc wrapper bound to this view — mirrors abap
    * z2ui5_cl_xml_view->_z2ui5( ). Use as `view._z2ui5().info({...})`.
diff --git a/run/input/core/srv/z2ui5/02/z2ui5_if_action.js b/run/input/core/srv/z2ui5/02/z2ui5_if_action.js
deleted file mode 100644
index 67c3874..0000000
--- a/run/input/core/srv/z2ui5/02/z2ui5_if_action.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// transpiled ABAP interface — constants only, types/methods have no JS form
-const z2ui5_if_action = {
-};
-
-module.exports = z2ui5_if_action;
diff --git a/run/input/core/srv/z2ui5/99/01/z2ui5_cl_util_ext.js b/run/input/core/srv/z2ui5/99/01/z2ui5_cl_util_ext.js
index 7f497a6..dcf8cdf 100644
--- a/run/input/core/srv/z2ui5/99/01/z2ui5_cl_util_ext.js
+++ b/run/input/core/srv/z2ui5/99/01/z2ui5_cl_util_ext.js
@@ -173,6 +173,7 @@ class z2ui5_cl_util_ext {
 
   static rtti_get_table_desrc({ tabname, langu } = {}) {
     let result = ``;
+    let sy_langu = "E";
     let lan;
     let lv_tabname;
     let ddtext = ``;
@@ -715,6 +716,7 @@ class z2ui5_cl_util_ext {
   static _read_e070({ mt_data } = {}) {
     let sy_tabix = 0;
     let sy_subrc = 0;
+    let sy_uname = "";
     let fs_table = null;
     let _fs$fs_table = null;
     let fs_line = null;
@@ -792,7 +794,7 @@ class z2ui5_cl_util_ext {
     } else {
       let lo_tab = null;
       let lo_line = null;
-      z2ui5_cl_util_ext._read_e070({ mt_data: { mt_data } });
+      z2ui5_cl_util_ext._read_e070({ mt_data });
       table_name = `E07T`;
       try {
         t_comp = z2ui5_cl_util.rtti_get_t_attri_by_table_name(table_name);
@@ -855,6 +857,7 @@ class z2ui5_cl_util_ext {
   static set_mandt({ ir_data } = {}) {
     let sy_tabix = 0;
     let sy_subrc = 0;
+    let sy_mandt = "000";
     let fs_tab = null;
     let _fs$fs_tab = null;
     let fs_row = null;
@@ -899,6 +902,7 @@ class z2ui5_cl_util_ext {
     let result = [];
     let sy_tabix = 0;
     let sy_subrc = 0;
+    let sy_datum = "";
     let fs_filter = null;
     let _fs$fs_filter = null;
     let fs_range = null;
@@ -1153,6 +1157,7 @@ class z2ui5_cl_util_ext {
   static bal_delete_before({ object, subobject, days = 30 } = {}) {
     let sy_tabix = 0;
     let sy_subrc = 0;
+    let sy_datum = "";
     let fs_filter = null;
     let _fs$fs_filter = null;
     let fs_range = null;
@@ -1690,6 +1695,7 @@ class z2ui5_cl_util_ext {
     let result = [];
     let sy_tabix = 0;
     let sy_subrc = 0;
+    let sy_uname = "";
     let fs_prop = null;
     let _fs$fs_prop = null;
     let fs_pcomp = null;
@@ -1826,6 +1832,7 @@ class z2ui5_cl_util_ext {
 
   static tr_get_description({ trkorr } = {}) {
     let result = ``;
+    let sy_langu = "E";
     let lv_xco_d;
     let lv_tab;
     let lv_where;
@@ -2008,6 +2015,7 @@ class z2ui5_cl_util_ext {
   static tr_import({ trkorr, target_system, client, ignore_version = true } = {}) {
     let result = 0;
     let sy_subrc = 0;
+    let sy_mandt = "000";
     let fs_exc = null;
     let _fs$fs_exc = null;
     if (z2ui5_cl_util.context_check_abap_cloud()) {
@@ -2244,9 +2252,9 @@ class z2ui5_cl_util_ext {
     let _fs$fs_filter = null;
     // TODO(abap2js): CREATE DATA result TYPE ('BAL_S_LFIL').
     // TODO(abap2js): ASSIGN result->* TO <filter>.
-    z2ui5_cl_util_ext.bal_std_filter_add({ comp: { comp: `OBJECT`, value: object, filter: fs_filter } });
-    z2ui5_cl_util_ext.bal_std_filter_add({ comp: { comp: `SUBOBJECT`, value: subobject, filter: fs_filter } });
-    z2ui5_cl_util_ext.bal_std_filter_add({ comp: { comp: `EXTNUMBER`, value: id, filter: fs_filter } });
+    z2ui5_cl_util_ext.bal_std_filter_add({ comp: `OBJECT`, value: object, filter: fs_filter });
+    z2ui5_cl_util_ext.bal_std_filter_add({ comp: `SUBOBJECT`, value: subobject, filter: fs_filter });
+    z2ui5_cl_util_ext.bal_std_filter_add({ comp: `EXTNUMBER`, value: id, filter: fs_filter });
     return result;
   }
 
@@ -2708,6 +2716,7 @@ class z2ui5_cl_util_ext {
     let result = false;
     let sy_tabix = 0;
     let sy_subrc = 0;
+    let sy_uname = "";
     let fs_body = null;
     let _fs$fs_body = null;
     let fs_line = null;
@@ -2787,6 +2796,9 @@ class z2ui5_cl_util_ext {
   static job_submit_report({ report, variant, start_immediate = true, job_name } = {}) {
     let result = ``;
     let sy_subrc = 0;
+    let sy_uname = "";
+    let sy_datum = "";
+    let sy_uzeit = "";
     if (z2ui5_cl_util.context_check_abap_cloud()) {
       throw new z2ui5_cx_util_error({ val: `job_submit_report: On ABAP Cloud use CL_APJ_RT_API with a registered job catalog entry instead` });
     }
diff --git a/run/input/core/srv/z2ui5/99/01/z2ui5_cl_util_xml.js b/run/input/core/srv/z2ui5/99/01/z2ui5_cl_util_xml.js
index b1d7e49..79a4813 100644
--- a/run/input/core/srv/z2ui5/99/01/z2ui5_cl_util_xml.js
+++ b/run/input/core/srv/z2ui5/99/01/z2ui5_cl_util_xml.js
@@ -105,7 +105,7 @@ class z2ui5_cl_util_xml {
       if ((from_root === true || from_root === `X`)) {
         this.mo_root.xml_get_parts_indent({ ct_parts: lt_parts });
       } else {
-        this.xml_get_parts_indent({ iv_depth: { ct_parts: lt_parts } });
+        this.xml_get_parts_indent({ ct_parts: lt_parts });
       }
       result = lt_parts.join(`
 `);
@@ -113,7 +113,7 @@ class z2ui5_cl_util_xml {
       if ((from_root === true || from_root === `X`)) {
         this.mo_root.xml_get_parts({ ct_parts: lt_parts });
       } else {
-        this.xml_get_parts({ ct_parts: { ct_parts: lt_parts } });
+        this.xml_get_parts({ ct_parts: lt_parts });
       }
       result = /* TODO(abap2js) */ concat_lines_of(lt_parts);
     }
diff --git a/run/input/core/srv/z2ui5/99/z2ui5_cl_xml_view_cc.js b/run/input/core/srv/z2ui5/99/z2ui5_cl_xml_view_cc.js
new file mode 100644
index 0000000..eb188f5
--- /dev/null
+++ b/run/input/core/srv/z2ui5/99/z2ui5_cl_xml_view_cc.js
@@ -0,0 +1,215 @@
+const z2ui5_cl_a2ui5_context = require("abap2UI5/z2ui5_cl_a2ui5_context");
+const z2ui5_cl_util = require("abap2UI5/z2ui5_cl_util");
+
+class z2ui5_cl_xml_view_cc {
+  mo_view = null;
+
+  approve_popover({ placement, class: class_, text, btn_txt, btn_type, btn_icon, btn_event } = {}) {
+    let result = null;
+    result = z2ui5_cl_util.abap_copy(this.mo_view);
+    this.mo_view.popover({ showheader: false, placement, class: class_ })
+      .hbox({ justifycontent: `Center` })
+      .vbox({ justifycontent: `Center`, alignitems: `Center` })
+      .text(text)
+      .button({ type: btn_type, text: btn_txt, icon: btn_icon, press: btn_event });
+    return result;
+  }
+
+  bwip_js({ bcid, text, scale, height } = {}) {
+    let result = null;
+    result = z2ui5_cl_util.abap_copy(this.mo_view);
+    this.mo_view._generic({ name: `bwipjs`, ns: `z2ui5`, t_prop: [{ n: `bcid`, v: bcid }, { n: `text`, v: text }, { n: `scale`, v: scale }, { n: `height`, v: height }] });
+    return result;
+  }
+
+  camera_picture({ id, value, thumbnail, height, width, press, autoplay, onphoto, facingmode, deviceid } = {}) {
+    let result = null;
+    result = z2ui5_cl_util.abap_copy(this.mo_view);
+    this.mo_view._generic({ name: `CameraPicture`, ns: `z2ui5`, t_prop: [{ n: `id`, v: id }, { n: `value`, v: value }, { n: `thumbnail`, v: thumbnail }, { n: `press`, v: press }, { n: `height`, v: height }, { n: `width`, v: width }, { n: `OnPhoto`, v: onphoto }, { n: `autoplay`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(autoplay) }, { n: `facingMode`, v: facingmode }, { n: `deviceId`, v: deviceid }] });
+    return result;
+  }
+
+  camera_selector({ selectedkey, showclearicon, selectionchange, selecteditem, items, change, width, showsecondaryvalues, placeholder, selecteditemid, name, value, valuestate, valuestatetext, textalign, visible, showvaluestatemessage, showbutton, required, editable, enabled, filtersecondaryvalues, id, class: class_ } = {}) {
+    let result = null;
+    result = z2ui5_cl_util.abap_copy(this.mo_view);
+    this.mo_view._generic({ name: `CameraSelector`, ns: `z2ui5`, t_prop: [{ n: `showClearIcon`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(showclearicon) }, { n: `selectedKey`, v: selectedkey }, { n: `items`, v: items }, { n: `id`, v: id }, { n: `class`, v: class_ }, { n: `selectionChange`, v: selectionchange }, { n: `selectedItem`, v: selecteditem }, { n: `selectedItemId`, v: selecteditemid }, { n: `name`, v: name }, { n: `value`, v: value }, { n: `valueState`, v: valuestate }, { n: `valueStateText`, v: valuestatetext }, { n: `textAlign`, v: textalign }, { n: `showSecondaryValues`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(showsecondaryvalues) }, { n: `visible`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(visible) }, { n: `showValueStateMessage`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(showvaluestatemessage) }, { n: `showButton`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(showbutton) }, { n: `required`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(required) }, { n: `editable`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(editable) }, { n: `enabled`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(enabled) }, { n: `filterSecondaryValues`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(filtersecondaryvalues) }, { n: `width`, v: width }, { n: `placeholder`, v: placeholder }, { n: `change`, v: change }] });
+    return result;
+  }
+
+  chartjs({ canvas_id, view, config, height, width, style } = {}) {
+    let result = null;
+    result = z2ui5_cl_util.abap_copy(this.mo_view);
+    this.mo_view._generic({ name: `chartjs`, ns: `z2ui5`, t_prop: [{ n: `canvas_id`, v: canvas_id }, { n: `view`, v: view }, { n: `config`, v: config }, { n: `height`, v: height }, { n: `width`, v: width }, { n: `style`, v: style }] });
+    return result;
+  }
+
+  constructor({ view } = {}) {
+    this.mo_view = z2ui5_cl_util.abap_copy(view);
+  }
+
+  demo_output({ val } = {}) {
+    let result = null;
+    let lv_style = ``;
+    this.mo_view._generic({ ns: `html`, name: `style` });
+    const lv_class = `Z2UI5_CL_CC_DEMO_OUT`;
+    // TODO(abap2js): CALL METHOD (lv_class)=>(`GET_STYLE`) RECEIVING result = lv_style.
+    result = this.mo_view._cc_plain_xml(lv_style).html(val);
+    return result;
+  }
+
+  favicon({ favicon } = {}) {
+    let result = null;
+    result = z2ui5_cl_util.abap_copy(this.mo_view);
+    this.mo_view._generic({ name: `Favicon`, ns: `z2ui5`, t_prop: [{ n: `favicon`, v: favicon }] });
+    return result;
+  }
+
+  file_uploader({ value, path, placeholder, upload, icononly, buttononly, buttontext, uploadbuttontext, checkdirectupload, filetype, icon, enabled } = {}) {
+    let result = null;
+    result = z2ui5_cl_util.abap_copy(this.mo_view);
+    this.mo_view._generic({ name: `FileUploader`, ns: `z2ui5`, t_prop: [{ n: `placeholder`, v: placeholder }, { n: `upload`, v: upload }, { n: `path`, v: path }, { n: `value`, v: value }, { n: `iconOnly`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(icononly) }, { n: `buttonOnly`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(buttononly) }, { n: `buttonText`, v: buttontext }, { n: `uploadButtonText`, v: uploadbuttontext }, { n: `fileType`, v: filetype }, { n: `checkDirectUpload`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(checkdirectupload) }, { n: `icon`, v: icon }, { n: `enabled`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(enabled) }] });
+    return result;
+  }
+
+  focus({ focusid, selectionstart, selectionend, setupdate } = {}) {
+    let result = null;
+    result = z2ui5_cl_util.abap_copy(this.mo_view);
+    this.mo_view._generic({ name: `Focus`, ns: `z2ui5`, t_prop: [{ n: `setUpdate`, v: setupdate }, { n: `selectionStart`, v: selectionstart }, { n: `selectionEnd`, v: selectionend }, { n: `focusId`, v: focusid }] });
+    return result;
+  }
+
+  geolocation({ finished, error, longitude, latitude, altitude, accuracy, altitudeaccuracy, speed, heading, enablehighaccuracy, timeout } = {}) {
+    let result = null;
+    result = z2ui5_cl_util.abap_copy(this.mo_view);
+    this.mo_view._generic({ name: `Geolocation`, ns: `z2ui5`, t_prop: [{ n: `finished`, v: finished }, { n: `error`, v: error }, { n: `longitude`, v: longitude }, { n: `latitude`, v: latitude }, { n: `altitude`, v: altitude }, { n: `accuracy`, v: accuracy }, { n: `altitudeAccuracy`, v: altitudeaccuracy }, { n: `speed`, v: speed }, { n: `heading`, v: heading }, { n: `enableHighAccuracy`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(enablehighaccuracy) }, { n: `timeout`, v: timeout }] });
+    return result;
+  }
+
+  storage({ finished, prefix, value } = {}) {
+    let result = null;
+    result = z2ui5_cl_util.abap_copy(this.mo_view);
+    this.mo_view._generic({ name: `Storage`, ns: `z2ui5`, t_prop: [{ n: `finished`, v: finished }, { n: `type`, v: type }, { n: `prefix`, v: prefix }, { n: `key`, v: key }, { n: `value`, v: value }] });
+    return result;
+  }
+
+  history({ search } = {}) {
+    let result = null;
+    result = z2ui5_cl_util.abap_copy(this.mo_view);
+    this.mo_view._generic({ name: `History`, ns: `z2ui5`, t_prop: [{ n: `search`, v: search }] });
+    return result;
+  }
+
+  info_frontend({ finished, ui5_version, device_height, device_width, device_phone, device_desktop, device_tablet, device_combi, ui5_gav, ui5_theme, device_os, device_systemtype, device_browser } = {}) {
+    let result = null;
+    result = z2ui5_cl_util.abap_copy(this.mo_view);
+    this.mo_view._generic({ name: `Info`, ns: `z2ui5`, t_prop: [{ n: `ui5_version`, v: ui5_version }, { n: `ui5_gav`, v: ui5_gav }, { n: `finished`, v: finished }, { n: `ui5_theme`, v: ui5_theme }, { n: `device_os`, v: device_os }, { n: `device_systemtype`, v: device_systemtype }, { n: `device_browser`, v: device_browser }, { n: `device_phone`, v: device_phone }, { n: `device_desktop`, v: device_desktop }, { n: `device_tablet`, v: device_tablet }, { n: `device_combi`, v: device_combi }, { n: `device_height`, v: device_height }, { n: `device_width`, v: device_width }] });
+    return result;
+  }
+
+  message_manager({ items } = {}) {
+    let result = null;
+    result = z2ui5_cl_util.abap_copy(this.mo_view);
+    this.mo_view._generic({ name: `MessageManager`, ns: `z2ui5`, t_prop: [{ n: `items`, v: items }] });
+    return result;
+  }
+
+  messaging({ items } = {}) {
+    let result = null;
+    result = z2ui5_cl_util.abap_copy(this.mo_view);
+    this.mo_view._generic({ name: `Messaging`, ns: `z2ui5`, t_prop: [{ n: `items`, v: items }] });
+    return result;
+  }
+
+  multiinput_ext({ multiinputid, multiinputname, change, addedtokens, removedtokens } = {}) {
+    let result = null;
+    result = z2ui5_cl_util.abap_copy(this.mo_view);
+    this.mo_view._generic({ name: `MultiInputExt`, ns: `z2ui5`, t_prop: [{ n: `MultiInputId`, v: multiinputid }, { n: `MultiInputName`, v: multiinputname }, { n: `change`, v: change }, { n: `addedTokens`, v: addedtokens }, { n: `removedTokens`, v: removedtokens }] });
+    return result;
+  }
+
+  uploadset_ext({ uploadsetid, filedata, filename, mediatype, filesize, removedfilename, change, remove } = {}) {
+    let result = null;
+    result = z2ui5_cl_util.abap_copy(this.mo_view);
+    this.mo_view._generic({ name: `UploadSetExt`, ns: `z2ui5`, t_prop: [{ n: `uploadSetId`, v: uploadsetid }, { n: `fileData`, v: filedata }, { n: `fileName`, v: filename }, { n: `mediaType`, v: mediatype }, { n: `fileSize`, v: filesize }, { n: `removedFileName`, v: removedfilename }, { n: `change`, v: change }, { n: `remove`, v: remove }] });
+    return result;
+  }
+
+  tree({ tree_id } = {}) {
+    let result = null;
+    result = z2ui5_cl_util.abap_copy(this.mo_view);
+    this.mo_view._generic({ name: `Tree`, ns: `z2ui5`, t_prop: [{ n: `tree_id`, v: tree_id }] });
+    return result;
+  }
+
+  scrolling({ setupdate, items } = {}) {
+    let result = null;
+    result = z2ui5_cl_util.abap_copy(this.mo_view);
+    this.mo_view._generic({ name: `Scrolling`, ns: `z2ui5`, t_prop: [{ n: `setUpdate`, v: setupdate }, { n: `items`, v: items }] });
+    return result;
+  }
+
+  spreadsheet_export({ tableid, clike, text, icon, tooltip, columnconfig } = {}) {
+    let result = null;
+    result = z2ui5_cl_util.abap_copy(this.mo_view);
+    this.mo_view._generic({ name: `ExportSpreadsheet`, ns: `z2ui5`, t_prop: [{ n: `tableId`, v: tableid }, { n: `text`, v: text }, { n: `icon`, v: icon }, { n: `type`, v: type }, { n: `tooltip`, v: tooltip }, { n: `columnconfig`, v: columnconfig }] });
+    return result;
+  }
+
+  timer({ finished, delayms, checkrepeat, checkactive } = {}) {
+    let result = null;
+    result = z2ui5_cl_util.abap_copy(this.mo_view);
+    this.mo_view._generic({ name: `Timer`, ns: `z2ui5`, t_prop: [{ n: `delayMS`, v: delayms }, { n: `finished`, v: finished }, { n: `checkActive`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(checkactive) }, { n: `checkRepeat`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(checkrepeat) }] });
+    return result;
+  }
+
+  binding_update({ changed, path } = {}) {
+    let result = null;
+    result = z2ui5_cl_util.abap_copy(this.mo_view);
+    this.mo_view._generic({ name: `BindingUpdate`, ns: `z2ui5`, t_prop: [{ n: `path`, v: path }, { n: `changed`, v: changed }] });
+    return result;
+  }
+
+  websocket({ value, received, path, checkrepeat, checkactive } = {}) {
+    let result = null;
+    result = z2ui5_cl_util.abap_copy(this.mo_view);
+    this.mo_view._generic({ name: `Websocket`, ns: `z2ui5`, t_prop: [{ n: `value`, v: value }, { n: `path`, v: path }, { n: `received`, v: received }, { n: `checkActive`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(checkactive) }, { n: `checkRepeat`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(checkrepeat) }] });
+    return result;
+  }
+
+  lp_title({ title, applicationfullwidth } = {}) {
+    let result = null;
+    result = z2ui5_cl_util.abap_copy(this.mo_view);
+    this.mo_view._generic({ name: `LPTitle`, ns: `z2ui5`, t_prop: [{ n: `title`, v: title }, { n: `ApplicationFullWidth`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(applicationfullwidth) }] });
+    return result;
+  }
+
+  title({ title } = {}) {
+    let result = null;
+    result = z2ui5_cl_util.abap_copy(this.mo_view);
+    this.mo_view._generic({ name: `Title`, ns: `z2ui5`, t_prop: [{ n: `title`, v: title }] });
+    return result;
+  }
+
+  dirty({ isdirty } = {}) {
+    let result = null;
+    result = z2ui5_cl_util.abap_copy(this.mo_view);
+    this.mo_view._generic({ name: `Dirty`, ns: `z2ui5`, t_prop: [{ n: `isDirty`, v: z2ui5_cl_a2ui5_context.boolean_abap_2_json(isdirty) }] });
+    return result;
+  }
+
+  uitableext({ tableid } = {}) {
+    let result = null;
+    result = z2ui5_cl_util.abap_copy(this.mo_view);
+    this.mo_view._generic({ name: `UITableExt`, ns: `z2ui5`, t_prop: [{ n: `tableId`, v: tableid }] });
+    return result;
+  }
+
+  smartmultiinput_ext({ multiinputid, change, rangedata, addedtokens, removedtokens } = {}) {
+    let result = null;
+    result = z2ui5_cl_util.abap_copy(this.mo_view);
+    this.mo_view._generic({ name: `SmartMultiInputExt`, ns: `z2ui5`, t_prop: [{ n: `multiInputId`, v: multiinputid }, { n: `rangeData`, v: rangedata }, { n: `change`, v: change }, { n: `addedTokens`, v: addedtokens }, { n: `removedTokens`, v: removedtokens }] });
+    return result;
+  }
+}
+
+module.exports = z2ui5_cl_xml_view_cc;