[erp5_web_renderjs_ui] Readonly relationfield value is now displayed as title link

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_relation_input_html.html

@@ -11,6 +11,11 @@
     <script src="gadget_global.js" type="text/javascript"></script>
     <script src="gadget_erp5_relation_input.js" type="text/javascript"></script>
 
+    <script id="relation-link-template" type="text/x-handlebars-template">
+      <div>
+        <a href={{href}} class="{{class_name}}" >{{value}}</a>
+      </div>
+    </script>
 
     <script id="relation-input-template" type="text/x-handlebars-template">
       <div class="relation-input ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear ui-input-has-icon {{readonly}}">
@@ -20,11 +25,8 @@
         </div>
         <a href={{href}} tabindex="-1" class="{{class_name}}" >Jump to this document</a>
       </div>
-        
-
     </script>
 
-
     <script id="relation-listview-template" type="text/x-handlebars-template">
       {{#if list.length}}
         <!--li class="ui-autocomplete ui-li ui-li-divider ui-bar-inherit ui-first-child" role="heading">Select from the {{list.length}} Search Results</li-->

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_relation_input_html.xml

@@ -234,7 +234,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>952.41816.36917.26982</string> </value>
+                <value> <string>953.40964.5224.43468</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -252,7 +252,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1468854973.0</float>
+                        <float>1472734695.04</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_relation_input_js.js

@@ -7,6 +7,12 @@
 
 
   var gadget_klass = rJS(window),
+
+    relation_link_source = gadget_klass.__template_element
+                         .getElementById("relation-link-template")
+                         .innerHTML,
+    relation_link_template = Handlebars.compile(relation_link_source),
+
     relation_input_source = gadget_klass.__template_element
                          .getElementById("relation-input-template")
                          .innerHTML,
@@ -20,7 +26,6 @@
 
     searching = "ui-btn ui-corner-all ui-btn-icon-notext" +
         " ui-input-clear ui-icon-spinner ui-icon-spin",
-    searched = "ui-hidden-accessible",
     jump_on = "ui-btn ui-corner-all ui-btn-icon-notext " +
       "ui-icon-plane ui-shadow-inset ui-btn-inline",
     jump_off = "ui-btn ui-corner-all ui-btn-icon-notext " +
@@ -38,7 +43,9 @@
     /////////////////////////////////////////////////////////////////
     // Init local properties
     .ready(function (my_gadget) {
-      my_gadget.props = {};
+      my_gadget.props = {
+        input_deferred: RSVP.defer()
+      };
       return my_gadget.getElement()
         .push(function (element) {
           my_gadget.props.element = element;
@@ -62,6 +69,7 @@
     // declared methods
     /////////////////////////////////////////////////////////////////
     .declareMethod('render', function (options, options2) {
+
       var gadget = this,
         field_json = options.field_json || {},
         target_url,
@@ -73,6 +81,26 @@
         value = "",
         not_selected = true,
         index = options2.index || 0;
+      gadget.props.field_json = field_json;
+
+      if (!field_json.editable) {
+        if (field_json.relation_item_relative_url) {
+          return gadget.getUrlFor({
+            command: 'index',
+            options: {
+              jio_key: field_json.relation_item_relative_url[index]
+            }
+          })
+            .push(function (href) {
+              gadget.props.element.innerHTML = relation_link_template({
+                value: field_json.default[index] || "",
+                href: href
+              });
+            });
+        }
+        return;
+      }
+
       gadget.props.index = index;
       gadget.props.addRelationInput = options2.addRelationInput;
       if (field_json.default.value) {
@@ -93,7 +121,6 @@
       if (relation_item_relative_url) {
         target_url = relation_item_relative_url[index];
       }
-      gadget.props.field_json = field_json;
       gadget.props.query = QueryFactory.create(new URI(field_json.query).query(true).query);
       gadget.props.create_object_type = create_object;
       if (!value && target_url && uid) {
@@ -166,14 +193,19 @@
           gadget.props.new_tag_div = gadget.props.element.querySelector(".new_tag");
           gadget.props.spinner = gadget.props.element.querySelector("a");
           gadget.props.plane = gadget.props.element.querySelector("a");
+          gadget.props.input_deferred.resolve();
         });
       return queue;
     })
+
     .declareMethod('getContent', function (options, options2) {
       var element = this.props.element.querySelector('input'),
         result = {},
         tmp = {},
         field_json = this.props.field_json;
+      if (!field_json.editable) {
+        return {};
+      }
       if (options.format === "erp5") {
         if (this.props.plane.className === jump_add) {
           if (options2 && options2.type === 'MultiRelationField') {
@@ -208,11 +240,11 @@
     .declareService(function () {
       var gadget = this,
         props = gadget.props,
-        input = gadget.props.element.querySelector('input'),
+        input,
         search_query,
         simple_query,
         field_json = props.field_json,
-        ul = gadget.props.element.querySelector(".search_ul");
+        ul;
 
       function generateList(event) {
         var index = field_json.catalog_index,
@@ -315,6 +347,13 @@
         props.plane.className = jump_unknown;
       }
 
+      return new RSVP.Queue()
+        .push(function () {
+          return gadget.props.input_deferred.promise;
+        })
+        .push(function () {
+          input = gadget.props.element.querySelector('input');
+          ul = gadget.props.element.querySelector(".search_ul");
           return RSVP.all([
             loopEventListener(input, 'input', false, generateList),
             loopEventListener(input, 'blur', false, function () {
@@ -345,8 +384,8 @@
                   }
                   return queue;
                 });
-        })]
-        );
+            })]);
+        });
     })
 
     .declareService(function () {
@@ -355,7 +394,11 @@
       function notifyInvalid(evt) {
         return gadget.notifyInvalid(evt.target.validationMessage);
       }
-
+      return new RSVP.Queue()
+        .push(function () {
+          return gadget.props.input_deferred.promise;
+        })
+        .push(function () {
           // Listen to input change
           return loopEventListener(
             gadget.props.element.querySelector('input'),
@@ -363,7 +406,9 @@
             false,
             notifyInvalid
           );
+        });
     })
+
     .declareService(function () {
       ////////////////////////////////////
       // Check field validity when the value changes
@@ -373,6 +418,11 @@
       function notifyChange() {
         return gadget.notifyChange();
       }
+      return new RSVP.Queue()
+        .push(function () {
+          return gadget.props.input_deferred.promise;
+        })
+        .push(function () {
           return loopEventListener(
             gadget.props.element.querySelector('input'),
             'change',
@@ -380,6 +430,7 @@
             notifyChange
           );
         });
+    });
 
 }(window, rJS, RSVP, URI, loopEventListener, promiseEventListener,
   SimpleQuery, ComplexQuery, Query, QueryFactory, Handlebars));

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_relation_input_js.xml

@@ -236,7 +236,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>952.37517.63345.57514</string> </value>
+                <value> <string>953.41070.65129.47718</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -254,7 +254,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1468595439.59</float>
+                        <float>1472800801.64</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_zuite/relationfield_zuite/testMultiRelationFieldNonEditable.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>testMultiRelationFieldNonEditable</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_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_zuite/relationfield_zuite/testMultiRelationFieldNonEditable.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 RenderJS UI</title>
+</head>
+<body>
+<table cellpadding="1" cellspacing="1" border="1">
+<thead>
+<tr><td rowspan="1" colspan="3">Test RenderJS UI</td></tr>
+</thead><tbody>
+<tal:block metal:use-macro="here/Zuite_CommonTemplate/macros/init" />
+
+<!-- Clean Up -->
+<tr>
+  <td>open</td>
+  <td>${base_url}/foo_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/renderjs_runner/#/foo_module</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//a[@data-i18n='Add']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>click</td>
+  <td>link=Add</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//button[@data-i18n='Proceed']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>select</td>
+  <td>//select[@name='field_your_portal_type']</td>
+  <td>label=Foo</td>
+</tr>
+<tr>
+  <td>click</td>
+  <td>//button[@data-i18n='Proceed']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForTextPresent</td>
+  <td>Save</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertTextPresent</td>
+  <td>Quantity</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//a[@data-i18n='Views']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>click</td>
+  <td>//a[@data-i18n='Views']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//a[@data-i18n='Relation Fields']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>click</td>
+  <td>//a[@data-i18n='Relation Fields']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//input[@name='field_my_foo_category_title']</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>type</td>
+  <td>//input[@name='field_my_foo_category_title']</td>
+  <td>a1</td>
+</tr>
+
+<tr>
+  <td>fireEvent</td>
+  <td>//input[@name='field_my_foo_category_title']</td>
+  <td>input</td>
+</tr>
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//li[@data-relative-url='portal_categories/foo_category/a/a1']</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>fireEvent</td>
+  <td>//input[@name='field_my_foo_category_title']</td>
+  <td>blur</td>
+</tr>
+
+<tr>
+  <td>click</td>
+  <td>//li[@data-relative-url='portal_categories/foo_category/a/a1']</td>
+  <td></td>
+</tr>
+
+
+
+<tr>
+  <td>type</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[1]//input</td>
+  <td>A New Foo</td>
+</tr>
+
+<tr>
+  <td>fireEvent</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[1]//input</td>
+  <td>input</td>
+</tr>
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//li[@name="Foo"]
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>fireEvent</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[1]//input</td>
+  <td>blur</td>
+</tr>
+
+<tr>
+  <td>click</td>
+  <td>//li[@name="Foo"]
+  <td></td>
+</tr>
+
+
+
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[2]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>verifyElementPresent</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[1]//a[contains(@class, "ui-icon-plus")]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>type</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[2]//input</td>
+  <td>Another Foo</td>
+</tr>
+
+
+
+<tr>
+  <td>fireEvent</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[2]//input</td>
+  <td>input</td>
+</tr>
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//li[@name="Foo"]
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>fireEvent</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[2]//input</td>
+  <td>blur</td>
+</tr>
+
+<tr>
+  <td>click</td>
+  <td>//li[@name="Foo"]
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>verifyElementPresent</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[2]//a[contains(@class, "ui-icon-plus")]</td>
+  <td></td>
+</tr>
+
+
+<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/save" />
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[1]//input</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>verifyValue</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[1]//input</td>
+  <td>A New Foo</td>
+</tr>
+
+<tr>
+  <td>verifyValue</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[2]//input</td>
+  <td>Another Foo</td>
+</tr>
+
+<!-- Switch back to readonly mode -->
+<tr>
+  <td>click</td>
+  <td>//div[@data-gadget-scope='header']//a[text()='Views' and contains(@href, '#!change') and contains(@href, 'n.page=tab')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//div[@data-gadget-scope='header']//a[text()='Viewable' and contains(@href, '#!change')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>click</td>
+  <td>//div[@data-gadget-scope='header']//a[text()='Viewable' and contains(@href, '#!change')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//a[text()='Relation Fields' and contains(@href, '#!change') and contains(@href, 'u.editable=')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>click</td>
+  <td>//a[text()='Relation Fields' and contains(@href, '#!change') and contains(@href, 'u.editable=')]</td>
+  <td></td>
+</tr>
+
+<!-- Check airplane link -->
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//a[text()='A New Foo']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>click</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//a[text()='A New Foo']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//a[@data-i18n="Foo: A New Foo"]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>click</td>
+  <td>//a[@data-i18n="Foo: A New Foo"]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//a[text()='Another Foo']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>click</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//a[text()='Another Foo']</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//a[@data-i18n="Foo: Another Foo"]</td>
+  <td></td>
+</tr>
+
+</tbody></table>
+</body>
+</html>
\ No newline at end of file

bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_zuite/relationfield_zuite/testRelationFieldCreate.zpt

@@ -199,6 +199,39 @@
   <td>a1</td>
 </tr>
 
+<!-- Check airplane link -->
+<tr>
+  <td>click</td>
+  <td>//div[@data-gadget-scope='field_my_successor_title']//a[contains(@class, "ui-icon-plane")]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//a[@data-i18n="Editable"]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>verifyText</td>
+  <td>//div[@data-gadget-scope="field_my_title"]//p</td>
+  <td>A new foo</td>
+</tr>
+
+<tr>
+  <td>click</td>
+  <td>//a[@data-i18n="Foo: A new foo"]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//div[@data-gadget-scope='field_my_successor_title']//a[contains(@class, "ui-icon-plane")]</td>
+  <td></td>
+</tr>
+
 </tbody></table>
 </body>
 </html>
\ No newline at end of file

bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_zuite/relationfield_zuite/testRelationFieldNonEditable.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>testRelationFieldNonEditable</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_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_zuite/relationfield_zuite/testRelationFieldNonEditable.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 RenderJS UI</title>
+</head>
+<body>
+<table cellpadding="1" cellspacing="1" border="1">
+<thead>
+<tr><td rowspan="1" colspan="3">Test RenderJS UI</td></tr>
+</thead><tbody>
+<tal:block metal:use-macro="here/Zuite_CommonTemplate/macros/init" />
+
+<!-- Clean Up -->
+<tr>
+  <td>open</td>
+  <td>${base_url}/foo_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/renderjs_runner/#/foo_module</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//a[@data-i18n='Add']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>click</td>
+  <td>link=Add</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//button[@data-i18n='Proceed']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>select</td>
+  <td>//select[@name='field_your_portal_type']</td>
+  <td>label=Foo</td>
+</tr>
+<tr>
+  <td>click</td>
+  <td>//button[@data-i18n='Proceed']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForTextPresent</td>
+  <td>Save</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertTextPresent</td>
+  <td>Quantity</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//a[@data-i18n='Views']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>click</td>
+  <td>//a[@data-i18n='Views']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//a[@data-i18n='Relation Fields']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>click</td>
+  <td>//a[@data-i18n='Relation Fields']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//input[@name='field_my_successor_title']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>type</td>
+  <td>//input[@name='field_my_successor_title']</td>
+  <td>A new foo</td>
+</tr>
+
+<tr>
+  <td>fireEvent</td>
+  <td>//input[@name='field_my_successor_title']</td>
+  <td>input</td>
+</tr>
+
+
+
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//li[@name='Foo']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>fireEvent</td>
+  <td>//input[@name='field_my_successor_title']</td>
+  <td>blur</td>
+</tr>
+
+<tr>
+  <td>click</td>
+  <td>//li[@name='Foo']</td>
+  <td></td>
+</tr>
+
+
+
+<tr>
+  <td>type</td>
+  <td>//input[@name='field_my_foo_category_title']</td>
+  <td>a1</td>
+</tr>
+
+<tr>
+  <td>fireEvent</td>
+  <td>//input[@name='field_my_foo_category_title']</td>
+  <td>input</td>
+</tr>
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//li[@data-relative-url='portal_categories/foo_category/a/a1']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>fireEvent</td>
+  <td>//input[@name='field_my_foo_category_title']</td>
+  <td>blur</td>
+</tr>
+
+<tr>
+  <td>click</td>
+  <td>//li[@data-relative-url='portal_categories/foo_category/a/a1']</td>
+  <td></td>
+</tr>
+
+<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/save" />
+
+<tr>
+  <td>click</td>
+  <td>//a[@data-i18n="Views"]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//a[@data-i18n='Relation Fields']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>click</td>
+  <td>//a[@data-i18n='Relation Fields']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//input[@name='field_my_successor_title']</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>verifyValue</td>
+  <td>//input[@name='field_my_successor_title']</td>
+  <td>A new foo</td>
+</tr>
+
+<tr>
+  <td>verifyValue</td>
+  <td>//input[@name='field_my_foo_category_title']</td>
+  <td>a1</td>
+</tr>
+
+<!-- Switch back to readonly mode -->
+<tr>
+  <td>click</td>
+  <td>//div[@data-gadget-scope='header']//a[text()='Views' and contains(@href, '#!change') and contains(@href, 'n.page=tab')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//div[@data-gadget-scope='header']//a[text()='Viewable' and contains(@href, '#!change')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>click</td>
+  <td>//div[@data-gadget-scope='header']//a[text()='Viewable' and contains(@href, '#!change')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//a[text()='Relation Fields' and contains(@href, '#!change') and contains(@href, 'u.editable=')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>click</td>
+  <td>//a[text()='Relation Fields' and contains(@href, '#!change') and contains(@href, 'u.editable=')]</td>
+  <td></td>
+</tr>
+
+<!-- Check airplane link -->
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//div[@data-gadget-scope='field_my_successor_title']//a[text()='A new foo']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>click</td>
+  <td>//div[@data-gadget-scope='field_my_successor_title']//a[text()='A new foo']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//a[@data-i18n="Foo: A new foo"]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>click</td>
+  <td>//a[@data-i18n="Foo: A new foo"]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//div[@data-gadget-scope='field_my_successor_title']//a[text()='A new foo']</td>
+  <td></td>
+</tr>
+
+</tbody></table>
+</body>
+</html>
\ No newline at end of file