diff --git a/README.md b/README.md
index c87048c9..46f460b8 100644
--- a/README.md
+++ b/README.md
@@ -32,7 +32,7 @@
 2. Displaying Selection Screens & Tables [(SCN - 23.02.2023)](https://blogs.sap.com/2023/02/22/abap2ui5-output-of-lists-and-tables-toolbar-and-editable-2-3/)<br>
 3. Popups, F4-Help, Messages & Controller Logic [(SCN - 30.03.2023)](https://blogs.sap.com/2023/03/30/abap2ui5-3-4-flow-logic-pop-ups-f4-help/)<br>
 4. Advanced Functionality & Demonstrations [(SCN - 02.04.2023)](https://blogs.sap.com/2023/04/02/abap2ui5-4-5-additional-features-demos/)<br>
-5. Extensions with XML Views, HTML, JS & CC [(SCN - 12.04.2023)](https://blogs.sap.com/2023/04/12/abap2ui5-5-6-extensions-with-xml-views-html-js-custom-controls/)<br>
+5. Creating UIs with XML Views, HTML, CSS & JavaScript [(SCN - 12.04.2023)](https://blogs.sap.com/2023/04/12/abap2ui5-5-6-extensions-with-xml-views-html-js-custom-controls/)<br>
 6. Installation, Configuration & Debugging [(SCN - 14.04.2023)](https://blogs.sap.com/2023/04/14/abap2ui5-6-7-installation-configuration-debugging/)<br>
 7. Technical Background: Under the Hood of abap2UI5 [(SCN - 26.04.2023)](https://blogs.sap.com/2023/04/26/abap2ui5-7-7-technical-background-under-the-hood-of-abap2ui5/)<br>
 8. Repository Organization: Working with abapGit, abaplint & open-abap [(SCN - 21.08.2023)](https://blogs.sap.com/2023/08/21/abap2ui5-a1-repository-setup-with-abapgit-abaplint-open-abap/)<br>
diff --git a/src/01/01/z2ui5_cl_fw_http_handler.clas.abap b/src/01/01/z2ui5_cl_fw_http_handler.clas.abap
index d70231f2..cee73a26 100644
--- a/src/01/01/z2ui5_cl_fw_http_handler.clas.abap
+++ b/src/01/01/z2ui5_cl_fw_http_handler.clas.abap
@@ -437,6 +437,7 @@ CLASS Z2UI5_CL_FW_HTTP_HANDLER IMPLEMENTATION.
     DATA(lt_config) = t_config.
     IF lt_config IS INITIAL.
       lt_config = VALUE #(
+*          (  n = `src`                       v = `https://sdk.openui5.org/nightly/2/resources/sap-ui-core.js` )
           (  n = `src`                       v = `https://sdk.openui5.org/resources/sap-ui-cachebuster/sap-ui-core.js` )
           (  n = `data-sap-ui-theme`         v = `sap_horizon` )
           (  n = `data-sap-ui-async`         v = `true` )
@@ -489,7 +490,7 @@ CLASS Z2UI5_CL_FW_HTTP_HANDLER IMPLEMENTATION.
       r_result = r_result && `` &&
          z2ui5_cl_fw_cc_debugging_tools=>get_js( ) &&
    `        sap.ui.require(["z2ui5/DebuggingTools","z2ui5/Controller"], (DebuggingTools) => { sap.z2ui5.DebuggingTools = new DebuggingTools(); ` && |\n|  &&
-   `            sap.z2ui5.DebuggingTools.activateLogging(` && z2ui5_cl_util_func=>boolean_abap_2_json( check_debugging ) && ` );` && |\n|  &&
+*   `            sap.z2ui5.DebuggingTools.activateLogging(` && z2ui5_cl_util_func=>boolean_abap_2_json( check_debugging ) && ` );` && |\n|  &&
         ` });`.
     ENDIF.
     r_result =  r_result && ` ` && |\n| &&
diff --git a/src/01/03/z2ui5_cl_fw_cc_debugging_tools.clas.abap b/src/01/03/z2ui5_cl_fw_cc_debugging_tools.clas.abap
index 713ad33c..0d5aa277 100644
--- a/src/01/03/z2ui5_cl_fw_cc_debugging_tools.clas.abap
+++ b/src/01/03/z2ui5_cl_fw_cc_debugging_tools.clas.abap
@@ -22,64 +22,32 @@ CLASS Z2UI5_CL_FW_CC_DEBUGGING_TOOLS IMPLEMENTATION.
 
     result = `` && |\n|  &&
              `sap.ui.define( "z2ui5/DebuggingTools" ,[` && |\n|  &&
-             `    "sap/ui/core/Control",` && |\n|  &&
-             `    "z2ui5/Controller",` && |\n|  &&
-             `    "sap/ui/core/Fragment",` && |\n|  &&
-             `    "sap/ui/model/json/JSONModel"` && |\n|  &&
-             `], (Control, Controller, Fragment, JSONModel) => {` && |\n|  &&
-             `    "use strict";` && |\n|  &&
-             |\n|  &&
-             `    return Control.extend("z2ui5.DebuggingTools", {` && |\n|  &&
-             `        metadata: {` && |\n|  &&
-             `            properties: {` && |\n|  &&
-             `                checkLoggingActive: {` && |\n|  &&
-             `                    type: "boolean",` && |\n|  &&
-             `                    defaultValue: ""` && |\n|  &&
-             `                }` && |\n|  &&
-             `            },` && |\n|  &&
-             `            events: {` && |\n|  &&
-             `                "finished": {` && |\n|  &&
-             `                    allowPreventDefault: true,` && |\n|  &&
-             `                    parameters: {},` && |\n|  &&
-             `                }` && |\n|  &&
-             `            }` && |\n|  &&
-             `        },` && |\n|  &&
-             |\n|  &&
-             `        async show() {` && |\n|  &&
-             |\n|  &&
-             `            var oFragmentController = {` && |\n|  &&
-             `                onItemSelect:function(oEvent){` && |\n|  &&
-             `                    let selItem = oEvent.getSource().getSelectedItem();` && |\n|  &&
-             `                    ` && |\n|  &&
-             `                    if (selItem == 'MODEL'){` && |\n|  &&
-             `                        oEvent.getSource().getModel().oData.value = JSON.stringify( sap.z2ui5.oResponse.OVIEWMODEL, null, 3);` && |\n|  &&
-             `                        oEvent.getSource().getModel().oData.type = 'json';` && |\n|  &&
-             `                        oEvent.getSource().getModel().refresh();` && |\n|  &&
-             `                        return;` && |\n|  &&
-             `                    } ` && |\n|  &&
-             `                    if (selItem == 'VIEW'){` && |\n|  &&
-             `                        var XML = this.prettifyXml( sap.z2ui5.oResponse.PARAMS.S_VIEW.XML );` && |\n|  &&
-             `                        oEvent.getSource().getModel().oData.value = XML;` && |\n|  &&
-             `                        oEvent.getSource().getModel().oData.type = 'xml';` && |\n|  &&
-             `                        oEvent.getSource().getModel().refresh();` && |\n|  &&
-             `                        return;` && |\n|  &&
-             `                    } ` && |\n|  &&
-             `                    if (selItem == 'PLAIN'){` && |\n|  &&
-             `                        oEvent.getSource().getModel().oData.value = JSON.stringify( sap.z2ui5.oResponse, null, 3 );` && |\n|  &&
-             `                        oEvent.getSource().getModel().oData.type = 'json';` && |\n|  &&
-             `                        oEvent.getSource().getModel().refresh();` && |\n|  &&
-             `                        return;` && |\n|  &&
-             `                    } ` && |\n|  &&
-             `                    if (selItem == 'REQUEST'){` && |\n|  &&
-             `                        oEvent.getSource().getModel().oData.value = JSON.stringify( sap.z2ui5.oBody , null, 3 );` && |\n|  &&
-             `                        oEvent.getSource().getModel().oData.type = 'json';` && |\n|  &&
-             `                        oEvent.getSource().getModel().refresh();` && |\n|  &&
-             `                        return;` && |\n|  &&
-             `                    } ` && |\n|  &&
-             `                },` && |\n|  &&
-             |\n|  &&
-             `                prettifyXml (sourceXml) ` && |\n|  &&
-             `                {` && |\n|  &&
+              `    "sap/ui/core/Control",` && |\n|  &&
+              `     "sap/ui/core/Fragment",` && |\n|  &&
+              `     "sap/ui/model/json/JSONModel"` && |\n|  &&
+              `], (Control, Fragment, JSONModel) => {` && |\n|  &&
+              `    "use strict";` && |\n|  &&
+              |\n|  &&
+              `    return Control.extend("project1.control.DebuggingTools", {` && |\n|  &&
+              `        metadata: {` && |\n|  &&
+              `            properties: {` && |\n|  &&
+              `                checkLoggingActive: {` && |\n|  &&
+              `                    type: "boolean",` && |\n|  &&
+              `                    defaultValue: ""` && |\n|  &&
+              `                }` && |\n|  &&
+              `            },` && |\n|  &&
+              `            events: {` && |\n|  &&
+              `                "finished": {` && |\n|  &&
+              `                    allowPreventDefault: true,` && |\n|  &&
+              `                    parameters: {},` && |\n|  &&
+              `                }` && |\n|  &&
+              `            }` && |\n|  &&
+              `        },` && |\n|  &&
+              |\n|  &&
+              `        async show() {` && |\n|  &&
+              |\n|  &&
+              `            var oFragmentController = {` && |\n|  &&
+                `   prettifyXml: function (sourceXml) { ` && |\n|  &&
              `                    var xmlDoc = new DOMParser().parseFromString(sourceXml, 'application/xml');` && |\n|  &&
 `                        // describes how we want to modify the XML - indent everything` && |\n|  &&
 `                     var sParse =   unescape( '%3Cxsl%3Astylesheet%20xmlns%3Axsl%3D%22http%3A//www.w3.org/1999/XSL/Transform%22%3E%0A%20%20%3Cxsl%3Astrip-space%20elements%3D%22*%22/%3E%0A%20%20%3Cxsl%3Atemplate%20match%3D%22para%5Bconten` &&
@@ -94,130 +62,165 @@ CLASS Z2UI5_CL_FW_CC_DEBUGGING_TOOLS IMPLEMENTATION.
              `                    var resultXml = new XMLSerializer().serializeToString(resultDoc);` && |\n|  &&
              `                    return resultXml;` && |\n|  &&
              `                },` && |\n|  &&
-             |\n|  &&
-             `                onClose: function(){` && |\n|  &&
-             `                    this.oDialog.close();` && |\n|  &&
-             |\n|  &&
-             `                }` && |\n|  &&
-             `            };` && |\n|  &&
-             |\n|  &&
-*             `            let XMLDef = ` && escape( val    =  ```<core:FragmentDefinition` && |\n|  &&
-             '            let XMLDef = atob("PGNvcmU6RnJhZ21lbnREZWZpbml0aW9uCiAgICAgICAgICAgIHhtbG5zPSJzYXAubSIKICAgICAgICAgICAgICAgIHhtbG5zOm12Yz0ic2FwLnVpLmNvcmUubXZjIgogICAgICAgICAgICAgICAgeG1sbnM6Y29yZT0ic2FwLnVpLmNvcmUiCiAgICAgICAgICAgICAgICB' &&
-'4bWxuczp0bnQ9InNhcC50bnQiCiAgICAgICAgICAgICAgICB4bWxuczplZGl0b3I9InNhcC51aS5jb2RlZWRpdG9yIj4KICAgICAgICAgICAgICAgICAgPERpYWxvZyB0aXRsZT0iYWJhcDJVSTUgLSBEZWJ1Z2dpbmcgVG9vbHMiIHN0cmV0Y2g9InRydWUiPgogICAgICAgICAgICAgICAgICA8SEJveD4KICAgICAgICAgICAgICA' &&
-'gIDx0bnQ6U2lkZU5hdmlnYXRpb24gaWQ9InNpZGVOYXZpZ2F0aW9uIiBzZWxlY3RlZEtleT0iUExBSU4iIGl0ZW1TZWxlY3Q9Im9uSXRlbVNlbGVjdCI+CiAgICAgICAgICAgICAgICAgICAgPHRudDpOYXZpZ2F0aW9uTGlzdD4KICAgICAgICAgICAgICAgICAgICAgICAgPHRudDpOYXZpZ2F0aW9uTGlzdEl0ZW0gdGV4dD0iUmV' &&
-'zcG9uc2UiIGljb249InNhcC1pY29uOi8vZW1wbG95ZWUiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHRudDpOYXZpZ2F0aW9uTGlzdEl0ZW0gdGV4dD0iUGxhaW4iIGlkPSJQTEFJTiIga2V5PSJQTEFJTiIvPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHRudDpOYXZpZ2F0aW9uTGlzdEl0ZW0gdGV4dD0iVml' &&
-'ldyBYTUwiIGlkPSJWSUVXIiBrZXk9IlZJRVciLz4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx0bnQ6TmF2aWdhdGlvbkxpc3RJdGVtIHRleHQ9IlZpZXcgTW9kZWwiIGlkPSJNT0RFTCIga2V5PSJNT0RFTCIgIC8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dG50Ok5hdmlnYXRpb25MaXN0SXRlbSB0ZXh0PSJ' &&
-'WaWV3IFBvcHVwIFhNTCIgaWQ9IlBPUFVQIiBrZXk9IlBPUFVQIiBlbmFibGVkPSJmYWxzZSIvPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHRudDpOYXZpZ2F0aW9uTGlzdEl0ZW0gdGV4dD0iVmlldyBOZXN0IFhNTCIgZW5hYmxlZD0iZmFsc2UiLz4KICAgICAgICAgICAgICAgICAgICAgICAgPC90bnQ6TmF2aWdhdGl' &&
-'vbkxpc3RJdGVtPgogICAgICAgICAgICAgICAgICAgICAgICA8dG50Ok5hdmlnYXRpb25MaXN0SXRlbSB0ZXh0PSJQcmV2aW91cyBSZXF1ZXN0IiBpY29uPSJzYXAtaWNvbjovL2J1aWxkaW5nIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx0bnQ6TmF2aWdhdGlvbkxpc3RJdGVtIHRleHQ9IkJvZHkiIGlkPSJSRVFVRVN' &&
-'UIiBrZXk9IlJFUVVFU1QiIC8+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvdG50Ok5hdmlnYXRpb25MaXN0SXRlbT4KICAgICAgICAgICAgICAgICAgICA8L3RudDpOYXZpZ2F0aW9uTGlzdD4KICAgICAgICAgICAgICAgIDwvdG50OlNpZGVOYXZpZ2F0aW9uPgogICAgICAgICAgICAgICAgICAgIDxlZGl0b3I6Q29kZUVkaXR' &&
-'vcgogICAgICAgICAgICAgICAgICAgIHR5cGU9InsvdHlwZX0iCiAgICAgICAgICAgICAgICAgICAgdmFsdWU9J3svdmFsdWV9JwogICAgICAgICAgICAgICAgaGVpZ2h0PSI3MDBweCIgd2lkdGg9IjEyMDBweCIvPiA8L0hCb3g+CiAgICAgICAgICAgICAgIDxmb290ZXI+PFRvb2xiYXI+PEJ1dHRvbiB0ZXh0PSJTZXR1cCIgcHJ' &&
-'lc3M9Im9uUHJlc3MiLz48VG9vbGJhclNwYWNlci8+PEJ1dHRvbiB0ZXh0PSJDbG9zZSIgcHJlc3M9Im9uQ2xvc2UiLz48L1Rvb2xiYXI+PC9mb290ZXI+CiAgICAgICAgICAgICAgIDwvRGlhbG9nPgogICAgICAgICAgICA8L2NvcmU6RnJhZ21lbnREZWZpbml0aW9uPg==") ' && |\n|  &&
-*             `            let XMLDef = ``<core:FragmentDefinition` && |\n|  &&
-*             `            xmlns="sap.m"` && |\n|  &&
-*             `                xmlns:mvc="sap.ui.core.mvc"` && |\n|  &&
-*             `                xmlns:core="sap.ui.core"` && |\n|  &&
-*             `                xmlns:tnt="sap.tnt"` && |\n|  &&
-*             `                xmlns:editor="sap.ui.codeeditor">` && |\n|  &&
-*             `                  <Dialog title="abap2UI5 - Debugging Tools" stretch="true">` && |\n|  &&
-*             `                  <HBox>` && |\n|  &&
-*             `                <tnt:SideNavigation id="sideNavigation" selectedKey="PLAIN" itemSelect="onItemSelect">` && |\n|  &&
-*             `                    <tnt:NavigationList>` && |\n|  &&
-*             `                        <tnt:NavigationListItem text="Response" icon="sap-icon://employee">` && |\n|  &&
-*             `                            <tnt:NavigationListItem text="Plain" id="PLAIN" key="PLAIN"/>` && |\n|  &&
-*             `                            <tnt:NavigationListItem text="View XML" id="VIEW" key="VIEW"/>` && |\n|  &&
-*             `                            <tnt:NavigationListItem text="View Model" id="MODEL" key="MODEL"  />` && |\n|  &&
-*             `                            <tnt:NavigationListItem text="View Popup XML" id="POPUP" key="POPUP" enabled="false"/>` && |\n|  &&
-*             `                            <tnt:NavigationListItem text="View Nest XML" enabled="false"/>` && |\n|  &&
-*             `                        </tnt:NavigationListItem>` && |\n|  &&
-*             `                        <tnt:NavigationListItem text="Previous Request" icon="sap-icon://building">` && |\n|  &&
-*             `                            <tnt:NavigationListItem text="Body" id="REQUEST" key="REQUEST" />` && |\n|  &&
-*             `                        </tnt:NavigationListItem>` && |\n|  &&
-*             `                    </tnt:NavigationList>` && |\n|  &&
-*             `                </tnt:SideNavigation>` && |\n|  &&
-*             `                    <editor:CodeEditor` && |\n|  &&
-*             `                    type="{/type}"` && |\n|  &&
-*             `                    value='{/value}'` && |\n|  &&
-*             `                height="700px" width="1200px"/> </HBox>` && |\n|  &&
-*             `               <footer><Toolbar><Button text="Setup" press="onPress"/><ToolbarSpacer/><Button text="Close" press="onClose"/></Toolbar></footer>` && |\n|  &&
-*             `               </Dialog>` && |\n|  &&
-*             `            </core:FragmentDefinition>`` ` &&
-                     `;` && |\n|  &&
-*                     format = cl_abap_format=>e_xml_text ) && `;` && |\n|  &&
-             |\n|  &&
-             `            if ( this.oFragment ){` && |\n|  &&
-             `                this.oFragment.close();` && |\n|  &&
-             `                this.oFragment.destroy();` && |\n|  &&
-             `            }` && |\n|  &&
-             `            this.oFragment = await Fragment.load({` && |\n|  &&
-             `                definition : XMLDef,` && |\n|  &&
-             `               // name: "project1.control.DevTool",` && |\n|  &&
-             `                controller: oFragmentController,` && |\n|  &&
-             `            });` && |\n|  &&
-             |\n|  &&
-             `            oFragmentController.oDialog = this.oFragment ;` && |\n|  &&
-             `        ` && |\n|  &&
-             `            let value = JSON.stringify( sap.z2ui5.oResponse, null, 3 );` && |\n|  &&
-             `            let oData = { type : 'json' , value : value };` && |\n|  &&
-             `            var oModel = new JSONModel(oData);` && |\n|  &&
-             `            this.oFragment.setModel(oModel);` && |\n|  &&
-             `            this.oFragment.open();` && |\n|  &&
-             |\n|  &&
-             `        },` && |\n|  &&
-             |\n|  &&
-             `        activateLogging(checkActive) {` && |\n|  &&
-                          `            document.addEventListener ("keydown", function (zEvent) {` && |\n|  &&
-             `                if (zEvent.ctrlKey ) { if ( zEvent.key === "a") {  // case sensitive` && |\n|  &&
-             `                    sap.z2ui5.DebuggingTools.show();` && |\n|  &&
-             `                } }` && |\n|  &&
-             `            } );` && |\n|  &&
-             `       },` && |\n|  &&
-*             `            if (!checkActive) {` && |\n|  &&
-*             `                return;` && |\n|  &&
-*             `            }` && |\n|  &&
-*             `         ` && |\n|  &&
-*             `            sap.z2ui5.onBeforeRoundtrip.push(() => {` && |\n|  &&
-*             `                console.log('Request Object:');` && |\n|  &&
-*             `                console.log(sap.z2ui5.oBody);` && |\n|  &&
-*             `            });` && |\n|  &&
-*             |\n|  &&
-*             `            sap.z2ui5.onAfterRoundtrip.push(() => {` && |\n|  &&
-*             |\n|  &&
-*             `                console.log('Response Object:', sap.z2ui5.oResponse);` && |\n|  &&
-*             |\n|  &&
-*             `                // Destructure for easier access` && |\n|  &&
-*             `                const { S_VIEW, S_POPUP, S_POPOVER, S_VIEW_NEST, S_VIEW_NEST2 } = sap.z2ui5.oResponse.PARAMS;` && |\n|  &&
-*             |\n|  &&
-*             `                // Helper function to log XML` && |\n|  &&
-*             `                const logXML = (label, xml) => {` && |\n|  &&
-*             `                    if (xml !== '') {` && |\n|  &&
-*             `                        console.log(``${label}:``, xml);` && |\n|  &&
-*             `                    }` && |\n|  &&
-*             `                };` && |\n|  &&
-*             |\n|  &&
-*             `                // Log different XML responses` && |\n|  &&
-*             `                logXML('UI5-XML-View', S_VIEW.XML);` && |\n|  &&
-*             `                logXML('UI5-XML-Popup', S_POPUP.XML);` && |\n|  &&
-*             `                logXML('UI5-XML-Popover', S_POPOVER.XML);` && |\n|  &&
-*             `                logXML('UI5-XML-Nest', S_VIEW_NEST.XML);` && |\n|  &&
-*             `                logXML('UI5-XML-Nest2', S_VIEW_NEST2.XML);` && |\n|  &&
-*             |\n|  &&
-*             `            });` && |\n|  &&
-*             |\n|  &&
-*             `        },` && |\n|  &&
-*             |\n|  &&
-*             `        async init() {` && |\n|  &&
-*             |\n|  &&
-*             |\n|  &&
-*             `        },` && |\n|  &&
-*             |\n|  &&
-*             `        exit() {` && |\n|  &&
-*             `        },` && |\n|  &&
-*             |\n|  &&
-*             `        onAfterRendering() {` && |\n|  &&
-*             `        },` && |\n|  &&
-             |\n|  &&
-             `        renderer(oRm, oControl) {` && |\n|  &&
-             `        }` && |\n|  &&
+              `                onItemSelect: function (oEvent) {` && |\n|  &&
+              `                    let selItem = oEvent.getSource().getSelectedItem();` && |\n|  &&
+              |\n|  &&
+              `                    if (selItem == 'MODEL') {` && |\n|  &&
+              `                       debugger; this.displayEditor( oEvent, JSON.stringify( sap?.z2ui5?.oView?.getModel()?.getData(), null, 3) , 'json' );` && |\n|  &&
+              `                        return;` && |\n|  &&
+              `                    }` && |\n|  &&
+              `                    if (selItem == 'VIEW') {` && |\n|  &&
+              `                       debugger; this.displayEditor( oEvent, this.prettifyXml( sap?.z2ui5?.oView?.mProperties?.viewContent ) , 'xml' );` && |\n|  &&
+              `                        return;` && |\n|  &&
+              `                    }` && |\n|  &&
+              `                    if (selItem == 'PLAIN') {` && |\n|  &&
+              `                        this.displayEditor(  oEvent, JSON.stringify(sap.z2ui5.oResponse, null, 3) , 'json' );` && |\n|  &&
+              `                        return;` && |\n|  &&
+              `                    }` && |\n|  &&
+              `                    if (selItem == 'REQUEST') {` && |\n|  &&
+              `                        this.displayEditor(  oEvent, JSON.stringify(sap.z2ui5.oBody, null, 3) , 'json' );` && |\n|  &&
+              `                        return;` && |\n|  &&
+              `                    }` && |\n|  &&
+              `                    if (selItem == 'POPUP') {` && |\n|  &&
+              `                        this.displayEditor(  oEvent, this.prettifyXml( sap?.z2ui5?.oResponse?.PARAMS?.S_POPUP?.XML ) , 'xml' );` && |\n|  &&
+              `                        return;` && |\n|  &&
+              `                    }` && |\n|  &&
+              `                    if (selItem == 'POPUP_MODEL') {` && |\n|  &&
+              `                        this.displayEditor(  oEvent, JSON.stringify( sap.z2ui5.oViewPopup.getModel().getData(), null, 3) , 'json' );` && |\n|  &&
+              `                        return;` && |\n|  &&
+              `                    }` && |\n|  &&
+              `                    if (selItem == 'POPOVER') {` && |\n|  &&
+              `                        this.displayEditor(  oEvent,  sap?.z2ui5?.oResponse?.PARAMS?.S_POPOVER?.XML  , 'xml' );` && |\n|  &&
+              `                        return;` && |\n|  &&
+              `                    }` && |\n|  &&
+              `                    if (selItem == 'POPOVER_MODEL') {` && |\n|  &&
+              `                        this.displayEditor(  oEvent, JSON.stringify( sap?.z2ui5?.oViewPopover?.getModel( )?.getData( ) , null, 3) , 'json' );` && |\n|  &&
+              `                        return;` && |\n|  &&
+              `                    }` && |\n|  &&
+              `                    if (selItem == 'NEST1') {` && |\n|  &&
+              `                        this.displayEditor(  oEvent, sap?.z2ui5?.oViewNest?.mProperties?.viewContent  , 'xml' );` && |\n|  &&
+              `                        return;` && |\n|  &&
+              `                    }` && |\n|  &&
+              `                    if (selItem == 'NEST1_MODEL') {` && |\n|  &&
+              `                        this.displayEditor(  oEvent, JSON.stringify( sap?.z2ui5?.oViewNest?.getModel( )?.getData( ) , null, 3) , 'json' );` && |\n|  &&
+              `                        return;` && |\n|  &&
+              `                    }` && |\n|  &&
+              `                    if (selItem == 'NEST2') {` && |\n|  &&
+              `                        this.displayEditor(  oEvent, sap?.z2ui5?.oViewNest2?.mProperties?.viewContent  , 'xml' );` && |\n|  &&
+              `                        return;` && |\n|  &&
+              `                    }` && |\n|  &&
+              `                    if (selItem == 'NEST2_MODEL') {` && |\n|  &&
+              `                        this.displayEditor(  oEvent, JSON.stringify( sap?.z2ui5?.oViewNest2?.getModel( )?.getData( ) , null, 3) , 'json' );` && |\n|  &&
+              `                        return;` && |\n|  &&
+              `                    }` && |\n|  &&
+              |\n|  &&
+              `                },` && |\n|  &&
+              |\n|  &&
+              `                displayEditor (oEvent, content, type) {` && |\n|  &&
+              `                    oEvent.getSource().getModel().oData.value = content;` && |\n|  &&
+              `                    oEvent.getSource().getModel().oData.type = type;` && |\n|  &&
+              `                    oEvent.getSource().getModel().refresh();` && |\n|  &&
+              `                },` && |\n|  &&
+              |\n|  &&
+              `  ` && |\n|  &&
+              |\n|  &&
+              `                onClose: function () {` && |\n|  &&
+              `                    this.oDialog.close();` && |\n|  &&
+              |\n|  &&
+              `                }` && |\n|  &&
+              `            };` && |\n|  &&
+              |\n|  &&
+*              `            let XMLDef = ``<core:FragmentDefinition` && |\n|  &&
+*              `            xmlns="sap.m"` && |\n|  &&
+*              `                xmlns:mvc="sap.ui.core.mvc"` && |\n|  &&
+*              `                xmlns:core="sap.ui.core"` && |\n|  &&
+*              `                xmlns:tnt="sap.tnt"` && |\n|  &&
+*              `                xmlns:editor="sap.ui.codeeditor">` && |\n|  &&
+*              `                  <Dialog title="abap2UI5 - Debugging Tools" stretch="true">` && |\n|  &&
+*              `                  <HBox>` && |\n|  &&
+*              `                <tnt:SideNavigation id="sideNavigation" selectedKey="PLAIN" itemSelect="onItemSelect">` && |\n|  &&
+*              `                    <tnt:NavigationList>` && |\n|  &&
+*              `                        <tnt:NavigationListItem text="Communication" icon="sap-icon://employee">` && |\n|  &&
+*              `                            <tnt:NavigationListItem text="Previous Request" id="REQUEST" key="REQUEST" />` && |\n|  &&
+*              `                            <tnt:NavigationListItem text="Response"                id="PLAIN"         key="PLAIN"/>` && |\n|  &&
+*              `                        </tnt:NavigationListItem>` && |\n|  &&
+*              `                        <tnt:NavigationListItem text="View" icon="sap-icon://employee">` && |\n|  &&
+*              `                            <tnt:NavigationListItem text="View (XML)"           id="VIEW"          key="VIEW"/>` && |\n|  &&
+*              `                            <tnt:NavigationListItem text="View Model (JSON)"    id="MODEL"         key="MODEL"  />` && |\n|  &&
+*              `                            <tnt:NavigationListItem text="Popup (XML)"          id="POPUP"         key="POPUP"          enabled="{/activePopup}"/>` && |\n|  &&
+*              `                            <tnt:NavigationListItem text="Popup Model (JSON)"   id="POPUP_MODEL"   key="POPUP_MODEL"    enabled="{/activePopup}"/>` && |\n|  &&
+*              `                            <tnt:NavigationListItem text="Popover (XML)"        id="POPOVER"       key="POPOVER"        enabled="{/activePopover}"/>` && |\n|  &&
+*              `                            <tnt:NavigationListItem text="Popover Model (JSON)" id="POPOVER_MODEL" key="POPOVER_MODEL"  enabled="{/activePopover}"/>` && |\n|  &&
+*              `                            <tnt:NavigationListItem text="Nest1 (XML)"          id="NEST1"         key="NEST1"          enabled="{/activeNest1}"/>` && |\n|  &&
+*              `                            <tnt:NavigationListItem text="Nest1 Model (JSON)"   id="NEST1_MODEL"   key="NEST1_MODEL"    enabled="{/activeNest1}"/>` && |\n|  &&
+*              `                            <tnt:NavigationListItem text="Nest2 (XML)"          id="NEST2"         key="NEST2"          enabled="{/activeNest2}"/>` && |\n|  &&
+*              `                            <tnt:NavigationListItem text="Nest2 Model (JSON)"   id="NEST2_MODEL"   key="NEST2_MODEL"    enabled="{/activeNest2}"/>` && |\n|  &&
+*              `                        </tnt:NavigationListItem>` && |\n|  &&
+*              `                    </tnt:NavigationList>` && |\n|  &&
+*              `                </tnt:SideNavigation>` && |\n|  &&
+*              `                    <editor:CodeEditor` && |\n|  &&
+*              `                    type="{/type}"` && |\n|  &&
+*              `                    value='{/value}'` && |\n|  &&
+*              `                height="800px" width="1200px"/> </HBox>` && |\n|  &&
+*              `               <footer><Toolbar><ToolbarSpacer/><Button text="Close" press="onClose"/></Toolbar></footer>` && |\n|  &&
+*              `               </Dialog>` && |\n|  &&
+*              `            </core:FragmentDefinition>``;` && |\n|  &&
+              `          let  XMLDef = ``PGNvcmU6RnJhZ21lbnREZWZpbml0aW9uCiAgICAgICAgICAgIHhtbG5zPSJzYXAubSIKICAgICAgICAgICAgICAgIHhtbG5zOm12Yz0ic2FwLnVpLmNvcmUubXZjIgogICAgICAgICAgICAgICAgeG1sbnM6Y29yZT0ic2FwLnVpLmNvcmUiCiAgICAgICAgICAgICAgICB4bWxuczp`
+&&
+`0bnQ9InNhcC50bnQiCiAgICAgICAgICAgICAgICB4bWxuczplZGl0b3I9InNhcC51aS5jb2RlZWRpdG9yIj4KICAgICAgICAgICAgICAgICAgPERpYWxvZyB0aXRsZT0iYWJhcDJVSTUgLSBEZWJ1Z2dpbmcgVG9vbHMiIHN0cmV0Y2g9InRydWUiPgogICAgICAgICAgICAgICAgICA8SEJveD4KICAgICAgICAgICAgICAgIDx0bnQ` &&
+`6U2lkZU5hdmlnYXRpb24gaWQ9InNpZGVOYXZpZ2F0aW9uIiBzZWxlY3RlZEtleT0iUExBSU4iIGl0ZW1TZWxlY3Q9Im9uSXRlbVNlbGVjdCI+CiAgICAgICAgICAgICAgICAgICAgPHRudDpOYXZpZ2F0aW9uTGlzdD4KICAgICAgICAgICAgICAgICAgICAgICAgPHRudDpOYXZpZ2F0aW9uTGlzdEl0ZW0gdGV4dD0iQ29tbXVuaWN` &&
+`hdGlvbiIgaWNvbj0ic2FwLWljb246Ly9lbXBsb3llZSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dG50Ok5hdmlnYXRpb25MaXN0SXRlbSB0ZXh0PSJQcmV2aW91cyBSZXF1ZXN0IiBpZD0iUkVRVUVTVCIga2V5PSJSRVFVRVNUIiAvPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHRudDpOYXZpZ2F0aW9uTGl` &&
+`zdEl0ZW0gdGV4dD0iUmVzcG9uc2UiICAgICAgICAgICAgICAgIGlkPSJQTEFJTiIgICAgICAgICBrZXk9IlBMQUlOIi8+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvdG50Ok5hdmlnYXRpb25MaXN0SXRlbT4KICAgICAgICAgICAgICAgICAgICAgICAgPHRudDpOYXZpZ2F0aW9uTGlzdEl0ZW0gdGV4dD0iVmlldyIgaWNvbj0` &&
+`ic2FwLWljb246Ly9lbXBsb3llZSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dG50Ok5hdmlnYXRpb25MaXN0SXRlbSB0ZXh0PSJWaWV3IChYTUwpIiAgICAgICAgICAgaWQ9IlZJRVciICAgICAgICAgIGtleT0iVklFVyIvPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHRudDpOYXZpZ2F0aW9uTGlzdEl0ZW0` &&
+`gdGV4dD0iVmlldyBNb2RlbCAoSlNPTikiICAgIGlkPSJNT0RFTCIgICAgICAgICBrZXk9Ik1PREVMIiAgLz4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx0bnQ6TmF2aWdhdGlvbkxpc3RJdGVtIHRleHQ9IlBvcHVwIChYTUwpIiAgICAgICAgICBpZD0iUE9QVVAiICAgICAgICAga2V5PSJQT1BVUCIgICAgICAgICAgZW5` &&
+`hYmxlZD0iey9hY3RpdmVQb3B1cH0iLz4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx0bnQ6TmF2aWdhdGlvbkxpc3RJdGVtIHRleHQ9IlBvcHVwIE1vZGVsIChKU09OKSIgICBpZD0iUE9QVVBfTU9ERUwiICAga2V5PSJQT1BVUF9NT0RFTCIgICAgZW5hYmxlZD0iey9hY3RpdmVQb3B1cH0iLz4KICAgICAgICAgICAgICA` &&
+`gICAgICAgICAgICAgIDx0bnQ6TmF2aWdhdGlvbkxpc3RJdGVtIHRleHQ9IlBvcG92ZXIgKFhNTCkiICAgICAgICBpZD0iUE9QT1ZFUiIgICAgICAga2V5PSJQT1BPVkVSIiAgICAgICAgZW5hYmxlZD0iey9hY3RpdmVQb3BvdmVyfSIvPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHRudDpOYXZpZ2F0aW9uTGlzdEl0ZW0` &&
+`gdGV4dD0iUG9wb3ZlciBNb2RlbCAoSlNPTikiIGlkPSJQT1BPVkVSX01PREVMIiBrZXk9IlBPUE9WRVJfTU9ERUwiICBlbmFibGVkPSJ7L2FjdGl2ZVBvcG92ZXJ9Ii8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dG50Ok5hdmlnYXRpb25MaXN0SXRlbSB0ZXh0PSJOZXN0MSAoWE1MKSIgICAgICAgICAgaWQ9Ik5FU1Q` &&
+`xIiAgICAgICAgIGtleT0iTkVTVDEiICAgICAgICAgIGVuYWJsZWQ9InsvYWN0aXZlTmVzdDF9Ii8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dG50Ok5hdmlnYXRpb25MaXN0SXRlbSB0ZXh0PSJOZXN0MSBNb2RlbCAoSlNPTikiICAgaWQ9Ik5FU1QxX01PREVMIiAgIGtleT0iTkVTVDFfTU9ERUwiICAgIGVuYWJsZWQ` &&
+`9InsvYWN0aXZlTmVzdDF9Ii8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dG50Ok5hdmlnYXRpb25MaXN0SXRlbSB0ZXh0PSJOZXN0MiAoWE1MKSIgICAgICAgICAgaWQ9Ik5FU1QyIiAgICAgICAgIGtleT0iTkVTVDIiICAgICAgICAgIGVuYWJsZWQ9InsvYWN0aXZlTmVzdDJ9Ii8+CiAgICAgICAgICAgICAgICAgICA` &&
+`gICAgICAgICA8dG50Ok5hdmlnYXRpb25MaXN0SXRlbSB0ZXh0PSJOZXN0MiBNb2RlbCAoSlNPTikiICAgaWQ9Ik5FU1QyX01PREVMIiAgIGtleT0iTkVTVDJfTU9ERUwiICAgIGVuYWJsZWQ9InsvYWN0aXZlTmVzdDJ9Ii8+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvdG50Ok5hdmlnYXRpb25MaXN0SXRlbT4KICAgICAgICA` &&
+`gICAgICAgICAgICA8L3RudDpOYXZpZ2F0aW9uTGlzdD4KICAgICAgICAgICAgICAgIDwvdG50OlNpZGVOYXZpZ2F0aW9uPgogICAgICAgICAgICAgICAgICAgIDxlZGl0b3I6Q29kZUVkaXRvcgogICAgICAgICAgICAgICAgICAgIHR5cGU9InsvdHlwZX0iCiAgICAgICAgICAgICAgICAgICAgdmFsdWU9J3svdmFsdWV9JwogICA` &&
+`gICAgICAgICAgICAgaGVpZ2h0PSI4MDBweCIgd2lkdGg9IjEyMDBweCIvPiA8L0hCb3g+CiAgICAgICAgICAgICAgIDxmb290ZXI+PFRvb2xiYXI+PFRvb2xiYXJTcGFjZXIvPjxCdXR0b24gdGV4dD0iQ2xvc2UiIHByZXNzPSJvbkNsb3NlIi8+PC9Ub29sYmFyPjwvZm9vdGVyPgogICAgICAgICAgICAgICA8L0RpYWxvZz4KICA` &&
+`gICAgICAgICAgPC9jb3JlOkZyYWdtZW50RGVmaW5pdGlvbj4=``;` && |\n|  &&
+              `            XMLDef = atob( XMLDef );` && |\n|  &&
+              `            if (this.oFragment) {` && |\n|  &&
+              `                this.oFragment.close();` && |\n|  &&
+              `                this.oFragment.destroy();` && |\n|  &&
+              `            }` && |\n|  &&
+              `            this.oFragment = await Fragment.load({` && |\n|  &&
+              `                definition: XMLDef,` && |\n|  &&
+              `                controller: oFragmentController,` && |\n|  &&
+              `            });` && |\n|  &&
+              |\n|  &&
+              `            oFragmentController.oDialog = this.oFragment;` && |\n|  &&
+              |\n|  &&
+              `            let value = JSON.stringify(sap.z2ui5.oResponse, null, 3);` && |\n|  &&
+              `            debugger; let oData = { ` && |\n|  &&
+              `                type: 'json', ` && |\n|  &&
+              `                value: value,` && |\n|  &&
+              `                activeNest1   : sap?.z2ui5?.oViewNest?.mProperties?.viewContent !== undefined,` && |\n|  &&
+              `                activeNest2   : sap?.z2ui5?.oViewNest2?.mProperties?.viewContent !== undefined,` && |\n|  &&
+              `                activePopup   : sap?.z2ui5?.oResponse?.PARAMS?.S_POPUP?.XML !== undefined,` && |\n|  &&
+              `                activePopover : sap?.z2ui5?.oResponse?.PARAMS?.S_POPOVER?.XML !== undefined,` && |\n|  &&
+              `            };` && |\n|  &&
+              `            var oModel = new JSONModel(oData);` && |\n|  &&
+              `            this.oFragment.setModel(oModel);` && |\n|  &&
+              `            this.oFragment.open();` && |\n|  &&
+              |\n|  &&
+              `        },` && |\n|  &&
+              |\n|  &&
+              `        async init() {` && |\n|  &&
+              |\n|  &&
+              `            document.addEventListener("keydown", function (zEvent) {` && |\n|  &&
+              `                if (zEvent.ctrlKey ) { if ( zEvent.key === "a") {  // case sensitive` && |\n|  &&
+              `                    sap.z2ui5.DebuggingTools.show();` && |\n|  &&
+              `                } }` && |\n|  &&
+              `            });` && |\n|  &&
+              |\n|  &&
+              `        },` && |\n|  &&
+              |\n|  &&
+              `        renderer(oRm, oControl) {` && |\n|  &&
+              `        }, ` && |\n|  &&
              `    });` && |\n|  &&
              `});`.