diff --git a/buildoz.code-workspace b/buildoz.code-workspace
new file mode 100644
index 0000000..362d7c2
--- /dev/null
+++ b/buildoz.code-workspace
@@ -0,0 +1,7 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	]
+}
\ No newline at end of file
diff --git a/buildoz.css b/buildoz.css
index ad8e396..367caee 100644
--- a/buildoz.css
+++ b/buildoz.css
@@ -1,3 +1,34 @@
+dialog.bz-modal-dialog{
+    padding: 0;
+    border: 2px solid #050;
+    border-radius: 5px;
+    min-width: 15em;
+}
+
+dialog.bz-modal-dialog header{
+    background: #050;
+    text-align: center;
+    color: white;
+    padding: .5em;
+}
+
+dialog.bz-modal-dialog section{
+    padding: .5em;
+}
+
+dialog.bz-modal-dialog footer{
+    border-top: 1px solid #CCC;
+    padding: .5em;
+    justify-content: center;
+    display: grid;
+    grid-template-columns: auto auto;
+    grid-gap: 2em;    
+}
+
+dialog.bz-modal-dialog footer button{
+    min-width: 5em;
+}
+
 bz-select {
     display: block;
     margin: .5em 0 .5em 0;
diff --git a/buildoz.js b/buildoz.js
index ad0aefd..c44f20d 100644
--- a/buildoz.js
+++ b/buildoz.js
@@ -11,6 +11,48 @@
  * as long as the copyright notice and license are kept.
  */
 
+function BZModalDialog(title, message) {
+    const getFields = (dlg) => {
+        const form = dlg.querySelector('form')
+        if (!form) return {}
+        const fd = new FormData(form)
+        const out = {}
+        for (const [key, value] of fd.entries()) {
+            if (Object.prototype.hasOwnProperty.call(out, key)) {
+                out[key] = Array.isArray(out[key]) ? [...out[key], value] : [out[key], value]
+            } else {
+                out[key] = value
+            }
+        }
+        return out
+    }
+    return new Promise(resolve => {
+        const dlg = document.createElement('dialog')
+        dlg.classList.add('bz-modal-dialog')
+        dlg.innerHTML = `
+            <form method="dialog">
+                <header>${title}</header>
+                <section>${message}</section>
+                <footer>
+                    <button value="cancel">Cancel</button>
+                    <button value="ok">OK</button>
+                </footer>
+            </form>
+        `
+        dlg.addEventListener('close', () => {
+            const ok = dlg.returnValue.toLowerCase() === 'ok'
+            if(ok) {
+                resolve(getFields(dlg))
+            } else {
+                resolve(ok)
+            }
+            dlg.remove()
+        })
+        document.body.appendChild(dlg)
+        dlg.showModal()
+    })
+}
+
 class Buildoz extends HTMLElement {
 
     // static is evaluated when the class is defined, therefore while buildoz.js is executing.
@@ -386,4 +428,3 @@ class BZslidePane extends Buildoz {
     }
 }
 Buildoz.define('slidepane', BZslidePane)
-
diff --git a/bzGraflow-editor.js b/bzGraflow-editor.js
index 97e2872..aadce20 100644
--- a/bzGraflow-editor.js
+++ b/bzGraflow-editor.js
@@ -106,8 +106,10 @@ window.debugEditor = this
                 </section>
             </div>
         `
-        this.slidePane.querySelector('button[data-trigger="onExportFlow"]').addEventListener('click', this.onExportFlow.bind(this))
-        this.slidePane.querySelector('button[data-trigger="onImportFlow"]').addEventListener('click', this.onImportFlow.bind(this))
+        this.onImportFlow = this.onImportFlow.bind(this)
+        this.onExportFlow = this.onExportFlow.bind(this)
+        this.slidePane.querySelector('button[data-trigger="onExportFlow"]').addEventListener('click', (e) => this.onExportFlow(e)) // indirect so override works !
+        this.slidePane.querySelector('button[data-trigger="onImportFlow"]').addEventListener('click', (e) => this.onImportFlow(e))// indirect so override works !
     }
 
     refreshNodes(e){
diff --git a/bzGraflow.js b/bzGraflow.js
index 841b59e..3682346 100644
--- a/bzGraflow.js
+++ b/bzGraflow.js
@@ -762,7 +762,6 @@ class BZgraflow extends Buildoz{
                         y = ((maxHeight - layerHeights[idx]) / 2) + gapy
                         break
                 }
-                console.log('======>',gapy, y)
                 for(const nid of layer){
                     let placedY
                     if(!nid.startsWith('longLinkPlaceHolder_')) {
diff --git a/graflow_examples/etest2.html b/graflow_examples/etest2.html
new file mode 100644
index 0000000..cc44b4c
--- /dev/null
+++ b/graflow_examples/etest2.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>graflow</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link type="text/css" rel="stylesheet" href="../../eicui/eicui-2.0.css">
+        <link type="text/css" rel="stylesheet" href="../buildoz.css">
+        <script src="../buildoz.js"></script>      
+        <script src="../bzGraflow.js"></script>
+        <script src="../bzGraflow-editor.js"></script>
+        <style>
+            @font-face { /*FF does not indirectly load if inside a shawdow-dom */
+                font-family: 'glyphs';
+                src:  url('/assets/styles/fonts/glyphs.eot');
+                src:  url('/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
+                    url('/assets/styles/fonts/glyphs.ttf') format('truetype'),
+                    url('/assets/styles/fonts/glyphs.woff') format('woff'),
+                    url('/assets/styles/fonts/glyphs.svg') format('svg');
+                font-weight: normal;
+                font-style: normal;
+                font-display: block;
+            }
+            body{
+                display: grid;
+                grid-gap: 5px;
+                background:#888; 
+                font-size: 16px;
+            }           
+            bz-graflow{
+                border: 2px solid black;
+            }
+            bz-graflow.compunet{ grid-column: 1 / -1; width: 100vw; height: 60vh; background:black; }
+          </style>
+        <script>
+            window.addEventListener('load',()=>{
+                const editor = document.querySelector('bz-grafloweditor')
+                editor.onImportFlow = async (e) => {
+                    const fileList = ['testFlow1', 'testFlow2', 'testFlow3']
+                    const result = await BZModalDialog('Select your flow...', `
+                        Available flows:
+                        <select name="flow" style="min-width: 10em;justify-self: center;">
+                            ${fileList.map(file => `<option value="${file}">${file}</option>`).join('')}
+                        </select>
+                    `)
+                    console.log('result', result)
+                }
+                editor.onExportFlow = (e) => {
+                    console.log('onExportFlow')
+                }
+            })
+        </script>
+	</head>
+
+	<body>
+        <bz-grafloweditor nodes="./nodesLib/nodesTest1.html" >
+        </bz-grafloweditor>
+	</body>
+
+</html>
diff --git a/graflow_examples/test.html b/graflow_examples/test.html
index 615b71e..1812668 100644
--- a/graflow_examples/test.html
+++ b/graflow_examples/test.html
@@ -134,13 +134,24 @@
                 <tr>
                     <th></th>
                     <th>Style</th>
+                    <th>Import / Export</th>
                 </tr>
             </thead>
             <tbody>
                 <tr>
-                    <td><a target="etest1" href="./etest1.html">Editor test</a></td>
+                    <td><a target="etest1" href="./etest1.html">Editor test 1</a></td>
                     <td>P42</td>
+                    <td>JSON local file</td>
                 </tr>
+                <tr>
+                    <td><a target="etest2" href="./etest2.html">Editor test 2</a></td>
+                    <td>EIC</td>
+                    <td>API to MySQL</tr>
+                </tr>
+                <!-- <tr>
+                    <td><a target="etest3" href="./etest3.html">Editor test 3</a></td>
+                    <td>16 ports</td>
+                </tr> -->
             </tbody>
         </table>
 	</body>