diff --git a/src/00/z2ui5_cl_app_demo_00.clas.abap b/src/00/z2ui5_cl_app_demo_00.clas.abap
index c846d995..0f65bb71 100644
--- a/src/00/z2ui5_cl_app_demo_00.clas.abap
+++ b/src/00/z2ui5_cl_app_demo_00.clas.abap
@@ -79,28 +79,34 @@ CLASS z2ui5_cl_app_demo_00 IMPLEMENTATION.
         )->button( text = 'Popups & Flow Logic'           press = client->_event( 'z2ui5_cl_app_demo_12' )
         )->button( text = 'Popover'             press = client->_event( 'z2ui5_cl_app_demo_26' )
     ).
-*
+
+    grid->simple_form( title = 'HowTo - Messages' layout = 'ResponsiveGridLayout' )->content( 'form'
+        )->button( text = 'Toast, Box & Strip'   press = client->_event( 'z2ui5_cl_app_demo_08' )
+        )->button( text = 'Illustrated Message'  press = client->_event( 'z2ui5_cl_app_demo_33' )
+        )->button( text = 'T100 & bapiret popup' press = client->_event( 'z2ui5_cl_app_demo_34' )
+        )->button( text = 'Message Manager'      press = client->_event( 'z2ui5_cl_app_demo_38' )
+    ).
+
     grid->simple_form( title = 'HowTo - Layouts' layout = 'ResponsiveGridLayout' )->content( 'form'
          )->button( text = 'Layout (Header, Footer, Grid)' press = client->_event( 'z2ui5_cl_app_demo_10' )
          )->button( text = 'Object Page' press = client->_event( 'z2ui5_cl_app_demo_17' )
          )->button( text = 'Dynamic Page' press = client->_event( 'z2ui5_cl_app_demo_30' )
 *         )->button( text = 'Split App' press = client->_event( 'z2ui5_cl_app_demo_17' )
     ).
-*
-    grid->simple_form( title = 'HowTo - Extensions' layout = 'ResponsiveGridLayout' )->content( 'form'
+
+    grid->simple_form( title = 'HowTo - Extension II' layout = 'ResponsiveGridLayout' )->content( 'form'
          )->button( text = 'Views - Normal, Generic, XML' press = client->_event( 'z2ui5_cl_app_demo_23' )
          )->button( text = 'Import UI5-XML-View' press = client->_event( 'z2ui5_cl_app_demo_31' )
-         )->button( text = 'HTML, JS, CSS' press = client->_event( 'z2ui5_cl_app_demo_32    ' )
          )->button( text = 'Custom Control' press = client->_event( 'z2ui5_cl_app_demo_37' )
     ).
 
-       grid->simple_form( title = 'HowTo - Messages' layout = 'ResponsiveGridLayout' )->content( 'form'
-        )->button( text = 'Toast, Box & Strip'   press = client->_event( 'z2ui5_cl_app_demo_08' )
-        )->button( text = 'Illustrated Message'  press = client->_event( 'z2ui5_cl_app_demo_33' )
-        )->button( text = 'T100 & bapiret popup' press = client->_event( 'z2ui5_cl_app_demo_34' )
-        )->button( text = 'Message Manager'      press = client->_event( 'z2ui5_cl_app_demo_38' )
+    grid->simple_form( title = 'HowTo - Extension II' layout = 'ResponsiveGridLayout' )->content( 'form'
+         )->button( text = 'HTML, JS, CSS' press = client->_event( 'z2ui5_cl_app_demo_32' )
+         )->button( text = 'Canvas & SVG' press = client->_event( 'z2ui5_cl_app_demo_36' )
+         )->button( text = 'ext. Library' press = client->_event( 'z2ui5_cl_app_demo_40' )
     ).
 
+
     DATA(form) = page->grid( 'L9 M12 S12'
         )->content( 'layout'
         )->simple_form( 'Demos I'
diff --git a/src/00/z2ui5_cl_app_demo_23.clas.abap b/src/00/z2ui5_cl_app_demo_23.clas.abap
index 8d9059d2..242c4029 100644
--- a/src/00/z2ui5_cl_app_demo_23.clas.abap
+++ b/src/00/z2ui5_cl_app_demo_23.clas.abap
@@ -97,7 +97,7 @@ CLASS z2ui5_cl_app_demo_23 IMPLEMENTATION.
                               ` > <Link ` && |\n|  &&
                               `  text="Source_Code" ` && |\n|  &&
                               `  target="_blank" ` && |\n|  &&
-                              `  href="<system>sap/bc/adt/oo/classes/Z2UI5_CL_APP_DEMO_23/source/main" ` && |\n|  &&
+                              `  href="&lt;system&gt;sap/bc/adt/oo/classes/Z2UI5_CL_APP_DEMO_23/source/main" ` && |\n|  &&
                               ` /></headerContent> <f:SimpleForm ` && |\n|  &&
                               `  title="Form Title" ` && |\n|  &&
                               ` > <f:content ` && |\n|  &&
diff --git a/src/00/z2ui5_cl_app_demo_29.clas.abap b/src/00/z2ui5_cl_app_demo_29.clas.abap
deleted file mode 100644
index 2158e68b..00000000
--- a/src/00/z2ui5_cl_app_demo_29.clas.abap
+++ /dev/null
@@ -1,153 +0,0 @@
-CLASS z2ui5_cl_app_demo_29 DEFINITION PUBLIC.
-
-  PUBLIC SECTION.
-
-    INTERFACES z2ui5_if_app.
-
-    data mv_value type string.
-    DATA product  TYPE string.
-    DATA quantity TYPE i.
-
-    DATA input21 TYPE string.
-    DATA input22 TYPE string.
-    DATA input41 TYPE string.
-  PROTECTED SECTION.
-
-    data client TYPE REF TO z2ui5_if_client.
-    DATA:
-      BEGIN OF app,
-        check_initialized TYPE abap_bool,
-        view_main         TYPE string,
-        view_popup        TYPE string,
-        get             TYPE z2ui5_if_client=>ty_s_get,
-        next            TYPE z2ui5_if_client=>ty_s_next,
-      END OF app.
-
-    METHODS z2ui5_on_init.
-    METHODS z2ui5_on_event.
-    METHODS z2ui5_on_render.
-
-  PRIVATE SECTION.
-ENDCLASS.
-
-
-
-CLASS Z2UI5_CL_APP_DEMO_29 IMPLEMENTATION.
-
-
-  METHOD z2ui5_if_app~controller.
-
-    me->client = client.
-    app-get      = client->get( ).
-    app-view_popup = ``.
-
-    IF app-check_initialized = abap_false.
-      app-check_initialized = abap_true.
-      z2ui5_on_init( ).
-    ENDIF.
-
-    IF app-get-event IS NOT INITIAL.
-      z2ui5_on_event( ).
-    ENDIF.
-
-    z2ui5_on_render( ).
-
-    client->set_next( app-next ).
-    CLEAR app-get.
-    CLEAR app-next.
-
-  ENDMETHOD.
-
-
-  METHOD z2ui5_on_event.
-
-    CASE app-get-event.
-
-      WHEN 'POST'.
-        client->popup_message_toast( app-get-event_data ).
-
-         WHEN 'MYCC'.
-        client->popup_message_toast( 'MYCC event ' && mv_value ).
-
-      WHEN 'BACK'.
-        client->nav_app_leave( client->get_app( app-get-id_prev_app_stack ) ).
-
-    ENDCASE.
-
-  ENDMETHOD.
-
-
-  METHOD z2ui5_on_init.
-
-    product  = 'tomato'.
-    quantity = '500'.
-    app-view_main = 'VIEW_MAIN'.
-    input41 = 'faasdfdfsaVIp'.
-
-    input21 = '40'.
-    input22 = '40'.
-
-    mv_value = 'test'.
-
-  ENDMETHOD.
-
-
-  METHOD z2ui5_on_render.
-
-
-    app-next-xml_main = `<mvc:View controllerName="project1.controller.View1"` && |\n|  &&
-                          `    xmlns:mvc="sap.ui.core.mvc" displayBlock="true"` && |\n|  &&
-                          `  xmlns:z2ui5="z2ui5"  xmlns:m="sap.m" xmlns="http://www.w3.org/1999/xhtml"` && |\n|  &&
-                          `    ><m:Button ` && |\n|  &&
-                          `  text="back" ` && |\n|  &&
-                          `  press="` && client->_event( 'BACK' ) && `" ` && |\n|  &&
-                          `  class="sapUiContentPadding sapUiResponsivePadding--content"/> ` && |\n|  &&
-                   `       <m:Link target="_blank" text="Source_Code" href="` && z2ui5_cl_xml_view_helper=>hlp_get_source_code_url( app = me get = client->get( ) ) && `"/>` && |\n|  &&
-                          `<html><head><style>` && |\n|  &&
-                          `body {background-color: powderblue;}` && |\n|  &&
-                          `h1   {color: blue;}` && |\n|  &&
-                          `p    {color: red;}` && |\n|  &&
-                          `</style>` &&
-                          `</head>` && |\n|  &&
-                          `<body>` && |\n|  &&
-                          `<h1>This is a heading with css</h1>` && |\n|  &&
-                          `<p>This is a paragraph with css.</p>` && |\n|  &&
-                          `<h1>My First JavaScript</h1>` && |\n|  &&
-                          `<button type="button" onclick="myFunction()">` && |\n|  &&
-                          `run javascript code sent from the backend.</button>` && |\n|  &&
-                           `<button type="button" onclick="myFunction2()">sent data to backend and come back</button>` && |\n|  &&
-                          `<Input id='input' value='frontend data' /><h1>This is SVG</h1><p id="demo"></p><svg id="svg" version="1.1"` && |\n|  &&
-                          `       baseProfile="full"` && |\n|  &&
-                          `       width="500" height="500"` && |\n|  &&
-                          `       xmlns="http://www.w3.org/2000/svg">` && |\n|  &&
-                          `    <rect width="100%" height="100%" />` && |\n|  &&
-                          `    <circle id="circle" cx="100" cy="100" r="80" />` && |\n|  &&
-                          `  </svg>` && |\n|  &&
-                          `<div>X: <input id="sliderX" type="range" min="1" max="500" value="100" /></div><h1>This is canvas</h1><canvas id="canvas" width="500" height="300"></canvas>` && |\n|  &&
-                          `<script> debugger; var canvas = document.getElementById(sap.z2ui5.oView.createId( 'canvas' ));` && |\n|  &&
-                          `  if (canvas.getContext){` && |\n|  &&
-                          `let context = canvas.getContext('2d');` && |\n|  &&
-                          `context.fillStyle = 'rgb(200,0,0)';` && |\n|  &&
-                          `context.fillRect (10, 10, 80, 80);` && |\n|  &&
-                          `context.fillStyle = 'rgba(0, 0, 200, 0.5)';` && |\n|  &&
-                          `context.fillRect (100, 10, 80, 80);` && |\n|  &&
-                          `context.strokeStyle = 'rgb(200,0,0)';` && |\n|  &&
-                          `context.strokeRect (190, 10, 80, 80);` && |\n|  &&
-                          `context.strokeStyle = 'rgba(0, 0, 200, 0.5)';` && |\n|  &&
-                          `    context.strokeRect (280, 10, 80, 80);` && |\n|  &&
-                          `    context.fillStyle = 'rgb(200,0,0)';` && |\n|  &&
-                          `    context.fillRect (370, 10, 80, 80);` && |\n|  &&
-                          `    context.clearRect (380, 20, 60, 20);` && |\n|  &&
-                          `    context.fillRect (390, 25, 10, 10);` && |\n|  &&
-                          `    context.fillRect (420, 25, 10, 10);` && |\n|  &&
-                          `    context.clearRect (385, 60, 50, 10); }  ` && |\n|  &&
-                          ` function myFunction( ) { alert( 'button pressed' ) }` && |\n|  &&
-                          ` function myFunction2( ) { sap.z2ui5.oView.getController().onEvent({ 'EVENT' : 'POST', 'METHOD' : 'UPDATE' }, ` && ' document.getElementById(sap.z2ui5.oView.createId( "input" )).value ' && ` ) }` && |\n|  &&
-                          `</script></body>` && |\n|  &&
-                          `</html> ` && |\n|  &&
-                            `</mvc:View>`.
-
-
-
-  ENDMETHOD.
-ENDCLASS.
diff --git a/src/00/z2ui5_cl_app_demo_31.clas.abap b/src/00/z2ui5_cl_app_demo_31.clas.abap
index edd6220b..53f0488d 100644
--- a/src/00/z2ui5_cl_app_demo_31.clas.abap
+++ b/src/00/z2ui5_cl_app_demo_31.clas.abap
@@ -14,6 +14,7 @@ CLASS z2ui5_cl_app_demo_31 DEFINITION PUBLIC.
         check_initialized TYPE abap_bool,
         get               TYPE z2ui5_if_client=>ty_s_get,
         next              TYPE z2ui5_if_client=>ty_s_next,
+        popup             type string,
       END OF app.
 
     METHODS z2ui5_on_init.
@@ -33,6 +34,7 @@ CLASS z2ui5_cl_app_demo_31 IMPLEMENTATION.
 
     app-get = client->get( ).
     me->client = client.
+    app-popup = ``.
 
     IF app-check_initialized = abap_false.
       app-check_initialized = abap_true.
@@ -60,8 +62,9 @@ CLASS z2ui5_cl_app_demo_31 IMPLEMENTATION.
       WHEN 'BACK'.
         client->nav_app_leave( client->get_app( app-get-id_prev_app_stack ) ).
       WHEN 'POPUP'.
+        app-popup = 'TEST'.
+        WHEN 'DATA'.
         client->popup_message_box( 'Event raised value:' && mv_value ).
-
     ENDCASE.
 
   ENDMETHOD.
@@ -93,8 +96,8 @@ CLASS z2ui5_cl_app_demo_31 IMPLEMENTATION.
                         `       </TileContent>` && |\n|  &&
                         `   </GenericTile>` && |\n|  &&
                         |\n|  &&
-                        `   <GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="Sales Fulfillment Application Title"` && |\n|  &&
-                        `       subheader="Subtitle" press="press" frameType= "TwoByHalf">` && |\n|  &&
+                        `   <GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="Sales Fulfillment Application Title" press="` && client->_event( 'DATA' ) && `"` && |\n|  &&
+                        `       subheader="Subtitle" frameType= "TwoByHalf">` && |\n|  &&
                         `       <TileContent />` && |\n|  &&
                         `   </GenericTile>` && |\n|  &&
                         |\n|  &&
@@ -164,6 +167,7 @@ CLASS z2ui5_cl_app_demo_31 IMPLEMENTATION.
 
   METHOD z2ui5_on_render_popup.
 
+    if app-popup = `TEST`.
     app-next-xml_popup = `<core:FragmentDefinition` && |\n|  &&
                          `  xmlns="sap.m"` && |\n|  &&
                          `  xmlns:core="sap.ui.core">` && |\n|  &&
@@ -205,6 +209,7 @@ CLASS z2ui5_cl_app_demo_31 IMPLEMENTATION.
                          `  </ViewSettingsDialog>` && |\n|  &&
                          `</core:FragmentDefinition>`.
 
+    endif.
   ENDMETHOD.
 
 ENDCLASS.
diff --git a/src/00/z2ui5_cl_app_demo_32.clas.abap b/src/00/z2ui5_cl_app_demo_32.clas.abap
index 3ccd78c7..33f0e2ad 100644
--- a/src/00/z2ui5_cl_app_demo_32.clas.abap
+++ b/src/00/z2ui5_cl_app_demo_32.clas.abap
@@ -94,30 +94,6 @@ CLASS Z2UI5_CL_APP_DEMO_32 IMPLEMENTATION.
 
   METHOD z2ui5_on_render.
 
-*    app-next-xml_main = `<mvc:View controllerName="project1.controller.View1"` && |\n|  &&
-*                          `    xmlns:mvc="sap.ui.core.mvc" displayBlock="true"` && |\n|  &&
-*                          `  xmlns:z2ui5="z2ui5"  xmlns:m="sap.m" xmlns="http://www.w3.org/1999/xhtml"` && |\n|  &&
-*                          `    ><m:Button ` && |\n|  &&
-*                          `  text="back" ` && |\n|  &&
-*                          `  press="` && client->_event( 'BACK' ) && `" ` && |\n|  &&
-*                          `  class="sapUiContentPadding sapUiResponsivePadding--content"/> ` && |\n|  &&
-*                   `       <m:Link target="_blank" text="Source_Code" href="` && z2ui5_cl_xml_view_helper=>hlp_get_source_code_url( app = me get = client->get( ) ) && `"/>` && |\n|  &&
-*                          `<html><head><style>` && |\n|  &&
-*                          `body {background-color: powderblue;}` && |\n|  &&
-*                          `h1   {color: blue;}` && |\n|  &&
-*                          `p    {color: red;}` && |\n|  &&
-*                          `</style>` &&
-*                          `</head>` && |\n|  &&
-*                          `<body>` && |\n|  &&
-*                          `<h1>This is a heading with css</h1>` && |\n|  &&
-*                          `<p>This is a paragraph with css.</p>` && |\n|  &&
-*                          `<h1>My First JavaScript</h1>` && |\n|  &&
-*                          `<button type="button">send</button>` && |\n|  &&
-*                          `<Input id='input' value='frontend data' /> ` &&
-*                          `</body>` && |\n|  &&
-*                          `</html> ` && |\n|  &&
-*                            `</mvc:View>`.
-
     app-next-xml_main = `<mvc:View controllerName="project1.controller.View1"` && |\n|  &&
                           `    xmlns:mvc="sap.ui.core.mvc" displayBlock="true"` && |\n|  &&
                           `  xmlns:z2ui5="z2ui5"  xmlns:m="sap.m" xmlns="http://www.w3.org/1999/xhtml"` && |\n|  &&
diff --git a/src/00/z2ui5_cl_app_demo_32.clas.xml b/src/00/z2ui5_cl_app_demo_32.clas.xml
index 5be0433a..97ccdd50 100644
--- a/src/00/z2ui5_cl_app_demo_32.clas.xml
+++ b/src/00/z2ui5_cl_app_demo_32.clas.xml
@@ -5,7 +5,7 @@
    <VSEOCLASS>
     <CLSNAME>Z2UI5_CL_APP_DEMO_32</CLSNAME>
     <LANGU>E</LANGU>
-    <DESCRIPT>extension - html examples</DESCRIPT>
+    <DESCRIPT>extension - html css js</DESCRIPT>
     <STATE>1</STATE>
     <CLSCCINCL>X</CLSCCINCL>
     <FIXPT>X</FIXPT>
diff --git a/src/00/z2ui5_cl_app_demo_36.clas.xml b/src/00/z2ui5_cl_app_demo_36.clas.xml
index a6053370..65a51098 100644
--- a/src/00/z2ui5_cl_app_demo_36.clas.xml
+++ b/src/00/z2ui5_cl_app_demo_36.clas.xml
@@ -5,7 +5,7 @@
    <VSEOCLASS>
     <CLSNAME>Z2UI5_CL_APP_DEMO_36</CLSNAME>
     <LANGU>E</LANGU>
-    <DESCRIPT>extension - html js 2</DESCRIPT>
+    <DESCRIPT>extension - canvas and svg</DESCRIPT>
     <STATE>1</STATE>
     <CLSCCINCL>X</CLSCCINCL>
     <FIXPT>X</FIXPT>
diff --git a/src/00/z2ui5_cl_app_demo_37.clas.abap b/src/00/z2ui5_cl_app_demo_37.clas.abap
index e10f39b8..33b24dc1 100644
--- a/src/00/z2ui5_cl_app_demo_37.clas.abap
+++ b/src/00/z2ui5_cl_app_demo_37.clas.abap
@@ -4,25 +4,27 @@ CLASS z2ui5_cl_app_demo_37 DEFINITION PUBLIC.
 
     INTERFACES z2ui5_if_app.
 
-    data mv_value type string.
-    DATA product  TYPE string.
-    DATA quantity TYPE i.
+    DATA mv_value TYPE string.
 
-    DATA input21 TYPE string.
-    DATA input22 TYPE string.
-    DATA input41 TYPE string.
   PROTECTED SECTION.
 
-    data client TYPE REF TO z2ui5_if_client.
+    DATA client TYPE REF TO z2ui5_if_client.
     DATA:
       BEGIN OF app,
         check_initialized TYPE abap_bool,
         view_main         TYPE string,
         view_popup        TYPE string,
-        get             TYPE z2ui5_if_client=>ty_s_get,
-        next            TYPE z2ui5_if_client=>ty_s_next,
+        get               TYPE z2ui5_if_client=>ty_s_get,
+        next              TYPE z2ui5_if_client=>ty_s_next,
       END OF app.
 
+    DATA mv_load_cc    TYPE abap_bool.
+    DATA mv_display_cc TYPE abap_bool.
+
+    METHODS get_js_custom_control
+      RETURNING
+        VALUE(result) TYPE string.
+
     METHODS z2ui5_on_init.
     METHODS z2ui5_on_event.
     METHODS z2ui5_on_render.
@@ -32,7 +34,7 @@ ENDCLASS.
 
 
 
-CLASS Z2UI5_CL_APP_DEMO_37 IMPLEMENTATION.
+CLASS z2ui5_cl_app_demo_37 IMPLEMENTATION.
 
 
   METHOD z2ui5_if_app~controller.
@@ -66,8 +68,16 @@ CLASS Z2UI5_CL_APP_DEMO_37 IMPLEMENTATION.
       WHEN 'POST'.
         client->popup_message_toast( app-get-event_data ).
 
-         WHEN 'MYCC'.
-        client->popup_message_toast( 'MYCC event ' && mv_value ).
+      WHEN 'LOAD_CC'.
+        mv_load_cc = abap_true.
+        client->popup_message_box( 'Custom Control loaded ' ).
+
+      WHEN 'DISPLAY_CC'.
+        mv_display_cc = abap_true.
+        client->popup_message_box( 'Custom Control displayed ' ).
+
+      WHEN 'MYCC'.
+        client->popup_message_toast( `Custom Control input: ` && mv_value ).
 
       WHEN 'BACK'.
         client->nav_app_leave( client->get_app( app-get-id_prev_app_stack ) ).
@@ -79,16 +89,6 @@ CLASS Z2UI5_CL_APP_DEMO_37 IMPLEMENTATION.
 
   METHOD z2ui5_on_init.
 
-    product  = 'tomato'.
-    quantity = '500'.
-    app-view_main = 'VIEW_MAIN'.
-    input41 = 'faasdfdfsaVIp'.
-
-    input21 = '40'.
-    input22 = '40'.
-
-    mv_value = 'test'.
-
   ENDMETHOD.
 
 
@@ -102,96 +102,66 @@ CLASS Z2UI5_CL_APP_DEMO_37 IMPLEMENTATION.
                           `  press="` && client->_event( 'BACK' ) && `" ` && |\n|  &&
                           `  class="sapUiContentPadding sapUiResponsivePadding--content"/> ` && |\n|  &&
                    `       <m:Link target="_blank" text="Source_Code" href="` && z2ui5_cl_xml_view_helper=>hlp_get_source_code_url( app = me get = client->get( ) ) && `"/>` && |\n|  &&
-                          `<html><head><style>` && |\n|  &&
-                          `body {background-color: powderblue;}` && |\n|  &&
-                          `h1   {color: blue;}` && |\n|  &&
-                          `p    {color: red;}` && |\n|  &&
-                          `</style>` &&
+                          `<m:Button text="Load Custom Control"    press="` && client->_event( 'LOAD_CC' )    && `" />` && |\n|  &&
+                          `<m:Button text="Display Custom Control" press="` && client->_event( 'DISPLAY_CC' ) && `" />` && |\n|  &&
+                          `<html><head> ` &&
                           `</head>` && |\n|  &&
-                          `<body>` && |\n|  &&
-                                                    `<script> debugger; if(!z2ui5.MyCC){   jQuery.sap.declare("z2ui5.MyCC");` && |\n|  &&
-                          |\n|  &&
-                          `    sap.ui.define( [` && |\n|  &&
-                          `        "sap/ui/core/Control",` && |\n|  &&
-                          `    ], function (Control) {` && |\n|  &&
-                          `        "use strict";` && |\n|  &&
-                          |\n|  &&
-                          `        return Control.extend("z2ui5.MyCC", {` && |\n|  &&
-                          |\n|  &&
-                          `            metadata: {` && |\n|  &&
-                          `                properties: {` && |\n|  &&
-                          `                    value: { type: "string" }` && |\n|  &&
-                          `                },` && |\n|  &&
-                          `                events: {` && |\n|  &&
-                          `                    "change": {` && |\n|  &&
-                          `                        allowPreventDefault: true,` && |\n|  &&
-                          `                        parameters: {}` && |\n|  &&
-                          `                    }` && |\n|  &&
-                          `                }` && |\n|  &&
-                          `            },` && |\n|  &&
-                          |\n|  &&
-                          `            renderer: function (oRm, oControl) {` && |\n|  &&
-                          |\n|  &&
-                          `                oControl.oInput = new sap.m.Input({` && |\n|  &&
-                          `                    value: oControl.getProperty("value")` && |\n|  &&
-                          `                });` && |\n|  &&
-                          |\n|  &&
-                          `                oControl.oButton = new sap.m.Button({` && |\n|  &&
-                          `                    text: 'button text',` && |\n|  &&
-                          `                    press: function (oEvent) {` && |\n|  &&
-                          `                        // this.oInput._sTypedInValue` && |\n|  &&
-                          `                        // this.oInput.getProperty( 'value' ) ` && |\n|  &&
-                          `                        this.setProperty("value", this.oInput._sTypedInValue );` && |\n|  &&
-                          `                        this.fireChange();` && |\n|  &&
-                          `                    }.bind(oControl)` && |\n|  &&
-                          `                });` && |\n|  &&
-                          `                oRm.renderControl(oControl.oInput);` && |\n|  &&
-                          `                oRm.renderControl(oControl.oButton);` && |\n|  &&
-                          `            }` && |\n|  &&
-                          `    });` && |\n|  &&
-                          `}); } </script>` && |\n|  &&
-                          |\n|  &&
-                          `<h1>This is a heading with css</h1>` && |\n|  &&
-                          `<p>This is a paragraph with css.</p>` && |\n|  &&
-                          `<h1>My First JavaScript</h1>` && |\n|  &&
-                          `<button type="button" onclick="myFunction()">` && |\n|  &&
-                          `run javascript code sent from the backend.</button>` && |\n|  &&
-                           `<button type="button" onclick="myFunction2()">sent data to backend and come back</button>` && |\n|  &&
-                          `<Input id='input' value='frontend data' /><h1>This is SVG</h1><p id="demo"></p><svg id="svg" version="1.1"` && |\n|  &&
-                          `       baseProfile="full"` && |\n|  &&
-                          `       width="500" height="500"` && |\n|  &&
-                          `       xmlns="http://www.w3.org/2000/svg">` && |\n|  &&
-                          `    <rect width="100%" height="100%" />` && |\n|  &&
-                          `    <circle id="circle" cx="100" cy="100" r="80" />` && |\n|  &&
-                          `  </svg>` && |\n|  &&
-                          `<div>X: <input id="sliderX" type="range" min="1" max="500" value="100" /></div><h1>This is canvas</h1><canvas id="canvas" width="500" height="300"></canvas>` && |\n|  &&
-                          `<script> debugger; var canvas = document.getElementById(sap.z2ui5.oView.createId( 'canvas' ));` && |\n|  &&
-                          `  if (canvas.getContext){` && |\n|  &&
-                          `let context = canvas.getContext('2d');` && |\n|  &&
-                          `context.fillStyle = 'rgb(200,0,0)';` && |\n|  &&
-                          `context.fillRect (10, 10, 80, 80);` && |\n|  &&
-                          `context.fillStyle = 'rgba(0, 0, 200, 0.5)';` && |\n|  &&
-                          `context.fillRect (100, 10, 80, 80);` && |\n|  &&
-                          `context.strokeStyle = 'rgb(200,0,0)';` && |\n|  &&
-                          `context.strokeRect (190, 10, 80, 80);` && |\n|  &&
-                          `context.strokeStyle = 'rgba(0, 0, 200, 0.5)';` && |\n|  &&
-                          `    context.strokeRect (280, 10, 80, 80);` && |\n|  &&
-                          `    context.fillStyle = 'rgb(200,0,0)';` && |\n|  &&
-                          `    context.fillRect (370, 10, 80, 80);` && |\n|  &&
-                          `    context.clearRect (380, 20, 60, 20);` && |\n|  &&
-                          `    context.fillRect (390, 25, 10, 10);` && |\n|  &&
-                          `    context.fillRect (420, 25, 10, 10);` && |\n|  &&
-                          `    context.clearRect (385, 60, 50, 10); }  ` && |\n|  &&
-                          ` function myFunction( ) { alert( 'button pressed' ) }` && |\n|  &&
-                          ` function myFunction2( ) { sap.z2ui5.oView.getController().onEvent({ 'EVENT' : 'POST', 'METHOD' : 'UPDATE' }, ` && ' document.getElementById(sap.z2ui5.oView.createId( "input" )).value ' && ` ) }` && |\n|  &&
-                                                                    `</script> <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/barcodes/JsBarcode.code128.min.js"> </script>` &&
-*                                                    ` <z2ui5:MyCC change=" ` && client->_event( 'MYCC' ) && `"  value="` && client->_bind( mv_value ) && `"/>` && |\n|  &&
+                          `<body>`.
 
-                          `</body>` && |\n|  &&
-                          `</html> ` && |\n|  &&
-                            `</mvc:View>`.
+    IF mv_load_cc = abap_true.
+      mv_load_cc = abap_false.
+      app-next-xml_main = app-next-xml_main && get_js_custom_control( ).
+    ENDIF.
+
+    IF mv_display_cc = abap_true.
+      app-next-xml_main = app-next-xml_main && ` <z2ui5:MyCC change=" ` && client->_event( 'MYCC' ) && `"  value="` && client->_bind( mv_value ) && `"/>`.
+    ENDIF.
+
+    app-next-xml_main = app-next-xml_main && `</body>` && |\n|  &&
+      `</html> ` && |\n|  &&
+        `</mvc:View>`.
 
 
 
+  ENDMETHOD.
+
+  METHOD get_js_custom_control.
+
+    result = `<script>if(!z2ui5.MyCC){ jQuery.sap.declare("z2ui5.MyCC");` && |\n|  &&
+                            `    sap.ui.define( [` && |\n|  &&
+                            `        "sap/ui/core/Control",` && |\n|  &&
+                            `    ], function (Control) {` && |\n|  &&
+                            `        "use strict";` && |\n|  &&
+                            `        return Control.extend("z2ui5.MyCC", {` && |\n|  &&
+                            `            metadata: {` && |\n|  &&
+                            `                properties: {` && |\n|  &&
+                            `                    value: { type: "string" }` && |\n|  &&
+                            `                },` && |\n|  &&
+                            `                events: {` && |\n|  &&
+                            `                    "change": {` && |\n|  &&
+                            `                        allowPreventDefault: true,` && |\n|  &&
+                            `                        parameters: {}` && |\n|  &&
+                            `                    }` && |\n|  &&
+                            `                }` && |\n|  &&
+                            `            },` && |\n|  &&
+                            `            renderer: function (oRm, oControl) {` && |\n|  &&
+                            `                oControl.oInput = new sap.m.Input({` && |\n|  &&
+                            `                    value: oControl.getProperty("value")` && |\n|  &&
+                            `                });` && |\n|  &&
+                            `                oControl.oButton = new sap.m.Button({` && |\n|  &&
+                            `                    text: 'button text',` && |\n|  &&
+                            `                    press: function (oEvent) {` && |\n|  &&
+                            `                        debugger;` && |\n|  &&
+*                            `                        this.setProperty("value",  this.oInput._sTypedInValue )` && |\n|  &&
+                            `                        this.setProperty("value",  this.oInput.getProperty( 'value')  )` && |\n|  &&
+                            `                        this.fireChange();` && |\n|  &&
+                            `                    }.bind(oControl)` && |\n|  &&
+                            `                });` && |\n|  &&
+                           `                oRm.renderControl(oControl.oInput);` && |\n|  &&
+                            `                oRm.renderControl(oControl.oButton);` && |\n|  &&
+                            `            }` && |\n|  &&
+                            `    });` && |\n|  &&
+                            `}); } </script>`.
+
   ENDMETHOD.
 ENDCLASS.
diff --git a/src/00/z2ui5_cl_app_demo_39.clas.abap b/src/00/z2ui5_cl_app_demo_39.clas.abap
new file mode 100644
index 00000000..33577b99
--- /dev/null
+++ b/src/00/z2ui5_cl_app_demo_39.clas.abap
@@ -0,0 +1,208 @@
+CLASS z2ui5_cl_app_demo_39 DEFINITION PUBLIC.
+
+  PUBLIC SECTION.
+
+    INTERFACES z2ui5_if_app.
+
+    DATA mv_value    TYPE string.
+
+  PROTECTED SECTION.
+
+    DATA client TYPE REF TO z2ui5_if_client.
+    DATA:
+      BEGIN OF app,
+        check_initialized TYPE abap_bool,
+        get               TYPE z2ui5_if_client=>ty_s_get,
+        next              TYPE z2ui5_if_client=>ty_s_next,
+      END OF app.
+
+    METHODS z2ui5_on_init.
+    METHODS z2ui5_on_event.
+    METHODS z2ui5_on_render_main.
+    METHODS z2ui5_on_render_popup.
+
+  PRIVATE SECTION.
+ENDCLASS.
+
+
+
+CLASS z2ui5_cl_app_demo_39 IMPLEMENTATION.
+
+
+  METHOD z2ui5_if_app~controller.
+
+    app-get = client->get( ).
+    me->client = client.
+
+    IF app-check_initialized = abap_false.
+      app-check_initialized = abap_true.
+      z2ui5_on_init( ).
+    ENDIF.
+
+    IF app-get-event IS NOT INITIAL.
+      z2ui5_on_event( ).
+    ENDIF.
+
+    z2ui5_on_render_main( ).
+    z2ui5_on_render_popup( ).
+
+    client->set_next( app-next ).
+    CLEAR app-get.
+    CLEAR app-next.
+
+  ENDMETHOD.
+
+
+  METHOD z2ui5_on_event.
+
+    CASE app-get-event.
+
+      WHEN 'BACK'.
+        client->nav_app_leave( client->get_app( app-get-id_prev_app_stack ) ).
+      WHEN 'POPUP'.
+        client->popup_message_box( 'Event raised value:' && mv_value ).
+
+    ENDCASE.
+
+  ENDMETHOD.
+
+
+  METHOD z2ui5_on_init.
+
+    mv_value  = '200'.
+
+  ENDMETHOD.
+
+
+  METHOD z2ui5_on_render_main.
+
+    app-next-xml_main = `<mvc:View controllerName="sap.m.sample.GenericTileAsLaunchTile.Page"` && |\n|  &&
+                        `xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc"` && |\n|  &&
+                        `       xmlns:form="sap.ui.layout.form">` && |\n|  &&
+                        `       <form:SimpleForm editable="true" width="40rem">` && |\n|  &&
+                        `       <Label text="Loading time" />` && |\n|  &&
+                        `       <Input id="loadingMinSeconds" width="8rem" type="Number" description="seconds" value="-1"/>` && |\n|  &&
+                        `       <Button text="Start loading" type="Emphasized" press="onFormSubmit"/>` && |\n|  &&
+                        `   </form:SimpleForm>  ` && |\n|  &&
+                        `   <GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="Country-Specific Profit Margin"  press="onPress"` && |\n|  &&
+                        `       frameType="OneByHalf" subheader="Subtitle">` && |\n|  &&
+                        `       <TileContent>` && |\n|  &&
+                        `           <ImageContent src="test-resources/sap/m/demokit/sample/GenericTileAsLaunchTile/images/SAPLogoLargeTile_28px_height.png" />` && |\n|  &&
+                        `       </TileContent>` && |\n|  &&
+                        `   </GenericTile>` && |\n|  &&
+                        |\n|  &&
+                        `   <GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="Sales Fulfillment Application Title"` && |\n|  &&
+                        `       subheader="Subtitle" press="press" frameType= "TwoByHalf">` && |\n|  &&
+                        `       <TileContent />` && |\n|  &&
+                        `   </GenericTile>` && |\n|  &&
+                        |\n|  &&
+                        `   <GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="Manage Activity Master Data Type"` && |\n|  &&
+                        `       subheader="Subtitle" press="press" frameType= "TwoByHalf">` && |\n|  &&
+                        `       <TileContent unit="EUR" footer="Current Quarter">` && |\n|  &&
+                        `           <ImageContent src="sap-icon://home-share" />` && |\n|  &&
+                        `       </TileContent>` && |\n|  &&
+                        `   </GenericTile>` && |\n|  &&
+                        |\n|  &&
+                        `   <GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="Right click to open in new tab"` && |\n|  &&
+                        `       subheader="Link tile" press="press" url="https://www.sap.com/">` && |\n|  &&
+                        `       <TileContent>` && |\n|  &&
+                        `           <ImageContent src="test-resources/sap/m/demokit/sample/GenericTileAsLaunchTile/images/SAPLogoLargeTile_28px_height.png" />` && |\n|  &&
+                        `       </TileContent>` && |\n|  &&
+                        `   </GenericTile>` && |\n|  &&
+                        |\n|  &&
+                        `   <GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="Sales Fulfillment Application Title"` && |\n|  &&
+                        `       subheader="Subtitle" press="press">` && |\n|  &&
+                        `       <TileContent unit="EUR" footer="Current Quarter">` && |\n|  &&
+                        `           <ImageContent src="sap-icon://home-share" />` && |\n|  &&
+                        `       </TileContent>` && |\n|  &&
+                        `   </GenericTile>` && |\n|  &&
+                        |\n|  &&
+                        `   <GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="Manage Activity Master Data Type"` && |\n|  &&
+                        `       subheader="Subtitle" press="press">` && |\n|  &&
+                        `       <TileContent>` && |\n|  &&
+                        `           <ImageContent src="test-resources/sap/m/demokit/sample/GenericTileAsLaunchTile/images/SAPLogoLargeTile_28px_height.png" />` && |\n|  &&
+                        `       </TileContent>` && |\n|  &&
+                        `   </GenericTile>` && |\n|  &&
+                        |\n|  &&
+                        `   <GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="Manage Activity Master Data Type With a Long Title Without an Icon"` && |\n|  &&
+                        `       subheader="Subtitle Launch Tile" mode="HeaderMode" press="press">` && |\n|  &&
+                        `       <TileContent unit="EUR" footer="Current Quarter" />` && |\n|  &&
+                        `   </GenericTile>` && |\n|  &&
+                        |\n|  &&
+                        `   <GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="Jessica D. Prince Senior Consultant"` && |\n|  &&
+                        `       subheader="Department" press="press" appShortcut = "shortcut" systemInfo = "systeminfo">` && |\n|  &&
+                        `       <TileContent>` && |\n|  &&
+                        `           <ImageContent src="test-resources/sap/m/demokit/sample/GenericTileAsLaunchTile/images/ProfileImage_LargeGenTile.png" />` && |\n|  &&
+                        `       </TileContent>` && |\n|  &&
+                        `   </GenericTile>` && |\n|  &&
+                        |\n|  &&
+                        `   <GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="Sales Fulfillment Application Title"` && |\n|  &&
+                        `       press="press" frameType= "OneByHalf">` && |\n|  &&
+                        `       <TileContent unit="EUR" footer="Current Quarter">` && |\n|  &&
+                        `       </TileContent>` && |\n|  &&
+                        `   </GenericTile>` && |\n|  &&
+                        |\n|  &&
+                        `   <GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="Sales Fulfillment Application Title"` && |\n|  &&
+                        `       press="press" frameType= "TwoByHalf">` && |\n|  &&
+                        `       <TileContent unit="EUR" footer="Current Quarter">` && |\n|  &&
+                        `       </TileContent>` && |\n|  &&
+                        `   </GenericTile>` && |\n|  &&
+                        |\n|  &&
+                        `   <GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="Jessica D. Prince Senior Consultant"` && |\n|  &&
+                        `       subheader="Department" press="press" frameType="TwoByHalf">` && |\n|  &&
+                        `       <TileContent>` && |\n|  &&
+                        `           <ImageContent src="test-resources/sap/m/demokit/sample/GenericTileAsLaunchTile/images/ProfileImage_LargeGenTile.png" />` && |\n|  &&
+                        `       </TileContent>` && |\n|  &&
+                        `   </GenericTile>` && |\n|  &&
+                        `</mvc:View>`.
+
+
+  ENDMETHOD.
+
+
+  METHOD z2ui5_on_render_popup.
+
+    app-next-xml_popup = `<core:FragmentDefinition` && |\n|  &&
+                         `  xmlns="sap.m"` && |\n|  &&
+                         `  xmlns:core="sap.ui.core">` && |\n|  &&
+                         `  <ViewSettingsDialog` && |\n|  &&
+                         `      confirm="handleConfirm">` && |\n|  &&
+                         `      <sortItems>` && |\n|  &&
+                         `          <ViewSettingsItem text="Field 1" key="1" selected="true" />` && |\n|  &&
+                         `          <ViewSettingsItem text="Field 2" key="2" />` && |\n|  &&
+                         `          <ViewSettingsItem text="Field 3" key="3" />` && |\n|  &&
+                         `      </sortItems>` && |\n|  &&
+                         `      <groupItems>` && |\n|  &&
+                         `          <ViewSettingsItem text="Field 1" key="1" selected="true" />` && |\n|  &&
+                         `          <ViewSettingsItem text="Field 2" key="2" />` && |\n|  &&
+                         `          <ViewSettingsItem text="Field 3" key="3" />` && |\n|  &&
+                         `      </groupItems>` && |\n|  &&
+                         `      <filterItems>` && |\n|  &&
+                         `          <ViewSettingsFilterItem text="Field1" key="1">` && |\n|  &&
+                         `              <items>` && |\n|  &&
+                         `                  <ViewSettingsItem text="Value A" key="1a" />` && |\n|  &&
+                         `                  <ViewSettingsItem text="Value B" key="1b" />` && |\n|  &&
+                         `                  <ViewSettingsItem text="Value C" key="1c" />` && |\n|  &&
+                         `              </items>` && |\n|  &&
+                         `          </ViewSettingsFilterItem>` && |\n|  &&
+                         `          <ViewSettingsFilterItem text="Field2" key="2">` && |\n|  &&
+                         `              <items>` && |\n|  &&
+                         `                  <ViewSettingsItem text="Value A" key="2a" />` && |\n|  &&
+                         `                  <ViewSettingsItem text="Value B" key="2b" />` && |\n|  &&
+                         `                  <ViewSettingsItem text="Value C" key="2c" />` && |\n|  &&
+                         `              </items>` && |\n|  &&
+                         `          </ViewSettingsFilterItem>` && |\n|  &&
+                         `          <ViewSettingsFilterItem text="Field3" key="3">` && |\n|  &&
+                         `              <items>` && |\n|  &&
+                         `                  <ViewSettingsItem text="Value A" key="3a" />` && |\n|  &&
+                         `                  <ViewSettingsItem text="Value B" key="3b" />` && |\n|  &&
+                         `                  <ViewSettingsItem text="Value C" key="3c" />` && |\n|  &&
+                         `              </items>` && |\n|  &&
+                         `          </ViewSettingsFilterItem>` && |\n|  &&
+                         `      </filterItems>` && |\n|  &&
+                         `  </ViewSettingsDialog>` && |\n|  &&
+                         `</core:FragmentDefinition>`.
+
+  ENDMETHOD.
+
+ENDCLASS.
diff --git a/src/00/z2ui5_cl_app_demo_39.clas.xml b/src/00/z2ui5_cl_app_demo_39.clas.xml
new file mode 100644
index 00000000..41264b95
--- /dev/null
+++ b/src/00/z2ui5_cl_app_demo_39.clas.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<abapGit version="v1.0.0" serializer="LCL_OBJECT_CLAS" serializer_version="v1.0.0">
+ <asx:abap xmlns:asx="http://www.sap.com/abapxml" version="1.0">
+  <asx:values>
+   <VSEOCLASS>
+    <CLSNAME>Z2UI5_CL_APP_DEMO_39</CLSNAME>
+    <LANGU>E</LANGU>
+    <DESCRIPT>extension - import xml view 2</DESCRIPT>
+    <STATE>1</STATE>
+    <CLSCCINCL>X</CLSCCINCL>
+    <FIXPT>X</FIXPT>
+    <UNICODE>X</UNICODE>
+   </VSEOCLASS>
+  </asx:values>
+ </asx:abap>
+</abapGit>
diff --git a/src/00/z2ui5_cl_app_demo_40.clas.abap b/src/00/z2ui5_cl_app_demo_40.clas.abap
new file mode 100644
index 00000000..08d189c2
--- /dev/null
+++ b/src/00/z2ui5_cl_app_demo_40.clas.abap
@@ -0,0 +1,117 @@
+CLASS z2ui5_cl_app_demo_40 DEFINITION PUBLIC.
+
+  PUBLIC SECTION.
+
+    INTERFACES z2ui5_if_app.
+
+    DATA mv_barcode TYPE string.
+    DATA mv_load_lib TYPE abap_bool.
+  PROTECTED SECTION.
+
+    DATA client TYPE REF TO z2ui5_if_client.
+    DATA:
+      BEGIN OF app,
+        check_initialized TYPE abap_bool,
+        view_main         TYPE string,
+        view_popup        TYPE string,
+        get               TYPE z2ui5_if_client=>ty_s_get,
+        next              TYPE z2ui5_if_client=>ty_s_next,
+      END OF app.
+
+    METHODS z2ui5_on_init.
+    METHODS z2ui5_on_event.
+    METHODS z2ui5_on_render.
+
+  PRIVATE SECTION.
+ENDCLASS.
+
+
+
+CLASS z2ui5_cl_app_demo_40 IMPLEMENTATION.
+
+
+  METHOD z2ui5_if_app~controller.
+
+    me->client = client.
+    app-get      = client->get( ).
+    app-view_popup = ``.
+
+    IF app-check_initialized = abap_false.
+      app-check_initialized = abap_true.
+      z2ui5_on_init( ).
+    ENDIF.
+
+    IF app-get-event IS NOT INITIAL.
+      z2ui5_on_event( ).
+    ENDIF.
+
+    z2ui5_on_render( ).
+
+    client->set_next( app-next ).
+    CLEAR app-get.
+    CLEAR app-next.
+
+  ENDMETHOD.
+
+
+  METHOD z2ui5_on_event.
+
+    CASE app-get-event.
+
+      WHEN 'LOAD_BC'.
+        client->popup_message_box( 'JSBarcode Library loaded').
+        mv_load_lib = abap_true.
+
+      WHEN 'BACK'.
+        client->nav_app_leave( client->get_app( app-get-id_prev_app_stack ) ).
+
+    ENDCASE.
+
+  ENDMETHOD.
+
+
+  METHOD z2ui5_on_init.
+
+
+
+  ENDMETHOD.
+
+
+  METHOD z2ui5_on_render.
+
+    app-next-xml_main = `<mvc:View controllerName="project1.controller.View1"` && |\n|  &&
+                          `    xmlns:mvc="sap.ui.core.mvc" displayBlock="true"` && |\n|  &&
+                          `  xmlns:z2ui5="z2ui5"  xmlns:m="sap.m" xmlns="http://www.w3.org/1999/xhtml"` && |\n|  &&
+                          `    ><m:Button ` && |\n|  &&
+                          `  text="back" ` && |\n|  &&
+                          `  press="` && client->_event( 'BACK' ) && `" ` && |\n|  &&
+                          `  class="sapUiContentPadding sapUiResponsivePadding--content"/> ` && |\n|  &&
+                   `       <m:Link target="_blank" text="Source_Code" href="` && z2ui5_cl_xml_view_helper=>hlp_get_source_code_url( app = me get = client->get( ) ) && `"/>` && |\n|  &&
+
+                          `<html><head>` && |\n|  &&
+                          `</head>` && |\n|  &&
+                          `<body>` && |\n|  &&
+                          `<m:Button text="LoadJSBarcode" press="` && client->_event( 'LOAD_BC' ) && `" />` && |\n|  &&
+                          `<m:Input value="` && client->_bind( mv_barcode ) && `" />` && |\n|  &&
+                         `<m:Button text="Display Barcode" press="` && client->_event( 'DISPLAY_BC' ) && `" />` && |\n|  &&
+                          `<h1>JSBarcode Library</h1>` && |\n|  &&
+                          `  <svg class="barcode"` && |\n|  &&
+                          `  jsbarcode-format="upc"` && |\n|  &&
+                          `  jsbarcode-value="` && mv_barcode && `"` && |\n|  &&
+                          `  jsbarcode-textmargin="0"` && |\n|  &&
+                          `  jsbarcode-fontoptions="bold">` && |\n|  &&
+                          `</svg>` && |\n|.
+    IF mv_load_lib = abap_true.
+      mv_load_lib = abap_false.
+      app-next-xml_main = app-next-xml_main && `<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"> </script>`.
+    ENDIF.
+
+    app-next-xml_main = app-next-xml_main && `<script> JsBarcode(".barcode").init(); </script>` &&
+           `</body>` && |\n|  &&
+           `</html> ` && |\n|  &&
+             `</mvc:View>`.
+
+
+
+  ENDMETHOD.
+ENDCLASS.
diff --git a/src/00/z2ui5_cl_app_demo_29.clas.locals_imp.abap b/src/00/z2ui5_cl_app_demo_40.clas.locals_imp.abap
similarity index 100%
rename from src/00/z2ui5_cl_app_demo_29.clas.locals_imp.abap
rename to src/00/z2ui5_cl_app_demo_40.clas.locals_imp.abap
diff --git a/src/00/z2ui5_cl_app_demo_29.clas.xml b/src/00/z2ui5_cl_app_demo_40.clas.xml
similarity index 80%
rename from src/00/z2ui5_cl_app_demo_29.clas.xml
rename to src/00/z2ui5_cl_app_demo_40.clas.xml
index 88d20c6c..aab3b409 100644
--- a/src/00/z2ui5_cl_app_demo_29.clas.xml
+++ b/src/00/z2ui5_cl_app_demo_40.clas.xml
@@ -3,9 +3,9 @@
  <asx:abap xmlns:asx="http://www.sap.com/abapxml" version="1.0">
   <asx:values>
    <VSEOCLASS>
-    <CLSNAME>Z2UI5_CL_APP_DEMO_29</CLSNAME>
+    <CLSNAME>Z2UI5_CL_APP_DEMO_40</CLSNAME>
     <LANGU>E</LANGU>
-    <DESCRIPT>extension - html js css</DESCRIPT>
+    <DESCRIPT>extension - ext library</DESCRIPT>
     <STATE>1</STATE>
     <CLSCCINCL>X</CLSCCINCL>
     <FIXPT>X</FIXPT>