[erp5_officejs] port notebook to gadget_jsmd_eval and add pdf conversion

bt5/erp5_officejs/PathTemplateItem/web_page_module/gadget_officejs_jio_notebook_view.html.xml → bt5/erp5_officejs/PathTemplateItem/web_page_module/gadget_officejs_jio_notebook_view_html.xml

@@ -91,7 +91,7 @@
         </item>
         <item>
             <key> <string>id</string> </key>
-            <value> <string>gadget_officejs_jio_notebook_view.html</string> </value>
+            <value> <string>gadget_officejs_jio_notebook_view_html</string> </value>
         </item>
         <item>
             <key> <string>language</string> </key>
@@ -248,7 +248,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>969.37889.56311.25753</string> </value>
+                <value> <string>978.51175.28075.44014</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -266,7 +266,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1534254952.0</float>
+                        <float>1569848367.78</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_officejs/PathTemplateItem/web_page_module/gadget_officejs_jio_notebook_view.js.js → bt5/erp5_officejs/PathTemplateItem/web_page_module/gadget_officejs_jio_notebook_view_js.js

-/*global window, rJS, RSVP */
+/*global window, jIO, rJS, RSVP, Blob */
 /*jslint nomen: true, indent: 2, maxerr: 3 */
-(function (window, rJS, RSVP) {
+(function (window, jIO, rJS, RSVP, Blob) {
+
   "use strict";
 
   rJS(window)
+
     /////////////////////////////////////////////////////////////////
     // Acquired methods
     /////////////////////////////////////////////////////////////////
     .declareAcquiredMethod("updateHeader", "updateHeader")
-    .declareAcquiredMethod("getUrlParameter", "getUrlParameter")
+    .declareAcquiredMethod("jio_getAttachment", "jio_getAttachment")
+    .declareAcquiredMethod("jio_putAttachment", "jio_putAttachment")
+    .declareAcquiredMethod("getSetting", "getSetting")
     .declareAcquiredMethod("getUrlFor", "getUrlFor")
     .declareAcquiredMethod("updateDocument", "updateDocument")
     .declareAcquiredMethod("notifySubmitting", "notifySubmitting")
@@ -19,14 +23,19 @@
     /////////////////////////////////////////////////////////////////
 
     .declareMethod("render", function (options) {
-      return this.changeState({
-        jio_key: options.jio_key,
-        doc: options.doc
+
+      var gadget = this;
+      return new RSVP.Queue()
+      .push(function () {
+        return gadget.changeState({
+          jio_key: options.jio_key,
+          doc: options.doc
+        });
       });
     })
 
     .onEvent('submit', function () {
-      var gadget = this;
+      var gadget = this, data;
       return gadget.notifySubmitting()
         .push(function () {
           return gadget.getDeclaredGadget('form_view');
@@ -35,7 +44,19 @@
           return form_gadget.getContent();
         })
         .push(function (content) {
-          return gadget.updateDocument(content);
+          data = content.text_content;
+          delete content.text_content;
+          return RSVP.all([
+            gadget.getSetting("content_type"),
+            gadget.updateDocument(content)
+          ]);
+        })
+        .push(function (result_list) {
+          return gadget.jio_putAttachment(
+            gadget.state.jio_key,
+            "data",
+            new Blob([data], {type: result_list[0]})
+          );
         })
         .push(function () {
           return gadget.notifySubmitted({message: 'Data Updated', status: 'success'});
@@ -47,8 +68,21 @@
     })
 
     .onStateChange(function () {
-      var gadget = this;
-      return gadget.getDeclaredGadget('form_view')
+      var gadget = this, data;
+      return gadget.jio_getAttachment(gadget.state.jio_key, "data")
+        .push(undefined, function (error) {
+          if (error instanceof jIO.util.jIOError && error.status_code === 404) {
+            return new Blob();
+          }
+          throw error;
+        })
+        .push(function (blob) {
+          return jIO.util.readBlobAsText(blob);
+        })
+        .push(function (evt) {
+          data = evt.target.result;
+          return gadget.getDeclaredGadget('form_view');
+        })
         .push(function (form_gadget) {
           return form_gadget.render({
             erp5_document: {
@@ -109,7 +143,7 @@
                   "type": "TextAreaField"
                 },
                 "my_content": {
-                  "default": gadget.state.doc.text_content,
+                  "default": data,
                   "css_class": "",
                   "required": 0,
                   "editable": 1,
@@ -118,7 +152,7 @@
                   "type": "GadgetField",
                   "url": "gadget_editor.html",
                   "sandbox": "public",
-                  "renderjs_extra": '{"editor": "notebook_editor", "maximize": true}'
+                  "renderjs_extra": '{"editor": "jsmd_editor", "maximize": true}'
                 }
               }},
               "_links": {
@@ -152,7 +186,7 @@
             gadget.getUrlFor({command: 'selection_next'}),
             gadget.getUrlFor({
               command: 'change',
-              options: {'page': "ojs_download"}
+              options: {'page': 'ojs_notebook_export'}
             })
           ]);
         })
@@ -160,11 +194,11 @@
           return gadget.updateHeader({
             page_title: gadget.state.doc.title,
             save_action: true,
+            export_url: url_list[3],
             selection_url: url_list[0],
             previous_url: url_list[1],
-            next_url: url_list[2],
-            download_url: url_list[3]
+            next_url: url_list[2]
           });
         });
     });
-}(window, rJS, RSVP));
+}(window, jIO, rJS, RSVP, Blob));

bt5/erp5_officejs/PathTemplateItem/web_page_module/gadget_officejs_jio_notebook_view.js.xml → bt5/erp5_officejs/PathTemplateItem/web_page_module/gadget_officejs_jio_notebook_view_js.xml

@@ -87,7 +87,7 @@
         </item>
         <item>
             <key> <string>id</string> </key>
-            <value> <string>gadget_officejs_jio_notebook_view.js</string> </value>
+            <value> <string>gadget_officejs_jio_notebook_view_js</string> </value>
         </item>
         <item>
             <key> <string>language</string> </key>
@@ -244,7 +244,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>970.42986.60138.7065</string> </value>
+                <value> <string>978.54387.27074.52445</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -262,7 +262,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1538406432.04</float>
+                        <float>1569943229.61</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_officejs/PathTemplateItem/web_page_module/gadget_officejs_notebook.appcache.xml

@@ -111,7 +111,7 @@
         <item>
             <key> <string>text_content</string> </key>
             <value> <string>CACHE MANIFEST\n
-# generated on Fri, 01 Feb 2019 11:45:33 +0000\n
+# generated on Fri, 31 Sep 2019 16:47:33 +0000\n
 # XXX + fonts\n
 # images/ajax-loader.gif\n
 CACHE:\n
@@ -122,42 +122,43 @@ nexedi_logo_officejs_iodide.svg\n
 gadget_officejs_notebook_router.html\n
 gadget_officejs_jio_notebook_view.html\n
 gadget_officejs_jio_notebook_view.js\n
-gadget_officejs_jio_notebook.js\n
 gadget_erp5_page_ojs_upload.js\n
 gadget_erp5_page_ojs_upload.html\n
 gadget_erp5_page_ojs_download.js\n
 gadget_erp5_page_ojs_download.html\n
 gadget_erp5_page_ojs_notebook_list.js\n
 gadget_erp5_page_ojs_notebook_list.html\n
-gadget_notebook.html\n
-iodide_master.js\n
-iodide_master.css\n
-pyodide.js\n
-pyodide.asm.data.js\n
-pyodide.asm.js\n
-pyodide.asm.wasm\n
-pyodide.asm.data\n
+gadget_erp5_page_ojs_notebook_export.html\n
+gadget_erp5_page_ojs_notebook_export.js\n
+gadget_jsmd_viewer.css\n
+gadget_jsmd_viewer.html\n
+gadget_jsmd_viewer.js\n
+gadget_jsmd_eval.html\n
+gadget_jsmd_eval.js\n
+gadget_jsmd_eval.css\n
+iodide_utils.js\n
+marked.js\n
 cycler.data\n
 cycler.js\n
 kiwisolver.data\n
 kiwisolver.js\n
-matplotlib.data\n
 matplotlib.js\n
-numpy.data\n
+matplotlib.data\n
 numpy.js\n
+numpy.data\n
 packages.json\n
-pandas.data\n
 pandas.js\n
+pyodide.asm.js\n
 pyodide.asm.html\n
-pyodide.py\n
+pyodide.asm.data.js\n
+pyodide.asm.data\n
+pyodide.asm.wasm\n
 pyparsing.data\n
 pyparsing.js\n
 python-dateutil.data\n
 python-dateutil.js\n
-python.html\n
 pytz.data\n
 pytz.js\n
-renderedhtml.css\n
 xlrd.data\n
 xlrd.js\n
 \n
@@ -213,10 +214,18 @@ gadget_erp5_page_ojs_sync.html\n
 gadget_erp5_page_ojs_sync.js\n
 gadget_erp5_page_ojs_document_list.html\n
 gadget_erp5_page_ojs_document_list.js\n
+gadget_erp5_page_ojs_download_convert.html\n
+gadget_erp5_page_ojs_download_convert.js\n
 gadget_ojs_configurator_access.html\n
 gadget_ojs_configurator_access.js\n
+gadget_cloudooo.html\n
+gadget_cloudooo.js\n
+gadget_ojs_cloudooo.html\n
+gadget_ojs_cloudooo.js\n
 gadget_html5_input.html\n
 gadget_html5_input.js\n
+gadget_html5_select.html\n
+gadget_html5_select.js\n
 gadget_erp5_field_multicheckbox.html\n
 gadget_erp5_field_multicheckbox.js\n
 gadget_erp5_searchfield.html\n
@@ -229,6 +238,8 @@ gadget_erp5_form.html\n
 gadget_erp5_form.js\n
 gadget_erp5_label_field.html\n
 gadget_erp5_label_field.js\n
+gadget_erp5_field_list.html\n
+gadget_erp5_field_list.js\n
 gadget_erp5_field_listbox.html\n
 gadget_erp5_field_listbox.js\n
 gadget_erp5_field_datetime.html\n
@@ -408,7 +419,7 @@ NETWORK:\n
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>973.33482.4166.8669</string> </value>
+                <value> <string>978.55949.43799.1706</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -426,7 +437,7 @@ NETWORK:\n
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1549888313.28</float>
+                        <float>1570036732.12</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_officejs/PathTemplateItem/web_page_module/gadget_officejs_notebook_router.html.html

@@ -18,7 +18,10 @@
     <script data-renderjs-configuration="document_title" type="text/x-renderjs-configuration">Notebook</script>
     <script data-renderjs-configuration="document_title_plural" type="text/x-renderjs-configuration">Notebooks</script>
     <script data-renderjs-configuration="parent_relative_url" type="text/x-renderjs-configuration">notebook_module</script>
-    <script data-renderjs-configuration="erp5_attachment_synchro" type="text/x-renderjs-configuration"></script>
+    <script data-renderjs-configuration="erp5_attachment_synchro" type="text/x-renderjs-configuration">/{+id}/Base_downloadWithCors</script>
+    <script data-renderjs-configuration="content_type" type="text/x-renderjs-configuration">text/plain</script>
+    <script data-renderjs-configuration="file_extension" type="text/x-renderjs-configuration">txt</script>
+    <script data-renderjs-configuration="conversion_dict" type="text/x-renderjs-configuration">{"txt": ["html", "pdf"]}</script>
     <script data-renderjs-configuration="upload_dict" type="text/x-renderjs-configuration">{"txt": "txt", "html": "html"}</script>
     <script data-renderjs-configuration="dropbox_app_key" type="text/x-renderjs-configuration">82g9eir551nhovs</script>
     <div data-gadget-url="gadget_erp5_router.html" data-gadget-scope="erp5_router"></div>

bt5/erp5_officejs/PathTemplateItem/web_page_module/gadget_officejs_notebook_router.html.xml

@@ -278,7 +278,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>970.52955.27100.34065</string> </value>
+                <value> <string>978.54044.24924.10990</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -296,7 +296,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1539094329.81</float>
+                        <float>1569942688.43</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_officejs/PathTemplateItem/web_page_module/ojs_gadget_cloudooo_js.js

@@ -117,7 +117,7 @@
           ]);
         })
         .push(function (result) {
-          return jio_gadget.putAttachment(options.id, options.name, result[0]);
+          return jio_gadget.putAttachment(options.id, options.name, result[0], options.conversion_kw);
         })
         .push(function () {
           return jio_gadget.getAttachment(options.id, options.name);

bt5/erp5_officejs/PathTemplateItem/web_page_module/ojs_gadget_cloudooo_js.xml

@@ -269,7 +269,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>969.46608.54855.3123</string> </value>
+                <value> <string>977.28694.830.42120</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -287,7 +287,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1534778298.94</float>
+                        <float>1567086325.95</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_officejs/PathTemplateItem/web_page_module/ojs_gadget_erp5_page_ojs_notebook_export_html.html

+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>OfficeJS Jio Notebook View</title>
+
+    <script src="rsvp.js"></script>
+    <script src="renderjs.js"></script>
+    <script src="gadget_erp5_page_ojs_notebook_export.js"></script>
+
+  </head>
+
+  <body>
+    <form class="save_form ui-body-c" novalidate>
+      <button type="submit" class="ui-btn ui-btn-b ui-btn-inline
+        ui-icon-edit ui-btn-icon-right ui-screen-hidden"></button>
+      <div data-gadget-url="gadget_erp5_form.html"
+              data-gadget-scope="form_view"
+              data-gadget-sandbox="public">
+      </div>
+      <div data-gadget-url="gadget_ojs_cloudooo.html"
+           data-gadget-scope="ojs_cloudooo"
+           data-gadget-sandbox="public">
+    </div>
+    </form>
+  </body>
+</html>

bt5/erp5_officejs/PathTemplateItem/web_page_module/ojs_gadget_erp5_page_ojs_notebook_export_html.xml

+<?xml version="1.0"?>
+<ZopeData>
+  <record id="1" aka="AAAAAAAAAAE=">
+    <pickle>
+      <global name="Web Page" module="erp5.portal_type"/>
+    </pickle>
+    <pickle>
+      <dictionary>
+        <item>
+            <key> <string>_Access_contents_information_Permission</string> </key>
+            <value>
+              <tuple>
+                <string>Anonymous</string>
+                <string>Assignee</string>
+                <string>Assignor</string>
+                <string>Associate</string>
+                <string>Auditor</string>
+                <string>Manager</string>
+              </tuple>
+            </value>
+        </item>
+        <item>
+            <key> <string>_Add_portal_content_Permission</string> </key>
+            <value>
+              <tuple>
+                <string>Assignee</string>
+                <string>Assignor</string>
+                <string>Manager</string>
+              </tuple>
+            </value>
+        </item>
+        <item>
+            <key> <string>_Change_local_roles_Permission</string> </key>
+            <value>
+              <tuple>
+                <string>Assignor</string>
+                <string>Manager</string>
+              </tuple>
+            </value>
+        </item>
+        <item>
+            <key> <string>_Modify_portal_content_Permission</string> </key>
+            <value>
+              <tuple>
+                <string>Assignee</string>
+                <string>Assignor</string>
+                <string>Manager</string>
+              </tuple>
+            </value>
+        </item>
+        <item>
+            <key> <string>_View_Permission</string> </key>
+            <value>
+              <tuple>
+                <string>Anonymous</string>
+                <string>Assignee</string>
+                <string>Assignor</string>
+                <string>Associate</string>
+                <string>Auditor</string>
+                <string>Manager</string>
+              </tuple>
+            </value>
+        </item>
+        <item>
+            <key> <string>categories</string> </key>
+            <value>
+              <tuple/>
+            </value>
+        </item>
+        <item>
+            <key> <string>content_md5</string> </key>
+            <value>
+              <none/>
+            </value>
+        </item>
+        <item>
+            <key> <string>content_type</string> </key>
+            <value> <string>text/html</string> </value>
+        </item>
+        <item>
+            <key> <string>default_reference</string> </key>
+            <value> <string>gadget_erp5_page_ojs_notebook_export.html</string> </value>
+        </item>
+        <item>
+            <key> <string>description</string> </key>
+            <value>
+              <none/>
+            </value>
+        </item>
+        <item>
+            <key> <string>id</string> </key>
+            <value> <string>ojs_gadget_erp5_page_ojs_notebook_export_html</string> </value>
+        </item>
+        <item>
+            <key> <string>language</string> </key>
+            <value>
+              <none/>
+            </value>
+        </item>
+        <item>
+            <key> <string>portal_type</string> </key>
+            <value> <string>Web Page</string> </value>
+        </item>
+        <item>
+            <key> <string>short_title</string> </key>
+            <value>
+              <none/>
+            </value>
+        </item>
+        <item>
+            <key> <string>title</string> </key>
+            <value> <string>OfficeJS Notebook Export</string> </value>
+        </item>
+        <item>
+            <key> <string>url_string</string> </key>
+            <value>
+              <none/>
+            </value>
+        </item>
+        <item>
+            <key> <string>version</string> </key>
+            <value> <string>001</string> </value>
+        </item>
+        <item>
+            <key> <string>workflow_history</string> </key>
+            <value>
+              <persistent> <string encoding="base64">AAAAAAAAAAI=</string> </persistent>
+            </value>
+        </item>
+      </dictionary>
+    </pickle>
+  </record>
+  <record id="2" aka="AAAAAAAAAAI=">
+    <pickle>
+      <global name="PersistentMapping" module="Persistence.mapping"/>
+    </pickle>
+    <pickle>
+      <dictionary>
+        <item>
+            <key> <string>data</string> </key>
+            <value>
+              <dictionary>
+                <item>
+                    <key> <string>document_publication_workflow</string> </key>
+                    <value>
+                      <persistent> <string encoding="base64">AAAAAAAAAAM=</string> </persistent>
+                    </value>
+                </item>
+                <item>
+                    <key> <string>edit_workflow</string> </key>
+                    <value>
+                      <persistent> <string encoding="base64">AAAAAAAAAAQ=</string> </persistent>
+                    </value>
+                </item>
+                <item>
+                    <key> <string>processing_status_workflow</string> </key>
+                    <value>
+                      <persistent> <string encoding="base64">AAAAAAAAAAU=</string> </persistent>
+                    </value>
+                </item>
+              </dictionary>
+            </value>
+        </item>
+      </dictionary>
+    </pickle>
+  </record>
+  <record id="3" aka="AAAAAAAAAAM=">
+    <pickle>
+      <global name="WorkflowHistoryList" module="Products.ERP5Type.patches.WorkflowTool"/>
+    </pickle>
+    <pickle>
+      <tuple>
+        <none/>
+        <list>
+          <dictionary>
+            <item>
+                <key> <string>action</string> </key>
+                <value> <string>publish_alive</string> </value>
+            </item>
+            <item>
+                <key> <string>actor</string> </key>
+                <value> <string>zope</string> </value>
+            </item>
+            <item>
+                <key> <string>comment</string> </key>
+                <value> <string></string> </value>
+            </item>
+            <item>
+                <key> <string>error_message</string> </key>
+                <value> <string></string> </value>
+            </item>
+            <item>
+                <key> <string>time</string> </key>
+                <value>
+                  <object>
+                    <klass>
+                      <global name="DateTime" module="DateTime.DateTime"/>
+                    </klass>
+                    <tuple>
+                      <none/>
+                    </tuple>
+                    <state>
+                      <tuple>
+                        <float>1569506819.84</float>
+                        <string>UTC</string>
+                      </tuple>
+                    </state>
+                  </object>
+                </value>
+            </item>
+            <item>
+                <key> <string>validation_state</string> </key>
+                <value> <string>published_alive</string> </value>
+            </item>
+          </dictionary>
+        </list>
+      </tuple>
+    </pickle>
+  </record>
+  <record id="4" aka="AAAAAAAAAAQ=">
+    <pickle>
+      <global name="WorkflowHistoryList" module="Products.ERP5Type.patches.WorkflowTool"/>
+    </pickle>
+    <pickle>
+      <tuple>
+        <none/>
+        <list>
+          <dictionary>
+            <item>
+                <key> <string>action</string> </key>
+                <value> <string>edit</string> </value>
+            </item>
+            <item>
+                <key> <string>actor</string> </key>
+                <value> <string>zope</string> </value>
+            </item>
+            <item>
+                <key> <string>comment</string> </key>
+                <value>
+                  <none/>
+                </value>
+            </item>
+            <item>
+                <key> <string>error_message</string> </key>
+                <value> <string></string> </value>
+            </item>
+            <item>
+                <key> <string>serial</string> </key>
+                <value> <string>978.51415.10.49937</string> </value>
+            </item>
+            <item>
+                <key> <string>state</string> </key>
+                <value> <string>current</string> </value>
+            </item>
+            <item>
+                <key> <string>time</string> </key>
+                <value>
+                  <object>
+                    <klass>
+                      <global name="DateTime" module="DateTime.DateTime"/>
+                    </klass>
+                    <tuple>
+                      <none/>
+                    </tuple>
+                    <state>
+                      <tuple>
+                        <float>1569854517.54</float>
+                        <string>UTC</string>
+                      </tuple>
+                    </state>
+                  </object>
+                </value>
+            </item>
+          </dictionary>
+        </list>
+      </tuple>
+    </pickle>
+  </record>
+  <record id="5" aka="AAAAAAAAAAU=">
+    <pickle>
+      <global name="WorkflowHistoryList" module="Products.ERP5Type.patches.WorkflowTool"/>
+    </pickle>
+    <pickle>
+      <tuple>
+        <none/>
+        <list>
+          <dictionary>
+            <item>
+                <key> <string>action</string> </key>
+                <value> <string>detect_converted_file</string> </value>
+            </item>
+            <item>
+                <key> <string>actor</string> </key>
+                <value> <string>zope</string> </value>
+            </item>
+            <item>
+                <key> <string>comment</string> </key>
+                <value> <string></string> </value>
+            </item>
+            <item>
+                <key> <string>error_message</string> </key>
+                <value> <string></string> </value>
+            </item>
+            <item>
+                <key> <string>external_processing_state</string> </key>
+                <value> <string>converted</string> </value>
+            </item>
+            <item>
+                <key> <string>serial</string> </key>
+                <value> <string>0.0.0.0</string> </value>
+            </item>
+            <item>
+                <key> <string>time</string> </key>
+                <value>
+                  <object>
+                    <klass>
+                      <global name="DateTime" module="DateTime.DateTime"/>
+                    </klass>
+                    <tuple>
+                      <none/>
+                    </tuple>
+                    <state>
+                      <tuple>
+                        <float>1569506369.26</float>
+                        <string>UTC</string>
+                      </tuple>
+                    </state>
+                  </object>
+                </value>
+            </item>
+          </dictionary>
+        </list>
+      </tuple>
+    </pickle>
+  </record>
+</ZopeData>

bt5/erp5_officejs/PathTemplateItem/web_page_module/ojs_gadget_erp5_page_ojs_notebook_export_js.js

+/*global window, document, jIO, rJS, RSVP */
+/*jslint nomen: true, indent: 2, maxerr: 3 */
+(function (window, document, jIO, rJS, RSVP, Blob) {
+
+  "use strict";
+
+  rJS(window)
+
+    /////////////////////////////////////////////////////////////////
+    // Acquired methods
+    /////////////////////////////////////////////////////////////////
+    .declareAcquiredMethod("updateHeader", "updateHeader")
+    .declareAcquiredMethod("jio_get", "jio_get")
+    .declareAcquiredMethod("jio_getAttachment", "jio_getAttachment")
+    .declareAcquiredMethod("jio_putAttachment", "jio_putAttachment")
+    .declareAcquiredMethod("getUrlFor", "getUrlFor")
+    .declareAcquiredMethod("notifySubmitting", "notifySubmitting")
+    .declareAcquiredMethod("notifySubmitted", 'notifySubmitted')
+    .declareAcquiredMethod("redirect", 'redirect')
+
+    /////////////////////////////////////////////////////////////////
+    // declared methods
+    /////////////////////////////////////////////////////////////////
+
+    .declareMethod("render", function (options) {
+
+      var gadget = this;
+      return gadget.jio_get(options.jio_key)
+        .push(function (result) {
+          return gadget.changeState({
+            jio_key: options.jio_key,
+            doc: result
+          });
+        });
+    })
+
+    .onEvent('submit', function (event) {
+      var gadget = this, html, content, cloudooo;
+      return gadget.notifySubmitting()
+        .push(function () {
+          return gadget.getDeclaredGadget('form_view');
+        })
+        .push(function (form_gadget) {
+          return RSVP.all([
+            form_gadget.getContent(),
+            gadget.getDeclaredGadget("ojs_cloudooo"),
+            form_gadget.getDeclaredGadget("text_content")
+          ]);
+        })
+        .push(function (result_list) {
+          content = result_list[0];
+          cloudooo = result_list[1];
+          html = result_list[2].element
+            .querySelector('[data-gadget-scope="editor"]').firstChild
+            .contentDocument.body.firstChild.contentDocument.firstChild;
+          html.firstChild.innerHTML = "";
+          return RSVP.all([
+            cloudooo.putCloudoooConvertOperation({
+              "status": "converted",
+              "from": "txt",
+              "to": "html",
+              "id": gadget.state.jio_key,
+              "name": "data"
+            }),
+            cloudooo.putCloudoooConvertOperation({
+              "status": "convert",
+              "from": "html",
+              "to": "pdf",
+              "id": gadget.state.jio_key,
+              "name": "html",
+              "to_name": "pdf",
+              "conversion_kw": {
+                "encoding": ["utf8", "string"],
+                "page_size": ["A4", "string"],
+                "zoom" : [1, "double"],
+                "dpi" : ["300", "string"],
+                "header_center" : ["document Title", "string"]
+              }
+            })
+          ]);
+        })
+        .push(function () {
+          return gadget.jio_putAttachment(
+            gadget.state.jio_key,
+            'html',
+            new Blob([html.outerHTML], {type: 'text/html'})
+          );
+        })
+        .push(function () {
+          return gadget.notifySubmitted();
+        })
+        .push(function () {
+          return gadget.redirect({
+            'command': 'display',
+            'options': {
+              'page': 'ojs_download_convert',
+              'jio_key': gadget.state.jio_key
+            }
+          });
+        });
+    })
+
+    .declareMethod("triggerSubmit", function () {
+      return this.element.querySelector('button[type="submit"]').click();
+    })
+
+    .onStateChange(function () {
+      var gadget = this, data;
+      return gadget.jio_getAttachment(gadget.state.jio_key, "data")
+        .push(undefined, function (error) {
+          if (error instanceof jIO.util.jIOError && error.status_code === 404) {
+            return new Blob();
+          }
+          throw error;
+        })
+        .push(function (blob) {
+          return jIO.util.readBlobAsText(blob);
+        })
+        .push(function (evt) {
+          data = evt.target.result;
+          return gadget.getDeclaredGadget('form_view');
+        })
+        .push(function (form_gadget) {
+          return form_gadget.render({
+            erp5_document: {
+              "_embedded": {"_view": {
+                "my_content": {
+                  "default": data,
+                  "css_class": "",
+                  "required": 0,
+                  "editable": 0,
+                  "key": "text_content",
+                  "hidden": 0,
+                  "type": "GadgetField",
+                  "url": "gadget_editor.html",
+                  "sandbox": "public",
+                  "renderjs_extra": '{"editor": "jsmd_editor", "maximize": true}'
+                }
+              }},
+              "_links": {
+                "type": {
+                  // form_list display portal_type in header
+                  name: ""
+                }
+              }
+            },
+            form_definition: {
+              group_list: [[
+                "left",
+                []
+              ], [
+                "right",
+                []
+              ], [
+                "center",
+                []
+              ], [
+                "bottom",
+                [["my_content"]]
+              ]]
+            }
+          });
+        })
+        .push(function () {
+          return RSVP.all([
+            gadget.getUrlFor({
+              command: 'display',
+              options: {'jio_key': gadget.state.jio_key}
+            }),
+            gadget.getUrlFor({command: 'selection_previous'}),
+            gadget.getUrlFor({command: 'selection_next'})
+          ]);
+        })
+        .push(function (url_list) {
+          return gadget.updateHeader({
+            page_title: "Export",
+            submit_action: true,
+            selection_url: url_list[0],
+            previous_url: url_list[1],
+            next_url: url_list[2]
+          });
+        });
+    });
+}(window, document, jIO, rJS, RSVP, Blob));

bt5/erp5_officejs/PathTemplateItem/web_page_module/ojs_gadget_erp5_page_ojs_notebook_export_js.xml

+<?xml version="1.0"?>
+<ZopeData>
+  <record id="1" aka="AAAAAAAAAAE=">
+    <pickle>
+      <global name="Web Script" module="erp5.portal_type"/>
+    </pickle>
+    <pickle>
+      <dictionary>
+        <item>
+            <key> <string>_Access_contents_information_Permission</string> </key>
+            <value>
+              <tuple>
+                <string>Anonymous</string>
+                <string>Assignee</string>
+                <string>Assignor</string>
+                <string>Associate</string>
+                <string>Auditor</string>
+                <string>Manager</string>
+              </tuple>
+            </value>
+        </item>
+        <item>
+            <key> <string>_Add_portal_content_Permission</string> </key>
+            <value>
+              <tuple>
+                <string>Assignee</string>
+                <string>Assignor</string>
+                <string>Manager</string>
+              </tuple>
+            </value>
+        </item>
+        <item>
+            <key> <string>_Change_local_roles_Permission</string> </key>
+            <value>
+              <tuple>
+                <string>Assignor</string>
+                <string>Manager</string>
+              </tuple>
+            </value>
+        </item>
+        <item>
+            <key> <string>_Modify_portal_content_Permission</string> </key>
+            <value>
+              <tuple>
+                <string>Assignee</string>
+                <string>Assignor</string>
+                <string>Manager</string>
+              </tuple>
+            </value>
+        </item>
+        <item>
+            <key> <string>_View_Permission</string> </key>
+            <value>
+              <tuple>
+                <string>Anonymous</string>
+                <string>Assignee</string>
+                <string>Assignor</string>
+                <string>Associate</string>
+                <string>Auditor</string>
+                <string>Manager</string>
+              </tuple>
+            </value>
+        </item>
+        <item>
+            <key> <string>categories</string> </key>
+            <value>
+              <tuple>
+                <string>classification/collaborative/team</string>
+              </tuple>
+            </value>
+        </item>
+        <item>
+            <key> <string>content_md5</string> </key>
+            <value>
+              <none/>
+            </value>
+        </item>
+        <item>
+            <key> <string>default_reference</string> </key>
+            <value> <string>gadget_erp5_page_ojs_notebook_export.js</string> </value>
+        </item>
+        <item>
+            <key> <string>description</string> </key>
+            <value>
+              <none/>
+            </value>
+        </item>
+        <item>
+            <key> <string>id</string> </key>
+            <value> <string>ojs_gadget_erp5_page_ojs_notebook_export_js</string> </value>
+        </item>
+        <item>
+            <key> <string>language</string> </key>
+            <value>
+              <none/>
+            </value>
+        </item>
+        <item>
+            <key> <string>portal_type</string> </key>
+            <value> <string>Web Script</string> </value>
+        </item>
+        <item>
+            <key> <string>short_title</string> </key>
+            <value>
+              <none/>
+            </value>
+        </item>
+        <item>
+            <key> <string>title</string> </key>
+            <value> <string>OfficeJS Notebook Export JS</string> </value>
+        </item>
+        <item>
+            <key> <string>url_string</string> </key>
+            <value>
+              <none/>
+            </value>
+        </item>
+        <item>
+            <key> <string>version</string> </key>
+            <value> <string>001</string> </value>
+        </item>
+        <item>
+            <key> <string>workflow_history</string> </key>
+            <value>
+              <persistent> <string encoding="base64">AAAAAAAAAAI=</string> </persistent>
+            </value>
+        </item>
+      </dictionary>
+    </pickle>
+  </record>
+  <record id="2" aka="AAAAAAAAAAI=">
+    <pickle>
+      <global name="PersistentMapping" module="Persistence.mapping"/>
+    </pickle>
+    <pickle>
+      <dictionary>
+        <item>
+            <key> <string>data</string> </key>
+            <value>
+              <dictionary>
+                <item>
+                    <key> <string>document_publication_workflow</string> </key>
+                    <value>
+                      <persistent> <string encoding="base64">AAAAAAAAAAM=</string> </persistent>
+                    </value>
+                </item>
+                <item>
+                    <key> <string>edit_workflow</string> </key>
+                    <value>
+                      <persistent> <string encoding="base64">AAAAAAAAAAQ=</string> </persistent>
+                    </value>
+                </item>
+                <item>
+                    <key> <string>processing_status_workflow</string> </key>
+                    <value>
+                      <persistent> <string encoding="base64">AAAAAAAAAAU=</string> </persistent>
+                    </value>
+                </item>
+              </dictionary>
+            </value>
+        </item>
+      </dictionary>
+    </pickle>
+  </record>
+  <record id="3" aka="AAAAAAAAAAM=">
+    <pickle>
+      <global name="WorkflowHistoryList" module="Products.ERP5Type.patches.WorkflowTool"/>
+    </pickle>
+    <pickle>
+      <tuple>
+        <none/>
+        <list>
+          <dictionary>
+            <item>
+                <key> <string>action</string> </key>
+                <value> <string>publish_alive</string> </value>
+            </item>
+            <item>
+                <key> <string>actor</string> </key>
+                <value> <string>zope</string> </value>
+            </item>
+            <item>
+                <key> <string>comment</string> </key>
+                <value> <string></string> </value>
+            </item>
+            <item>
+                <key> <string>error_message</string> </key>
+                <value> <string></string> </value>
+            </item>
+            <item>
+                <key> <string>time</string> </key>
+                <value>
+                  <object>
+                    <klass>
+                      <global name="DateTime" module="DateTime.DateTime"/>
+                    </klass>
+                    <tuple>
+                      <none/>
+                    </tuple>
+                    <state>
+                      <tuple>
+                        <float>1569506237.11</float>
+                        <string>UTC</string>
+                      </tuple>
+                    </state>
+                  </object>
+                </value>
+            </item>
+            <item>
+                <key> <string>validation_state</string> </key>
+                <value> <string>published_alive</string> </value>
+            </item>
+          </dictionary>
+        </list>
+      </tuple>
+    </pickle>
+  </record>
+  <record id="4" aka="AAAAAAAAAAQ=">
+    <pickle>
+      <global name="WorkflowHistoryList" module="Products.ERP5Type.patches.WorkflowTool"/>
+    </pickle>
+    <pickle>
+      <tuple>
+        <none/>
+        <list>
+          <dictionary>
+            <item>
+                <key> <string>action</string> </key>
+                <value> <string>edit</string> </value>
+            </item>
+            <item>
+                <key> <string>actor</string> </key>
+                <value> <string>zope</string> </value>
+            </item>
+            <item>
+                <key> <string>comment</string> </key>
+                <value>
+                  <none/>
+                </value>
+            </item>
+            <item>
+                <key> <string>error_message</string> </key>
+                <value> <string></string> </value>
+            </item>
+            <item>
+                <key> <string>serial</string> </key>
+                <value> <string>978.54405.62557.30208</string> </value>
+            </item>
+            <item>
+                <key> <string>state</string> </key>
+                <value> <string>current</string> </value>
+            </item>
+            <item>
+                <key> <string>time</string> </key>
+                <value>
+                  <object>
+                    <klass>
+                      <global name="DateTime" module="DateTime.DateTime"/>
+                    </klass>
+                    <tuple>
+                      <none/>
+                    </tuple>
+                    <state>
+                      <tuple>
+                        <float>1569944120.54</float>
+                        <string>UTC</string>
+                      </tuple>
+                    </state>
+                  </object>
+                </value>
+            </item>
+          </dictionary>
+        </list>
+      </tuple>
+    </pickle>
+  </record>
+  <record id="5" aka="AAAAAAAAAAU=">
+    <pickle>
+      <global name="WorkflowHistoryList" module="Products.ERP5Type.patches.WorkflowTool"/>
+    </pickle>
+    <pickle>
+      <tuple>
+        <none/>
+        <list>
+          <dictionary>
+            <item>
+                <key> <string>action</string> </key>
+                <value> <string>detect_converted_file</string> </value>
+            </item>
+            <item>
+                <key> <string>actor</string> </key>
+                <value> <string>zope</string> </value>
+            </item>
+            <item>
+                <key> <string>comment</string> </key>
+                <value> <string></string> </value>
+            </item>
+            <item>
+                <key> <string>error_message</string> </key>
+                <value> <string></string> </value>
+            </item>
+            <item>
+                <key> <string>external_processing_state</string> </key>
+                <value> <string>converted</string> </value>
+            </item>
+            <item>
+                <key> <string>serial</string> </key>
+                <value> <string>0.0.0.0</string> </value>
+            </item>
+            <item>
+                <key> <string>time</string> </key>
+                <value>
+                  <object>
+                    <klass>
+                      <global name="DateTime" module="DateTime.DateTime"/>
+                    </klass>
+                    <tuple>
+                      <none/>
+                    </tuple>
+                    <state>
+                      <tuple>
+                        <float>1569506161.73</float>
+                        <string>UTC</string>
+                      </tuple>
+                    </state>
+                  </object>
+                </value>
+            </item>
+          </dictionary>
+        </list>
+      </tuple>
+    </pickle>
+  </record>
+</ZopeData>

bt5/erp5_officejs/PathTemplateItem/web_page_module/ojs_gadget_erp5_page_ojs_upload_js.js

-/*global window, rJS, RSVP, jIO, DOMParser */
+/*global window, rJS, RSVP, jIO, DOMParser, Blob */
 /*jslint nomen: true, indent: 2, maxerr: 3 */
-(function (window, rJS, RSVP, jIO, DOMParser) {
+(function (window, rJS, RSVP, jIO, DOMParser, Blob) {
   "use strict";
 
   rJS(window)
@@ -13,6 +13,7 @@
     .declareAcquiredMethod("notifySubmitted", "notifySubmitted")
     .declareAcquiredMethod("jio_post", "jio_post")
     .declareAcquiredMethod("jio_put", "jio_put")
+    .declareAcquiredMethod("jio_putAttachment", "jio_putAttachment")
     .declareAcquiredMethod("getSetting", "getSetting")
     .declareAcquiredMethod("redirect", "redirect")
     /////////////////////////////////////////////////////////////////
@@ -35,7 +36,7 @@
           ]);
         })
         .push(function (result) {
-          var file_name_list, data, filename, queue, filetype;
+          var file_name_list, data, filename, queue, filetype, jio_key;
           if (result[0].file !== undefined) {
             file_name_list = result[0].file.file_name.split('.');
             filetype = file_name_list.pop();
@@ -58,16 +59,25 @@
                     parser = new DOMParser();
                     htmlDoc = parser.parseFromString(data_content, "text/html");
                     data_content = htmlDoc.getElementById('jsmd').textContent;
+                    filetype = "txt";
                   }
                   return gadget.jio_post({
                     title: filename,
                     portal_type: result[1],
                     content_type: result[2],
                     parent_relative_url: result[4],
-                    text_content: data_content
+                    filename: "default." + filetype
+                  })
+                  .push(function (result) {
+                    jio_key = result;
+                    return gadget.jio_putAttachment(
+                      jio_key,
+                      "data",
+                      new Blob([data_content], {type: result[2]})
+                    );
                   });
                 })
-                .push(function (jio_key) {
+                .push(function () {
                   return gadget.redirect({
                     'command': 'display',
                     'options': {
@@ -164,4 +174,4 @@
           });
         });
     });
-}(window, rJS, RSVP, jIO, DOMParser));
\ No newline at end of file
+}(window, rJS, RSVP, jIO, DOMParser, Blob));
\ No newline at end of file

bt5/erp5_officejs/PathTemplateItem/web_page_module/ojs_gadget_erp5_page_ojs_upload_js.xml

@@ -242,7 +242,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>970.54532.18415.44100</string> </value>
+                <value> <string>978.57505.65048.29440</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -260,7 +260,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1539165482.38</float>
+                        <float>1570357013.41</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_officejs/PathTemplateItem/web_page_module/ojs_gadget_ojs_cloudooo_js.js

@@ -100,6 +100,7 @@
               from: options.format,
               to: format_list[i],
               id: options.jio_key,
+              conversion_kw: options.conversion_kw ? options.conversion_kw : {},
               name: options.format === result[1] ? ATT_NAME : options.format
             }));
           }

bt5/erp5_officejs/bt/dependency_list

 erp5_web_renderjs_ui
 erp5_code_mirror
 erp5_multimedia
+erp5_notebook
 erp5_smart_assistant
\ No newline at end of file

bt5/erp5_officejs_connector/ActionTemplateItem/portal_types/Notebook/jio_view.xml

@@ -77,7 +77,7 @@
       <dictionary>
         <item>
             <key> <string>text</string> </key>
-            <value> <string>string:${object_url}/WebPage_viewAsJio</string> </value>
+            <value> <string>string:${object_url}/string:${object_url}/OOoDocument_viewAsJio</string> </value>
         </item>
       </dictionary>
     </pickle>

bt5/erp5_officejs_ui_test/PathTemplateItem/portal_tests/officejs_ui_notebook_zuite/testOfficeJSNotebook.zpt

-<html xmlns:tal="http://xml.zope.org/namespaces/tal"
-      xmlns:metal="http://xml.zope.org/namespaces/metal">
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-<title>Test OfficeJS UI (expected failure)</title>
-  <script src="../../web_site_module/officejs_notebook/rsvp.js"></script>
-  <script src="../../web_site_module/officejs_notebook/jiodev.js"></script>
-</head>
-<body>
-<table cellpadding="1" cellspacing="1" border="1">
-<thead>
-<tr><td rowspan="1" colspan="3">Test OfficeJS UI (expected failure)</td></tr>
-</thead><tbody>
-<tal:block metal:use-macro="here/Zuite_CommonTemplate/macros/init" />
-<!-- Clean Up -->
-<tr>
-  <td>open</td>
-  <td>${base_url}/bar_module/ListBoxZuite_reset</td>
-  <td></td>
-</tr>
-<tr>
-  <td>assertTextPresent</td>
-  <td>Reset Successfully.</td>
-  <td></td>
-</tr>
-<tal:block tal:define="web_site_name python: 'officejs_notebook'">
-   <tal:block metal:use-macro="here/Zuite_CommonTemplateForOfficejsUi/macros/install_offline_and_redirect" />
- </tal:block>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>//a[@data-i18n='Storages']</td>
-  <td></td>
-</tr>
-<tr>
-  <td>click</td>
-  <td>//a[@data-i18n='Storages']</td>
-  <td></td>
-</tr>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>link=Local is Enough</td>
-  <td></td>
-</tr>
-<tr>
-  <td>click</td>
-  <td>link=Local is Enough</td>
-  <td></td>
-</tr>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>link=Add</td>
-  <td></td>
-</tr>
-<tr>
-  <td>click</td>
-  <td>link=Add</td>
-  <td></td>
-</tr>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>//button[@data-i18n='Save']</td>
-  <td></td>
-</tr>
-<tr>
-  <td>store</td>
-  <td tal:content="python: 'Test Titre %s' % DateTime()">Titre</td>
-  <td>title</td>
-</tr>
-<tr>
-  <td>store</td>
-  <td tal:content="python: 'Test Reference %s' % DateTime()">Reference</td>
-  <td>reference</td>
-</tr>
-<tr>
-  <td>store</td>
-  <td tal:content="python: 'Test Language %s' % DateTime()">Language</td>
-  <td>language</td>
-</tr>
-<tr>
-  <td>store</td>
-  <td tal:content="python: 'Test Version %s' % DateTime()">Version</td>
-  <td>version</td>
-</tr>
-<tr>
-  <td>store</td>
-  <td tal:content="python: 'Test Description %s' % DateTime()">Description</td>
-  <td>description</td>
-</tr>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>//input[@title='Title']</td>
-  <td></td>
-</tr>
-<tr>
-  <td>type</td>
-  <td>//input[@title='Title']</td>
-  <td>${title}</td>
-</tr>
-<tr>
-  <td>type</td>
-  <td>//input[@title='Reference']</td>
-  <td>${reference}</td>
-</tr>
-<tr>
-  <td>type</td>
-  <td>//input[@title='Version']</td>
-  <td>${version}</td>
-</tr>
-<tr>
-  <td>type</td>
-  <td>//input[@title='Language']</td>
-  <td>${language}</td>
-</tr>
-<tr>
-  <td>type</td>
-  <td>//textarea[@title='Description']</td>
-  <td>${description}</td>
-</tr>
-<tr>
-  <td>click</td>
-  <td>//button[@data-i18n='Save']</td>
-  <td></td>
-</tr>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>//div[@data-gadget-scope="notification"]//button[text()='Data Updated']</td>
-  <td></td>
-</tr>
-<tr>
-  <td>click</td>
-  <td>//a[@data-i18n='Document']</td>
-  <td></td>
-</tr>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>link=Add</td>
-  <td></td>
-</tr>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>link=${title}</td>
-  <td></td>
-</tr>
-<tr>
-  <td>click</td>
-  <td>link=${title}</td>
-  <td></td>
-</tr>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>//textarea[@title='Description']</td>
-  <td></td>
-</tr>
-<tr>
-  <td>verifyValue</td>
-  <td>//input[@title='Title']</td>
-  <td>${title}</td>
-</tr>
-<tr>
-  <td>verifyValue</td>
-  <td>//input[@title='Reference']</td>
-  <td>${reference}</td>
-</tr>
-<tr>
-  <td>verifyValue</td>
-  <td>//input[@title='Version']</td>
-  <td>${version}</td>
-</tr>
-<tr>
-  <td>verifyValue</td>
-  <td>//input[@title='Language']</td>
-  <td>${language}</td>
-</tr>
-<tr>
-  <td>verifyValue</td>
-  <td>//textarea[@title='Description']</td>
-  <td>${description}</td>
-</tr>
-<!-- This part (actually loading the notebook) requires a recent version
-of firefox. Right now (may 2018) the test nodes are running with firefox 51.
-This has been successfully tested with 59. -->
-<tr>
-  <td>waitForElementPresent</td>
-  <td>identifier=notebook-container</td>
-  <td></td>
-</tr>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>//a[@data-i18n='Download']</td>
-  <td></td>
-</tr>
-<!-- Go to Document list -->
-<tr>
-  <td>click</td>
-  <td>//a[@data-i18n='Document']</td>
-  <td>
-</tr>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>link=Upload</td>
-  <td></td>
-</tr>
-<tr>
-  <td>click</td>
-  <td>link=Upload</td>
-  <td></td>
-</tr>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>//input[@value='Upload']</td>
-  <td></td>
-</tr>
-</tbody></table>
-</body>
+<html>
+  <head>
+    <title tal:content="template/title">Test OfficeJS Notebook UI</title>
+    <meta http-equiv="content-type" content="text/html;charset=utf-8">
+  </head>
+  <body>
+    <table cellpadding="1" cellspacing="1" border="1">
+      <thead>
+        <tr><td rowspan="1" colspan="3">Test OfficeJS Notebook UI</td></tr>
+      </thead>
+      <tbody>
+        <tal:block metal:use-macro="here/Zuite_CommonTemplate/macros/init" />
+        <!-- Clean Up -->
+        <tr>
+          <td>open</td>
+          <td>${base_url}/web_site_module/officejs_notebook/</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>//a[@data-i18n="Storages"]</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>click</td>
+          <td>//a[@data-i18n="Storages"]</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>link=Local is Enough</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>click</td>
+          <td>link=Local is Enough</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>link=Add</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>click</td>
+          <td>link=Add</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>//button[@data-i18n="Save"]</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>store</td>
+          <td tal:content="python: 'test_text_%s' % DateTime().strftime('%Y%m%d%H%M%S')">Titre</td>
+          <td>title</td>
+        </tr>
+        <tr>
+          <td>store</td>
+          <td tal:content="python: 'Test Reference %s' % DateTime()">Reference</td>
+          <td>reference</td>
+        </tr>
+        <tr>
+          <td>store</td>
+          <td tal:content="python: 'Test Language %s' % DateTime()">Language</td>
+          <td>language</td>
+        </tr>
+        <tr>
+          <td>store</td>
+          <td tal:content="python: 'Test Version %s' % DateTime()">Version</td>
+          <td>version</td>
+        </tr>
+        <tr>
+          <td>store</td>
+          <td tal:content="python: 'Test Description %s' % DateTime()">Description</td>
+          <td>description</td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>//input[@title='Title']</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>type</td>
+          <td>//input[@title='Title']</td>
+          <td>${title}</td>
+        </tr>
+        <tr>
+          <td>type</td>
+          <td>//input[@title='Reference']</td>
+          <td>${reference}</td>
+        </tr>
+        <tr>
+          <td>type</td>
+          <td>//input[@title='Version']</td>
+          <td>${version}</td>
+        </tr>
+        <tr>
+          <td>type</td>
+          <td>//input[@title='Language']</td>
+          <td>${language}</td>
+        </tr>
+        <tr>
+          <td>type</td>
+          <td>//textarea[@title='Description']</td>
+          <td>${description}</td>
+        </tr>
+        <tr>
+          <td>click</td>
+          <td>//button[@data-i18n='Save']</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>//div[@data-gadget-scope="notification"]//button[text()='Data Updated']</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>click</td>
+          <td>//a[@accesskey="s"]</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>//a[@data-i18n='Upload']</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>click</td>
+          <td>//a[@data-i18n='Upload']</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>//input[@value='Upload']</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>click</td>
+          <td>//a[@data-i18n="Cancel"]</td>
+          <td></td>
+        </tr>
+         <tr>
+          <td>waitForElementPresent</td>
+          <td>//a[@accesskey="s"]</td>
+          <td></td>
+        </tr>
+        <tal:block metal:define-macro="open_document_with_title">
+          <tr>
+            <td colspan="3"><b>Open Document</b></td>
+          </tr>
+          <tr>
+            <td>waitForElementPresent</td>
+            <td>//div[contains(@data-gadget-url, 'gadget_erp5_pt_form_list.html')]//input[@name='search']</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>type</td>
+            <td>//div[contains(@data-gadget-url, 'gadget_erp5_pt_form_list.html')]//input[@name='search']</td>
+            <td>${title}</td>
+          </tr>
+          <tr>
+            <td>click</td>
+            <td>//div[contains(@data-gadget-url, 'gadget_erp5_pt_form_list.html')]//div[@data-gadget-scope='erp5_searchfield']//button[contains(@class, 'search_button')]</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>waitForElementPresent</td>
+            <td>link=${title}</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>click</td>
+            <td>link=${title}</td>
+            <td></td>
+          </tr>
+        </tal:block>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>//textarea[@title='Description']</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>verifyValue</td>
+          <td>//input[@title='Title']</td>
+          <td>${title}</td>
+        </tr>
+        <tr>
+          <td>verifyValue</td>
+          <td>//input[@title='Reference']</td>
+          <td>${reference}</td>
+        </tr>
+        <tr>
+          <td>verifyValue</td>
+          <td>//input[@title='Version']</td>
+          <td>${version}</td>
+        </tr>
+        <tr>
+          <td>verifyValue</td>
+          <td>//input[@title='Language']</td>
+          <td>${language}</td>
+        </tr>
+        <tr>
+          <td>verifyValue</td>
+          <td>//textarea[@title='Description']</td>
+          <td>${description}</td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>//div[@data-gadget-scope="editor"]//iframe</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>assertElementPresent</td>
+          <td>//iframe[@src="${base_url}/web_site_module/officejs_notebook/app/codemirror.gadget.html"]</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>//a[@data-i18n='Export']</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>click</td>
+          <td>//a[@data-i18n='Export']</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>//div[@data-gadget-scope="editor"]//iframe[@src="${base_url}/web_site_module/officejs_notebook/app/gadget_jsmd_viewer.html"]</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>assertElementPresent</td>
+          <td>//iframe[@src="${base_url}/web_site_module/officejs_notebook/app/gadget_jsmd_viewer.html"]</td>
+          <td></td>
+        </tr>
+      </tbody>
+    </table>
+  </body>
 </html>
\ No newline at end of file

bt5/erp5_officejs_ui_test/PathTemplateItem/portal_tests/officejs_ui_notebook_zuite/testOfficeJSNotebookErp5Synchronization.zpt

-<html xmlns:tal="http://xml.zope.org/namespaces/tal"
-      xmlns:metal="http://xml.zope.org/namespaces/metal">
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-<title>Test OfficeJS UI (expected failure)</title>
-</head>
-<body>
-<table cellpadding="1" cellspacing="1" border="1">
-<thead>
-<tr><td rowspan="1" colspan="3">Test OfficeJS UI (expected failure)</td></tr>
-</thead><tbody>
-<tal:block metal:use-macro="here/Zuite_CommonTemplate/macros/init" />
-<!-- Clean Up -->
-<tr>
-  <td>open</td>
-  <td>${base_url}/bar_module/ListBoxZuite_reset</td>
-  <td></td>
-</tr>
-<tr>
-  <td>assertTextPresent</td>
-  <td>Reset Successfully.</td>
-  <td></td>
-</tr>
-<!-- Initialize -->
-<tr>
-  <td>open</td>
-  <td>${base_url}/web_site_module/officejs_notebook/</td>
-  <td></td>
-</tr>
-!-- Install can be longer than 90s -->
-  <tr>
-    <td>waitForCondition</td>
-    <td>selenium.browserbot.currentWindow.applicationCache.status !== window.applicationCache.DOWNLOADING</td>
-    <td>50000</td>
-  </tr>  
-<tr>
-  <td>waitForElementPresent</td>
-  <td>link=Storages</td>
-  <td></td>
-</tr>
-<tr>
-  <td>click</td>
-  <td>link=Storages</td>
-  <td></td>
-</tr>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>link=Erp5</td>
-  <td></td>
-</tr>
-<tr>
-  <td>click</td>
-  <td>link=Erp5</td>
-  <td></td>
-</tr>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>name=erp5_url</td>
-  <td></td>
-</tr>
-<tr>
-  <td>type</td>
-  <td>name=erp5_url</td>
-  <td>${base_url}/web_site_module/</td>
-</tr>
-<tr>
-  <td>click</td>
-  <td>//button[@data-i18n='Proceed']</td>
-  <td></td>
-</tr>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>link=Add</td>
-  <td></td>
-</tr>
-<tr>
-  <td>click</td>
-  <td>link=Add</td>
-  <td></td>
-</tr>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>//button[@data-i18n='Save']</td>
-  <td></td>
-</tr>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>identifier=title</td>
-  <td></td>
-</tr>
-<!-- This part (actually loading the notebook) requires a recent version
-of firefox. Right now (may 2018) the test nodes are running with firefox 51.
-This has been successfully tested with 59. -->
-<tr>
-  <td>waitForElementPresent</td>
-  <td>identifier=notebook-container</td>
-  <td></td>
-</tr>
-<tr>
-  <td>store</td>
-  <td>Titre</td>
-  <td>title</td>
-</tr>
-<tr>
-  <td>store</td>
-  <td tal:content="python: ('Test Reference %s' % DateTime()).replace(' ','.').replace(':', '.').replace('/', '.')">Reference</td>
-  <td>reference</td>
-</tr>
-<tr>
-  <td>store</td>
-  <td tal:content="python: 'Test Description %s' % DateTime()">Today</td>
-  <td>description</td>
-</tr>
-<tr>
-  <td>type</td>
-  <td>name=reference</td>
-  <td>${reference}</td>
-</tr>
-<tr>
-  <td>type</td>
-  <td>name=title</td>
-  <td>${title}</td>
-</tr>
-<tr>
-  <td>type</td>
-  <td>identifier=description</td>
-  <td>${description}</td>
-</tr>
-
-<tal:block tal:define="notebook_content python: 'content {}'.format(DateTime())">
-
-<tr>
-  <td>store</td>
-  <td tal:content="python: notebook_content">Notebook content</td>
-  <td>notebook_content</td>
-</tr>
-
-<tr>
-  <td>storeEval</td>
-  <td tal:content="python: 'document.querySelector(\'#selenium_myiframe\').contentWindow.document.body.querySelector(\'iframe\').contentWindow.document.querySelector(\'.CodeMirror\').CodeMirror.setValue(\'%s\')' % notebook_content"></td>
-  <td></td>
-</tr>
-
-</tal:block>
-<!-- Laurent : for some reason, if you just change the cell content, it will not be saved. You need to send a keyboard input at some point.
-For that I'm using this undocumented triggerOnKeyDown() method -->
-<tr>
-  <td>storeEval</td>
-  <td tal:content="python: 'document.querySelector(\'#selenium_myiframe\').contentWindow.document.body.querySelector(\'iframe\').contentWindow.document.querySelector(\'.CodeMirror\').
-                   CodeMirror.triggerOnKeyDown({type: \'keydown\', keyCode: 13})'"></td>
-  <td></td>
-</tr>
-<!-- Laurent : in case the UI of iodide notebooks ever changes, you need to select the "run cell" button here -->
-<tr>
-  <td>click</td>
-  <td>//*[@class="editor-mode-controls"]/button[5]</td>
-  <td></td>
-</tr>
-<tr>
-  <td>click</td>
-  <td>//button[@data-i18n='Save']</td>
-  <td></td>
-</tr>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>//div[@data-gadget-scope="notification"]//button[text()='Data Updated']</td>
-  <td></td>
-</tr>
-<tr>
-  <td>click</td>
-  <td>//a[@data-i18n='Document']</td>
-  <td></td>
-</tr>
-<!-- Verify Search, add another document -->
-<tr>
-  <td>waitForElementPresent</td>
-  <td>//a[@data-i18n='Add']</td>
-  <td></td>
-</tr>
-<tr>
-  <td>click</td>
-  <td>//a[@data-i18n='Add']</td>
-  <td></td>
-</tr>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>//button[@data-i18n='Save']</td>
-  <td></td>
-</tr>
-<tr>
-  <td>store</td>
-  <td>search</td>
-  <td>search</td>
-</tr>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>identifier=title</td>
-  <td></td>
-</tr>
-<tr>
-  <td>type</td>
-  <td>name=reference</td>
-  <td>${search}</td>
-</tr>
-<tr>
-  <td>type</td>
-  <td>name=title</td>
-  <td>${search}</td>
-</tr>
-<tr>
-  <td>click</td>
-  <td>//button[@data-i18n='Save']</td>
-  <td></td>
-</tr>
-<tr>
-  <td>click</td>
-  <td>//a[@data-i18n='Document']</td>
-  <td></td>
-</tr>
-<tal:block tal:define="search_query python: 'Titre'">
-  <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/search_in_form_list" />
-</tal:block>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>link=${title}</td>
-  <td></td>
-</tr>
-<tr>
-  <td>assertTextPresent</td>
-  <td>${reference}</td>
-  <td></td>
-</tr>
-<tr>
-  <td>assertFailureOnNext</td>
-  <td>false</td>
-  <td></td>
-</tr>
-<tr>
-  <td>verifyElementPresent</td>
-  <td>link=${search}</td>
-  <td></td>
-</tr>
-<tr>
-  <td>click</td>
-  <td>link=${reference}</td>
-  <td></td>
-</tr>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>identifier=title</td>
-  <td></td>
-</tr>
-<tr>
-  <td>assertTextPresent</td>
-  <td>${title}</td>
-  <td></td>
-</tr>
-<tr>
-  <td>verifyValue</td>
-  <td>title</td>
-  <td>${title}</td>
-</tr>
-<tr>
-  <td>verifyValue</td>
-  <td>reference</td>
-  <td>${reference}</td>
-</tr>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>identifier=description</td>
-  <td></td>
-</tr>
-<tr>
-  <td>verifyValue</td>
-  <td>description</td>
-  <td>${description}</td>
-</tr>
-<tr>
-  <td>click</td>
-  <td>//button[@data-i18n='Menu']</td>
-  <td></td>
-</tr>
-<tr>
-  <td>click</td>
-  <td>//a[@data-i18n='Synchronize']</td>
-  <td></td>
-</tr>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>name=search</td>
-  <td></td>
-</tr>
-<tr>
-  <td>type</td>
-  <td>name=search</td>
-  <td>${title}</td>
-</tr>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>//button[@data-i18n='Filter']</td>
-  <td></td>
-</tr>
-<tr>
-  <td>click</td>
-  <td>//button[@data-i18n='Filter']</td>
-  <td></td>
-</tr>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>//button[@data-i18n='Filter']</td>
-  <td></td>
-</tr>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>link=${title}</td>
-  <td></td>
-</tr>
-<tr>
-  <td>assertTextPresent</td>
-  <td>${reference}</td>
-  <td></td>
-</tr>
-<tr>
-  <td>click</td>
-  <td>link=${reference}</td>
-  <td></td>
-</tr>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>identifier=title</td>
-  <td></td>
-</tr>
-<tr>
-  <td>verifyValue</td>
-  <td>title</td>
-  <td>${title}</td>
-</tr>
-<tr>
-  <td>verifyValue</td>
-  <td>reference</td>
-  <td>${reference}</td>
-</tr>
-<tr>
-  <td>verifyValue</td>
-  <td>description</td>
-  <td>${description}</td>
-</tr>
-
-<tr>
-  <td>open</td>
-  <td>${base_url}/notebook_module/Zuite_waitForActivities</td>
-  <td></td>
-</tr>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>//pre[contains(text(), Done.)]</td>
-  <td></td>
-</tr>
-<tr>
-  <td>open</td>
-  <td>${base_url}/notebook_module/</td>
-  <td></td>
-</tr>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>//button[@title="Show All"]</td>
-  <td></td>
-</tr>
-<tr>
-  <td>click</td>
-  <td>//button[@title="Show All"]</td>
-  <td></td>
-</tr>
-<tr>
-  <td>pause</td>
-  <td>1000</td>
-  <td></td>
-</tr>
-<tr>
-  <td>waitForElementPresent</td>
-  <td>//input[@name="listbox_title"]</td>
-  <td></td>
-</tr>
-<tr>
-  <td>type</td>
-  <td>name=listbox_title</td>
-  <td>${title}</td>
-</tr>
-<tr>
-  <td>clickAndWait</td>
-  <td>Base_doSelect:method</td>
-  <td></td>
-</tr>
-<tr>
-  <td>assertTextPresent</td>
-  <td>${title}</td>
-  <td></td>
-</tr>
-<tr>
-  <td>assertTextPresent</td>
-  <td>${reference}</td>
-  <td></td>
-</tr>
-<tr>
-  <td>assertTextPresent</td>
-  <td>${description}</td>
-  <td></td>
-</tr>
-<tr>
-  <td>assertTextPresent</td>
-  <td>${notebook_content}</td>
-  <td></td>
-</tr>
-</tbody></table>
-</body>
+<html>
+  <head>
+    <title tal:content="template/title">The title</title>
+    <meta http-equiv="content-type" content="text/html;charset=utf-8">
+  </head>
+  <body>
+    <table cellpadding="1" cellspacing="1" border="1">
+      <thead>
+        <tr><td rowspan="1" colspan="3">Test OfficeJS Notebook UI</td></tr>
+      </thead>
+      <tbody>
+        <tal:block metal:use-macro="here/Zuite_CommonTemplate/macros/init" />
+        <!-- Clean Up -->
+        <tr>
+          <td>open</td>
+          <td>${base_url}/web_site_module/officejs_notebook/</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>//a[@data-i18n="Storages"]</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>click</td>
+          <td>//a[@data-i18n="Storages"]</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>link=Erp5</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>click</td>
+          <td>link=Erp5</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>name=erp5_url</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>type</td>
+          <td>name=erp5_url</td>
+          <td>${base_url}/web_site_module/renderjs_runner/</td>
+        </tr>
+        <tr>
+          <td>click</td>
+          <td>name=submit</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>link=Add</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>click</td>
+          <td>link=Add</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>//button[@data-i18n='Save']</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>id=title</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>store</td>
+          <td tal:content="python: 'test_text_%s' % DateTime().strftime('%Y%m%d%H%M%S')">Titre</td>
+          <td>title</td>
+        </tr>
+        <tr>
+          <td>store</td>
+          <td tal:content="python: 'Test Reference %s' % DateTime()">Reference</td>
+          <td>reference</td>
+        </tr>
+        <tr>
+          <td>store</td>
+          <td tal:content="python: 'Test Language %s' % DateTime()">Language</td>
+          <td>language</td>
+        </tr>
+        <tr>
+          <td>store</td>
+          <td tal:content="python: 'Test Version %s' % DateTime()">Version</td>
+          <td>version</td>
+        </tr>
+        <tr>
+          <td>store</td>
+          <td tal:content="python: 'Test Description %s' % DateTime()">Description</td>
+          <td>description</td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>//input[@title='Title']</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>type</td>
+          <td>//input[@title='Title']</td>
+          <td>${title}</td>
+        </tr>
+        <tr>
+          <td>type</td>
+          <td>//input[@title='Reference']</td>
+          <td>${reference}</td>
+        </tr>
+        <tr>
+          <td>type</td>
+          <td>//input[@title='Version']</td>
+          <td>${version}</td>
+        </tr>
+        <tr>
+          <td>type</td>
+          <td>//input[@title='Language']</td>
+          <td>${language}</td>
+        </tr>
+        <tr>
+          <td>type</td>
+          <td>//textarea[@title='Description']</td>
+          <td>${description}</td>
+        </tr>
+        <tr>
+          <td>click</td>
+          <td>//button[@data-i18n='Save']</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>//div[@data-gadget-scope="notification"]//button[text()='Data Updated']</td>
+          <td></td>
+        </tr>
+        <tal:block metal:define-macro="synchronization_document">
+        <tr>
+          <td colspan="3"><b>Sync Document</b></td>
+        </tr>
+        <tr>
+          <td>click</td>
+          <td>//a[@data-i18n="Synchronize"]</td>
+          <td></td>
+        </tr>
+        </tal:block>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>//button[@data-i18n='Filter']</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>link=${title}</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>click</td>
+          <td>link=${title}</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>identifier=title</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>verifyValue</td>
+          <td>title</td>
+          <td>${title}</td>
+        </tr>
+        <tr>
+          <td>verifyValue</td>
+          <td>reference</td>
+          <td>${reference}</td>
+        </tr>
+        <tr>
+          <td>verifyValue</td>
+          <td>version</td>
+          <td>${version}</td>
+        </tr>
+        <tr>
+          <td>verifyValue</td>
+          <td>language</td>
+          <td>${language}</td>
+        </tr>
+        <tr>
+          <td>verifyValue</td>
+          <td>description</td>
+          <td>${description}</td>
+        </tr>
+        
+      </tbody>
+    </table>
+  </body>
 </html>
\ No newline at end of file

bt5/erp5_officejs_ui_test/PathTemplateItem/portal_tests/officejs_ui_notebook_zuite/testOfficeJSNotebookExport.xml

+<?xml version="1.0"?>
+<ZopeData>
+  <record id="1" aka="AAAAAAAAAAE=">
+    <pickle>
+      <global name="ZopePageTemplate" module="Products.PageTemplates.ZopePageTemplate"/>
+    </pickle>
+    <pickle>
+      <dictionary>
+        <item>
+            <key> <string>_bind_names</string> </key>
+            <value>
+              <object>
+                <klass>
+                  <global name="NameAssignments" module="Shared.DC.Scripts.Bindings"/>
+                </klass>
+                <tuple/>
+                <state>
+                  <dictionary>
+                    <item>
+                        <key> <string>_asgns</string> </key>
+                        <value>
+                          <dictionary>
+                            <item>
+                                <key> <string>name_subpath</string> </key>
+                                <value> <string>traverse_subpath</string> </value>
+                            </item>
+                          </dictionary>
+                        </value>
+                    </item>
+                  </dictionary>
+                </state>
+              </object>
+            </value>
+        </item>
+        <item>
+            <key> <string>content_type</string> </key>
+            <value> <string>text/html</string> </value>
+        </item>
+        <item>
+            <key> <string>expand</string> </key>
+            <value> <int>0</int> </value>
+        </item>
+        <item>
+            <key> <string>id</string> </key>
+            <value> <string>testOfficeJSNotebookExport</string> </value>
+        </item>
+        <item>
+            <key> <string>output_encoding</string> </key>
+            <value> <string>utf-8</string> </value>
+        </item>
+        <item>
+            <key> <string>title</string> </key>
+            <value> <unicode></unicode> </value>
+        </item>
+      </dictionary>
+    </pickle>
+  </record>
+</ZopeData>

bt5/erp5_officejs_ui_test/PathTemplateItem/portal_tests/officejs_ui_notebook_zuite/testOfficeJSNotebookExport.zpt

+<html>
+  <head>
+    <title tal:content="template/title">The title</title>
+    <meta http-equiv="content-type" content="text/html;charset=utf-8">
+  </head>
+  <body>
+    <table cellpadding="1" cellspacing="1" border="1">
+      <thead>
+        <tr><td rowspan="1" colspan="3">Test OfficeJS Notebook UI</td></tr>
+      </thead>
+      <tbody>
+        <tal:block metal:use-macro="here/Zuite_CommonTemplate/macros/init" />
+        <!-- Clean Up -->
+        <tr>
+          <td>open</td>
+          <td>${base_url}/web_site_module/officejs_notebook/</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>//a[@data-i18n="Storages"]</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>click</td>
+          <td>//a[@data-i18n="Storages"]</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>link=Erp5</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>click</td>
+          <td>link=Erp5</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>name=erp5_url</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>type</td>
+          <td>name=erp5_url</td>
+          <td>${base_url}/web_site_module/renderjs_runner/</td>
+        </tr>
+        <tr>
+          <td>click</td>
+          <td>name=submit</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>link=Add</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>click</td>
+          <td>link=Add</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>//button[@data-i18n='Save']</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>id=title</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>store</td>
+          <td tal:content="python: 'test_text_%s' % DateTime().strftime('%Y%m%d%H%M%S')">Titre</td>
+          <td>title</td>
+        </tr>
+        <tr>
+          <td>store</td>
+          <td tal:content="python: 'Test Reference %s' % DateTime()">Reference</td>
+          <td>reference</td>
+        </tr>
+        <tr>
+          <td>store</td>
+          <td tal:content="python: 'Test Language %s' % DateTime()">Language</td>
+          <td>language</td>
+        </tr>
+        <tr>
+          <td>store</td>
+          <td tal:content="python: 'Test Version %s' % DateTime()">Version</td>
+          <td>version</td>
+        </tr>
+        <tr>
+          <td>store</td>
+          <td tal:content="python: 'Test Description %s' % DateTime()">Description</td>
+          <td>description</td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>//span[@role="presentation"]</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>type</td>
+          <td>//input[@title='Title']</td>
+          <td>${title}</td>
+        </tr>
+        <tr>
+          <td>type</td>
+          <td>//input[@title='Reference']</td>
+          <td>${reference}</td>
+        </tr>
+        <tr>
+          <td>type</td>
+          <td>//input[@title='Version']</td>
+          <td>${version}</td>
+        </tr>
+        <tr>
+          <td>type</td>
+          <td>//input[@title='Language']</td>
+          <td>${language}</td>
+        </tr>
+        <tr>
+          <td>type</td>
+          <td>//textarea[@title='Description']</td>
+          <td>${description}</td>
+        </tr>
+        <tr>
+          <td>click</td>
+          <td>//button[@data-i18n='Save']</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>//div[@data-gadget-scope="notification"]//button[text()='Data Updated']</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>click</td>
+          <td>//a[@data-i18n="Synchronize"]</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>link=${title}</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>click</td>
+          <td>link=${title}</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>//a[@data-i18n='Export']</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>click</td>
+          <td>//a[@data-i18n='Export']</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>//iframe[@src="${base_url}/web_site_module/officejs_notebook/app/gadget_jsmd_viewer.html"]</td>
+          <td></td>
+        </tr>
+         <tr>
+          <td>setSpeed</td>
+          <td>2000</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>click</td>
+          <td>name=submit</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>setSpeed</td>
+          <td>0</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>//select[@id="format"]</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>select</td>
+          <td>//select[@id="format"]</td>
+          <td>value=txt</td>
+        </tr>
+        <tr>
+          <td>click</td>
+          <td>//input[@type="submit"]</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>//select[@id="format"]</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>select</td>
+          <td>//select[@id="format"]</td>
+          <td>value=html</td>
+        </tr>
+        <tr>
+          <td>click</td>
+          <td>//input[@type="submit"]</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>//select[@id="format"]</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>select</td>
+          <td>//select[@id="format"]</td>
+          <td>value=pdf</td>
+        </tr>
+        <tr>
+          <td>click</td>
+          <td>//input[@type="submit"]</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>//a[@data-i18n="Cancel"]</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>click</td>
+          <td>//a[@data-i18n="Cancel"]</td>
+          <td></td>
+        </tr>
+      </tbody>
+    </table>
+  </body>
+</html>
\ No newline at end of file