erp5_web_renderjs_ui: reimplement multi relation

cf7e940c · Xiaowu Zhang · 3eb87be0 · cf7e940c · cf7e940c · cf7e940c
Commit cf7e940c authored Jun 16, 2016 by Xiaowu Zhang
12 changed files
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_multirelationstringfield_html.html
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_multirelationstringfield_html.html
@@ -5,19 +5,106 @@
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <title>ERP5 MultiRelationstringfield</title>

-    <!-- renderjs -->
    <script src="rsvp.js" type="text/javascript"></script>
    <script src="renderjs.js" type="text/javascript"></script>
    <script src="URI.js" type="text/javascript"></script>
-    <!-- custom script -->
-    <script src="gadget_erp5_field_multirelationstring.js" type="text/javascript"></script>
+    <script src="handlebars.js" type="text/javascript"></script>
    <script src="gadget_global.js" type="text/javascript"></script>
+    <script src="gadget_erp5_field_multirelationstring.js" type="text/javascript"></script>
+
+
+    <script id="create-template" type="text/x-handlebars-template">
+      <div class="ui-controlgroup ui-controlgroup-horizontal ui-corner-all">
+        <div class="ui-controlgroup-controls">
+          <li class="ui-first-child ui-last-child ui-input-text">Create:{{text}}
+          </li>
+      </div>
+    </script>
+

+    <script id="single-input-template" type="text/x-handlebars-template">
+      <fieldset class='single_input add_after'>
+        <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear ui-input-has-icon">
+          <input type='text'  autocomplete="off" data-enhanced="true" >
+          <a href="#" tabindex="-1" class="ui-hidden-accessible">&nbsp;</a>
+          <div class="ui-tag-list ui-tag-list-inset"></div>
+          <ul class="ui-listview ui-corner-all search_ul"></ul>
+        </div>
+        <a href='#' tabindex="-1" class="ui-btn ui-corner-all ui-btn-icon-notext ui-icon-plane ui-shadow-inset ui-btn-inline ui-disabled">Jump to this document</a>
+      </fieldset>
+    </script>
+
+
+    <script id="multi-input-template" type="text/x-handlebars-template">
+      <div class="container">
+        {{#each input}}
+          <fieldset class="single_input">
+            <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear ui-input-has-icon {{../readonly}}">
+              {{#if create_object}}
+                <input type='text' title="{{title}}" name="{{name}}" autocomplete="off" data-enhanced="true" value="{{value}}" data-create-object="{{create_object}}">
+              {{else}}
+                 <input type='text' title="{{title}}" name="{{name}}" autocomplete="off" data-enhanced="true" value="{{value}}" >
+              {{/if}}
+              <a href="#" tabindex="-1" class="ui-hidden-accessible">&nbsp;</a>
+              <div class="ui-tag-list ui-tag-list-inset">
+                {{#if create_object}}
+                  <div class="ui-controlgroup ui-controlgroup-horizontal ui-corner-all">
+                    <div class="ui-controlgroup-controls">
+                     <li class="ui-first-child ui-last-child ui-input-text">Create:{{create_object}}
+                     </li>
+                    </div>
+                  </div>
+                {{/if}}
+              </div>
+              <ul class="ui-listview ui-corner-all search_ul"></ul>
+            </div>
+            {{#if create_object}}
+               <a href='#' tabindex="-1" class="ui-btn ui-corner-all ui-btn-icon-notext ui-icon-plus ui-shadow-inset ui-btn-inline ui-disabled" >Jump to this document</a>
+            {{else}}
+             {{#if error_text}}
+                <a href='#' tabindex="-1" class="ui-btn ui-corner-all ui-btn-icon-notext ui-icon-warning ui-shadow-inset ui-btn-inline ui-disabled">Jump to this document</a>
+             {{else}}
+               {{#if jump_unknown}}
+                  <a href='#' tabindex="-1" class="ui-btn ui-corner-all ui-btn-icon-notext ui-icon-warning ui-shadow-inset ui-btn-inline ui-disabled">Jump to this document</a>
+               {{else}}
+                {{#if href}}
+                  {{#if ../allow_jump}}
+                    <a href={{href}} tabindex="-1" class="ui-btn ui-corner-all ui-btn-icon-notext ui-icon-plane ui-shadow-inset ui-btn-inline">Jump to this document</a>
+                  {{else}}
+                    <a href='#' tabindex="-1" class="ui-btn ui-corner-all ui-btn-icon-notext ui-icon-plane ui-shadow-inset ui-btn-inline ui-disabled">Jump to this document</a>
+                  {{/if}}
+                {{else}}
+                  <a href='#' tabindex="-1" class="ui-btn ui-corner-all ui-btn-icon-notext ui-icon-plane ui-shadow-inset ui-btn-inline ui-disabled">Jump to this document</a>
+                {{/if}}
+              {{/if}}
+            {{/if}}
+          {{/if}}
+          </fieldset>
+       {{/each}}
+     </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>
+        {{#each list}}
+          <li class="ui-li-static ui-body-inherit ui-icon-mail-forward ui-btn-icon-right" data-relative-url={{id}} >{{value}}</li>
+        {{/each}}
+        {{#each type}}
+         <li class="ui-li-static ui-body-inherit ui-bar-inherit ui-icon-plus ui-btn-icon-right" data-create-object="{{this}}" name="{{this}}">Create New {{this}}: {{../value}}</li>
+        {{/each}}
+      {{else}}
+        <li class="ui-autocomplete ui-li ui-li-divider ui-bar-inherit ui-first-child" role="heading">No result</li>
+        {{#each type}}
+         <li class="ui-li-static ui-body-inherit ui-bar-inherit ui-icon-plus ui-btn-icon-right" data-create-object="{{this}}" name="{{this}}">Create New {{this}}: {{../value}}</li>
+        {{/each}}
+      {{/if}}
+      <li class="ui-li-static ui-body-inherit ui-last-child ui-bar-inherit ui-icon-search ui-btn-icon-right" data-explore=true >Explore the Search Result List</li>
+    </script>

  </head>
+
  <body>
-  <div>
-    <div class="div_field">
-    </div>
  </body>
 </html>
\ No newline at end of file
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_multirelationstringfield_js.js
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_multirelationstringfield_js.js
-/*global window, document, rJS, RSVP, URI, loopEventListener,
-promiseEventListener */
-/*jslint indent: 2, maxerr: 3 */
-(function (window, document, rJS, RSVP, URI, loopEventListener,
-  promiseEventListener) {
+/*jslint indent: 2, maxerr: 3, nomen: true */
+/*global window, rJS, RSVP, URI, loopEventListener, Handlebars, Event, document,
+ SimpleQuery, ComplexQuery, Query, QueryFactory, promiseEventListener, $*/
+(function (window, rJS, RSVP, URI, loopEventListener, promiseEventListener, document,
+  SimpleQuery, ComplexQuery, Query, QueryFactory, Handlebars, Event, $) {
  "use strict";

-  ////////////////////////////////////
-  // Some methods
-  ////////////////////////////////////

-  // XXX: re-factor.
-  // clear the autocomplete options, reset the plane tag and remove the create
-  // new tag. Since plane and new tag sometimes need to stay, "override_tag"
-  // can be set to something arbitrary to prevent removal of the respective
-  // element.
-
-  function clearResults(wrapper, my_override_tag) {
-    function dump(my_parent, my_tag_name) {
-      var child_list = my_parent.children,
-        i,
-        i_len,
-        child;
-
-      // XXX: now that link ("A") stays, rewrite the whole element clearing!
-      for (i = 0, i_len = child_list.length; i < i_len; i += 1) {
-        child = child_list[i];
-        if (child && child.tagName === my_tag_name) {
-          if (my_tag_name === "A") {
-            child.className += " ui-disabled";
-          } else {
-            my_parent.removeChild(child);
-          }
-        }
-      }
-    }
-
-    // always clear autocomplete results (UL), the create new record input (DIV)
-    // will only be removed on new searches, while the plane (A) is disabled
-    dump(wrapper, "UL");
-    dump(wrapper, my_override_tag || "DIV");
-    dump(wrapper.parentElement, my_override_tag || "A");
-  }
-
-  // creates a tag indicating the value entered will be added as new object
-  // of displayed type when the form is submitted. Clicking the tag will
-  // reset the field, because otherwise accidentially typing something always
-  // requires to reselect and manually backspace the value. Click to reset is
-  // much easier/faster
-  function createNewTag(my_gadget, i) {
-    var props = my_gadget.props,
+  var gadget_klass = rJS(window),
+    single_input_source = gadget_klass.__template_element
+                         .getElementById("single-input-template")
+                         .innerHTML,
+    single_input_template = Handlebars.compile(single_input_source),
+
+    relation_listview_source = gadget_klass.__template_element
+                         .getElementById("relation-listview-template")
+                         .innerHTML,
+    relation_listview_template = Handlebars.compile(relation_listview_source),
+    multi_input_source = gadget_klass.__template_element
+                         .getElementById("multi-input-template")
+                         .innerHTML,
+    multi_input_template = Handlebars.compile(multi_input_source),
+    create_source = gadget_klass.__template_element
+                         .getElementById("create-template")
+                         .innerHTML,
+    create_template = Handlebars.compile(create_source),
+
+    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 " +
+      "ui-icon-plane ui-shadow-inset ui-btn-inline ui-disabled",
+    jump_add = "ui-btn ui-corner-all ui-btn-icon-notext " +
+      "ui-icon-plus ui-shadow-inset ui-btn-inline ui-disabled",
+    jump_unknown = "ui-btn ui-corner-all ui-btn-icon-notext " +
+      "ui-icon-warning ui-shadow-inset ui-btn-inline ui-disabled";
+
+
+
+
+  function listenToInput(gadget, index) {
+    var props = gadget.props,
+      div = gadget.props.element.querySelectorAll('.single_input')[index],
+      input = div.querySelector('input'),
+      search_query,
+      simple_query,
+      plane = div.querySelector('.ui-btn'),
      field_json = props.field_json,
-      tag,
-      group,
-      controls,
-      info,
-      link;
-
-    info = field_json.portal_types.filter(function (item, pos, self) {
-      return self.indexOf(item) === pos;
-    }).join("");
-
-    link = document.createElement("a");
-    link.setAttribute("href", "#");
-    link.className = "ui-first-child ui-last-child ui-btn ui-corner-all " +
-      "ui-btn-inherit ui-btn-active ui-btn-icon-right ui-icon-delete";
-    link.textContent = "Create: " + info;
-    my_gadget.props.select_uid_list[i] = "_newContent_" + info;
-
-    controls = document.createElement("div");
-    controls.className = "ui-controlgroup-controls";
-    controls.appendChild(link);
-
-
-    group = document.createElement("div");
-    group.className = "ui-controlgroup ui-controlgroup-horizontal " +
-      "ui-corner-all";
-    group.appendChild(controls);
-
-    tag = document.createElement("div");
-    tag.className = "ui-tag-list ui-tag-list-inset";
-    tag.appendChild(group);
-
-    return tag;
-  }
-
-  // creates a set of autocomplete suggestings. Currently this is only a plain
-  // list of elements. The list will display the number of results (>10 or 
-  // exact). Clicking on an option will set this option as field value
-  function createResults(my_result_list, index) {
-    var list = document.createElement("ul"),
-      head = document.createElement("li"),
-      str = "ui-li-static ui-body-inherit ui-icon-mail-forward " +
-        "ui-btn-icon-right",
-      len = my_result_list.length,
-      prefix = "",
-      item,
-      value_dict,
-      result,
-      i;
-
-    if (len === 11) {
-      prefix = ">";
-      len = 10;
+      spinner = div.querySelector('.ui-hidden-accessible'),
+      create_div = div.querySelector(".ui-tag-list"),
+      ul = div.querySelector(".search_ul");
+
+    function generateList(event) {
+      var catalog_index = field_json.catalog_index,
+        begin_from = props.begin_from || 0,
+        lines = field_json.lines || 10,
+        my_value = event.target.value;
+
+      ul.innerHTML = "";
+      create_div.innerHTML = "";
+      plane.className = jump_off;
+      props.jump_url[index] = "";
+      if (my_value === "") {
+        spinner.className = searched;
+        return;
+      }
+      simple_query = new SimpleQuery({
+        key: catalog_index,
+        value: my_value
+      });
+      spinner.className = searching;
+      search_query =  Query.objectToSearchText(new ComplexQuery({
+        operator: "AND",
+        query_list: [gadget.props.query, simple_query]
+      }));
+      return new RSVP.Queue()
+        .push(function () {
+          return gadget.jio_allDocs({
+            "query": search_query,
+            "limit": [begin_from, begin_from + lines],
+            "select_list": [catalog_index]
+          });
+        })
+        .push(function (result) {
+          var list = [],
+            i,
+            type = field_json.allow_creation ? field_json.portal_types : [],
+            html;
+          for (i = 0; i < result.data.rows.length; i += 1) {
+            list.push({
+              id: result.data.rows[i].id,
+              value: result.data.rows[i].value[catalog_index]
+            });
+          }
+          spinner.className = searched;
+          html =  relation_listview_template({
+            list: list,
+            type: type,
+            value: my_value
+          });
+          $(ul).toggle();
+          ul.innerHTML = html;
+          $(ul).toggle();
+        });
    }

-    head.className = "ui-autocomplete ui-li ui-li-divider ui-bar-inherit";
-    head.setAttribute("role", "heading");
-    head.textContent = prefix + " " + len + " Result(s)";
-    list.appendChild(head);

-    for (i = 0; i < len; i += 1) {
-      result = my_result_list[i];
-      value_dict = result.value;
-      item = document.createElement("li");
-      item.className = str;
+    function setSelectedElement(event) {
+      var element = event.target,
+        jump_url = element.getAttribute("data-relative-url"),
+        create_object_type = element.getAttribute("data-create-object"),
+        explore = element.getAttribute("data-explore"),
+        tmp;
+      ul.innerHTML = "";
+
+      if (index === gadget.props.last_index - 1 && !explore) {
+        props.jump_url[gadget.props.last_index] = "";
+        tmp = document.createElement("fieldset");
+        tmp.innerHTML = single_input_template();
+        gadget.props.container.appendChild(tmp);
+        gadget.props.input_list.push({
+          "title": field_json.key,
+          "name": field_json.key,
+          "value": "",
+          "href": "",
+          "create_object": ""
+        });
+        gadget.props.last_index += 1;
+        gadget.props.element.dispatchEvent(new Event('add_relation_input'));
+      }
+      if (jump_url) {
+        props.jump_url[index] = jump_url;
+        input.value = element.textContent;
+        return gadget.getUrlFor({
+          command: 'index',
+          options: {
+            jio_key: jump_url
+          }
+        }).push(function (url) {
+          if (field_json.allow_jump) {
+            plane.href = url;
+            plane.className = jump_on;
+          }
+        });
+      }
+      if (create_object_type) {
+        input.setAttribute("data-create-object", create_object_type);
+        plane.className = jump_add;
+        create_div.innerHTML = create_template({'text': create_object_type});
+        return;
+      }

-      // NOTE: gadget does not properties it gets here, so just concat
-      // NOTE: if doing more complex UI, beware the textContent value won't
-      // work, because currently it's used to retrieve the link from
-      // the last autocomplete query results!
-      item.textContent = value_dict[index];
-      item.setAttribute("data-relative-url", result.id);
-      item.setAttribute("name", value_dict.uid);
-      list.appendChild(item);
+      if (explore) {
+        return gadget.getFormContent({
+          format: "json"
+        })
+          .push(function (content) {
+            return gadget.redirect({
+              command: 'index',
+              options: {
+                page: "relation_search",
+                url: gadget.props.field_json.url,
+                extended_search: Query.objectToSearchText(simple_query),
+                view: gadget.props.field_json.view,
+                back_field: gadget.props.field_json.key,
+                target_index: index
+              },
+              form_content: content
+            });
+          });
+      }
+      plane.className = jump_unknown;
    }

-    list.className = "ui-listview ui-corner-all";
-    list.firstChild.className += " ui-first-child";
-    list.lastChild.className += " ui-last-child";
-
-    return list;
-  }
-
-  ////////////////////////////////////
-  // Promise methods
-  ////////////////////////////////////
-
-  // notify change of field value, done here, since called from multiple sources
-  function notifyChange(my_gadget) {
    return RSVP.all([
-      my_gadget.checkValidity(),
-      my_gadget.notifyChange()
-    ]);
-  }
-
-
-
-
-  function createSingleRelationField(gadget, i, allow_jump) {
-    var div_input = document.createElement("div"),
-      wrapper = document.createElement("div"),
-      fieldset = document.createElement("fieldset"),
-      a1 = document.createElement("a"),
-      a2 = document.createElement("a"),
-      field_json = gadget.props.field_json,
-      value = field_json.value || field_json.default,
-      input = document.createElement("input");
-    //create element
-    wrapper.setAttribute("class", "sub" + field_json.key + "_" + i);
-    div_input.setAttribute("class", "ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear ui-input-has-icon");
-    input.setAttribute("type", "text");
-    input.setAttribute("autocomplete", "off");
-    input.setAttribute("data-enhanced", "true");
-    a1.setAttribute("herf", "#");
-    a1.setAttribute("tabindex", "-1");
-    a1.setAttribute("class", "ui-hidden-accessible");
-    a1.innerText = "&nbsp;";
-
-    a2.setAttribute("herf", "#");
-    a2.setAttribute("tabindex", "-1");
-    a2.setAttribute("class", "ui-btn ui-corner-all ui-btn-icon-notext ui-icon-plane ui-shadow-inset ui-btn-inline ui-disabled");
-    a2.innerText = "Jump to this document";
-
-    div_input.appendChild(input);
-    div_input.appendChild(a1);
-    wrapper.appendChild(div_input);
-    wrapper.appendChild(a2);
-    fieldset.appendChild(wrapper);
-    gadget.props.element.querySelector(".div_field").appendChild(fieldset);
-
-    //initialize
-    input.setAttribute('value', value[i] || "");
-    input.setAttribute('name', "sub" + field_json.key + "_" + i);
-    if (field_json.editable !== 1) {
-      input.setAttribute('readonly', 'readonly');
-      div_input.className += ' ui-state-readonly ';
-    }
-    if (field_json.allow_jump && allow_jump) {
-      return new RSVP.Queue()
-        .push(function () {
-          return gadget.getUrlFor({
-            command: 'index',
-            options: {
-              jio_key: field_json.relation_item_relative_url[i]
+      loopEventListener(input, 'input', false, generateList),
+      loopEventListener(input, 'blur', false, function () {
+        return new RSVP.Queue()
+          .push(function () {
+            return RSVP.any([
+              RSVP.delay(200),
+              promiseEventListener(ul, "click", true)
+            ]);
+          })
+          .push(function (event) {
+            var tmp;
+            if (event) {
+              return setSelectedElement(event);
+            }
+            if (ul.innerHTML) {
+              ul.innerHTML = "";
+              plane.className = jump_unknown;
+              if (index === gadget.props.last_index - 1) {
+                props.jump_url[gadget.props.last_index] = "";
+                tmp = document.createElement("fieldset");
+                tmp.innerHTML = single_input_template();
+                gadget.props.container.appendChild(tmp);
+                gadget.props.input_list.push({
+                  "title": field_json.key,
+                  "name": field_json.key,
+                  "value": "",
+                  "href": "",
+                  "create_object": ""
+                });
+                gadget.props.last_index += 1;
+                gadget.props.element.dispatchEvent(new Event('add_relation_input'));
+              }
            }
          });
-        })
-        .push(function (my_url) {
-          a2.href = my_url;
-          a2.className = "ui-btn ui-corner-all ui-btn-icon-notext " +
-            "ui-icon-plane ui-shadow-inset ui-btn-inline";
-        });
-    }
+      })]
+      );
  }

+
  rJS(window)

    /////////////////////////////////////////////////////////////////
    // ready
    /////////////////////////////////////////////////////////////////
    // Init local properties
-    .ready(function (my_gadget) {
-      return my_gadget.getElement()
+    .ready(function (gadget) {
+      gadget.props = {};
+      return gadget.getElement()
        .push(function (element) {
-          my_gadget.props = {};
-          my_gadget.props.pending_promise_list = [];
-          my_gadget.props.select_uid_list = [];
-          my_gadget.props.element = element;
+          gadget.props.element = element;
        });
    })
+
    /////////////////////////////////////////////////////////////////
    // acquired methods
    /////////////////////////////////////////////////////////////////
-    .declareAcquiredMethod("notifyValid", "notifyValid")
    .declareAcquiredMethod("notifyInvalid", "notifyInvalid")
    .declareAcquiredMethod("notifyChange", "notifyChange")
    .declareAcquiredMethod("jio_allDocs", "jio_allDocs")
    .declareAcquiredMethod("translateHtml", "translateHtml")
    .declareAcquiredMethod("getUrlFor", "getUrlFor")
+    .declareAcquiredMethod("redirect", "redirect")
+    .declareAcquiredMethod("getFormContent", "getFormContent")
+
    /////////////////////////////////////////////////////////////////
    // declared methods
    /////////////////////////////////////////////////////////////////
    .declareMethod('render', function (options) {
      var gadget = this,
        i,
-        url_list = options.field_json.relation_item_relative_url,
-        value_list = options.field_json.value || options.field_json.default;
-      gadget.props.field_json = options.field_json || {};
-      for (i = 0; i < value_list.length && url_list !== undefined && url_list[i] !== undefined; i += 1) {
-        gadget.props.select_uid_list[i] = options.field_json.relation_item_uid[i];
-        createSingleRelationField(gadget, i, true);
+        field_json = options.field_json || {},
+        target_url_list = [],
+        list = [],
+        input = [],
+        create_object,
+        unknown,
+        uid,
+        relation_item_relative_url,
+        value_list;
+      if (field_json.default.format === "json") {
+        create_object = field_json.default.create_object || [];
+        unknown = field_json.default.jump_unknown || [];
+        uid = field_json.default.uid;
+        relation_item_relative_url = field_json.default.relation_item_relative_url;
+        value_list = field_json.default.value || [];
+      } else {
+        create_object = field_json.create_object || [];
+        unknown = field_json.jump_unknown || [];
+        uid = field_json.uid;
+        relation_item_relative_url = field_json.relation_item_relative_url;
+        value_list = field_json.default || [];
      }
-      if (options.field_json.editable === 1) {
-        createSingleRelationField(gadget, i, false);
-        gadget.props.relation_field_number = i;
+      if (relation_item_relative_url) {
+        target_url_list = relation_item_relative_url;
      }
-    })
-    // get content (needs hidden fields, too, when creating new records)
-    .declareMethod('checkValidity', function () {
-      return true;
-    })
-    .declareMethod('getContent', function () {
-      var field_json = this.props.field_json,
-        input_list = this.props.element.querySelectorAll('input'),
-        result = {},
-        i,
-        value = "",
-        i_len,
-        input;
-
-      for (i = 0, i_len = input_list.length; i < i_len; i += 1) {
-        input = input_list[i];
-        if (input.value !== "") {
-          value = value + input.value + "\n";
-          result[this.props.field_json.relation_field_id + "_" + i] = this.props.select_uid_list[i];
-        }
-      }
-      result[field_json.key] = value;
-      return result;
-    })

-    /////////////////////////////////////////////////////////////////
-    // declared services
-    /////////////////////////////////////////////////////////////////
-    .declareService(function () {
-      var gadget = this,
-        i,
-        index_list,
-        createEmptyField,
-        triggerAutocomplete,
-        stop,
-        handler,
-        element_list = gadget.props.element.querySelectorAll('input');
-
-       // trigger autocomplete for field value, on render() with value only sets link
-      triggerAutocomplete = function (my_gadget, my_event, i) {
-        var props = my_gadget.props,
-          field_json = props.field_json,
-          index = field_json.catalog_index,
-          begin_from = props.begin_from || 0,
-          lines = field_json.lines || 11,
-          select_list = [index, "uid"],
-          query_string = " AND (" + index + ':"' + my_event.target.value + '")',
-          result_dict,
-          tag_list,
-          spin,
-          target_div = my_gadget.props.element.querySelector("." + my_event.target.name),
-          wrapper = target_div.querySelector("div.ui-input-text"),
-          no_results;
-
-        spin = target_div.querySelector(".ui-hidden-accessible");
-        return new RSVP.Queue()
-          .push(function () {
-            clearResults(wrapper);
-            spin.className = "ui-btn ui-corner-all ui-btn-icon-notext" +
-              " ui-input-clear ui-icon-spinner ui-icon-spin";
-            return my_gadget.jio_allDocs({
-              "query": new URI(field_json.query).query(true).query + query_string,
-              "limit": [begin_from, begin_from + lines],
-              "select_list": select_list
-            });
-          }).push(function (my_result) {
-            result_dict = my_result.data;
-            spin.className = "ui-hidden-accessible";
-            no_results = result_dict.total_rows === 0;
-
-            // show "new" tag, clicking it will remove it and reset the field!
-            // XXX Not active - reset should be handled by a generic reset method!
-            if (no_results && field_json.allow_creation) {
-              return new RSVP.Queue()
-                .push(function () {
-                  wrapper.appendChild(createNewTag(my_gadget, i));
-                  return notifyChange(my_gadget);
-                })
-                .push(function () {
-                  var tag = wrapper.querySelector(".ui-tag-list .ui-btn");
-                  if (i === gadget.props.relation_field_number) {
-                    createEmptyField();
-                  }
-                  return RSVP.any([
-                    promiseEventListener(tag, "click", true),
-                    promiseEventListener(tag, "tap", true)
-                  ]);
-                })
-                .push(function (my_event_to_clear) {
-                  my_event_to_clear.preventDefault();
-                  wrapper.querySelector("input").value = my_event.target.defaultValue;
-                  tag_list = wrapper.querySelector(".ui-tag-list");
-                  tag_list.parentNode.removeChild(tag_list);
-                  if (my_event.target.defaultValue !== "") {
-                    wrapper.parentElement.lastChild.className = "ui-btn ui-corner-all ui-btn-icon-notext " +
-                      "ui-icon-plane ui-shadow-inset ui-btn-inline";
-                  }
+      gadget.props.field_json = field_json;
+      gadget.props.jump_url = [];
+      gadget.props.query = QueryFactory.create(new URI(field_json.query).query(true).query);
+      return new RSVP.Queue()
+        .push(function () {
+          for (i = 0; i < value_list.length; i += 1) {
+            if (!value_list[i]) {
+              if (uid) {
+                return gadget.jio_allDocs({
+                  query:  Query.objectToSearchText(new SimpleQuery({
+                    key: "catalog.uid",
+                    value: uid
+                  })),
+                  limit: [0, 1],
+                  select_list: [field_json.catalog_index]
                });
+              }
            }
-            // have element
-            return new RSVP.Queue()
-              .push(function () {
-                var list;
-
-                if (no_results === false) {
-                  wrapper.appendChild(createResults(result_dict.rows, index));
-                  list = wrapper.querySelector("ul");
-
-                  return RSVP.any([
-                    promiseEventListener(list, "click", true),
-                    promiseEventListener(list, "touchend", true)
-                  ]);
-                }
-              });
-
-          }).push(undefined, function (my_error) {
-            if (my_error instanceof RSVP.CancellationError) {
-              spin.className = "ui-hidden-accessible";
-              clearResults(my_gadget, "skip");
-            }
-            throw my_error;
-          }).push(function (my_selection_event) {
-            var element,
-              jump_url;
-
-            // take entered text, set to input and clear list options
-            if (my_selection_event && my_selection_event.target) {
-              element = my_selection_event.target;
-              jump_url = element.getAttribute("data-relative-url");
-              props.select_uid_list[i] = element.getAttribute("name");
-              wrapper.querySelector("input").value = element.textContent;
-              clearResults(wrapper, "skip");
-              return my_gadget.getUrlFor({
+          }
+        })
+        .push(function (result) {
+          var non_empty_input = true;
+          list = [];
+          if (result) {
+            value_list[i] = result.data.rows[0].value[field_json.catalog_index];
+          }
+          for (i = 0; i < target_url_list.length; i += 1) {
+            if (target_url_list[i]) {
+              gadget.props.jump_url.push(target_url_list[i]);
+              list.push(gadget.getUrlFor({
                command: 'index',
                options: {
-                  jio_key: jump_url
+                  jio_key: target_url_list[i]
                }
-              });
-            }
-          }).push(function (my_url) {
-            if (my_url !== undefined) {
-              wrapper.parentElement.lastChild.href = my_url;
-              wrapper.parentElement.lastChild.className = "ui-btn ui-corner-all ui-btn-icon-notext " +
-                "ui-icon-plane ui-shadow-inset ui-btn-inline";
-              if (i === gadget.props.relation_field_number) {
-                createEmptyField();
+              }));
+            } else {
+              if (!create_object[i]) {
+                //non jump url nor create onject
+                non_empty_input = false;
              }
+              gadget.props.jump_url.push("");
+              list.push("");
            }
-          });
-      };
-
-      stop = function (e) {
-        e.preventDefault();
-        return false;
-      };
-
-      handler = function (my_event) {
-        var value = my_event.target.value,
-          pending_promise;
-
-        // field value unchanged (tab-bing)
-        if (my_event.target.defaultValue === value) {
-          return;
-        }
-
-        // empty value, do nothing but notify
-        if (value === "") {
-          return notifyChange(gadget);
+          }
+          if (non_empty_input) {
+            value_list.push("");
+            list.push("");
+            gadget.props.jump_url.push("");
+          }
+          return RSVP.all(list);
+        })
+        .push(function (href_list) {
+          for (i = 0; i < value_list.length; i += 1) {
+            input.push({
+              "create_object": create_object[i],
+              "title": field_json.key,
+              "name": field_json.key,
+              "value": value_list[i],
+              "href": href_list[i],
+              "jump_unknown": unknown[i],
+              "error_text": field_json.error_text
+            });
+          }
+          gadget.props.input_list = input;
+          gadget.props.default_index = input.length;
+          gadget.props.last_index = input.length;
+          return gadget.translateHtml(multi_input_template({
+            input: input,
+            allow_jump: field_json.allow_jump,
+            readonly: field_json.editable ? "" : "ui-state-readonly"
+          }));
+        })
+        .push(function (html) {
+          gadget.props.element.innerHTML = html;
+          gadget.props.container = gadget.props.element.querySelector(".container");
+        });
+    })
+    .declareMethod('getContent', function (options) {
+      var list = this.props.element.querySelectorAll('.single_input'),
+        result = {},
+        i,
+        input,
+        value_list = [],
+        plane,
+        tmp = {},
+        field_json = this.props.field_json;
+      if (options.format === "erp5") {
+        for (i = 0; i < list.length - 1; i += 1) {
+          plane = list[i].querySelector('.ui-btn');
+          input = list[i].querySelector('input');
+          if (plane.className === jump_add) {
+            result[field_json.relation_field_id + "_" + i] = "_newContent_" + input.getAttribute("data-create-object");
+          }
+          value_list.push(input.value);
        }
-        index_list = my_event.target.name.split("_");
-        i = parseInt(index_list[index_list.length - 1], 10);
-        // replace existing promise in case it has not triggered
-        pending_promise = gadget.props.pending_promise_list[i];
-        if (pending_promise) {
-          pending_promise.cancel();
+        result[field_json.key] = value_list;
+        return result;
+      }
+      tmp.format = "json";
+      tmp.value = [];
+      tmp.create_object = [];
+      tmp.jump_unknown = [];
+      for (i = 0; i < list.length; i += 1) {
+        plane = list[i].querySelector('.ui-btn');
+        input = list[i].querySelector('input');
+        tmp.value[i] = input.value;
+        tmp.jump_unknown[i] = "";
+        tmp.create_object[i] = "";
+        if (plane.className === jump_add) {
+          tmp.create_object[i] = input.getAttribute("data-create-object");
+        } else {
+          if (plane.className === jump_unknown) {
+            tmp.jump_unknown[i] = true;
+          }
        }
+      }
+      tmp.relation_item_relative_url = this.props.jump_url;
+      result[field_json.key] = tmp;
+      return result;
+    })
+    .declareService(function () {
+      var i,
+        gadget = this,
+        list = [];

-        // create a new queue, expose it to replace it with trailing events
-        pending_promise = new RSVP.Queue()
-          .push(function () {
-            return RSVP.delay(200);
-          })
-          .push(function () {
-            return triggerAutocomplete(gadget, my_event, i);
-          });
-
-        gadget.props.pending_promise_list[i] = pending_promise;
-        return pending_promise;
-      };
-
-      createEmptyField = function () {
-        var new_input;
-        gadget.props.relation_field_number += 1;
-        createSingleRelationField(gadget, gadget.props.relation_field_number, false);
-        element_list = gadget.props.element.querySelectorAll('input');
-        new_input = element_list[element_list.length - 1];
-        loopEventListener(new_input, 'onmouseout', false, stop);
-        loopEventListener(new_input, 'keyup', false, handler);
-        loopEventListener(new_input, 'input', false, handler);
-      };
-
-      // Listen to all necessary events (blur not needed currently)
-      for (i = 0; i < element_list.length; i += 1) {
-        loopEventListener(element_list[i], 'onmouseout', false, stop);
-        loopEventListener(element_list[i], 'keyup', false, handler);
-        loopEventListener(element_list[i], 'input', false, handler);
+      for (i = 0; i < gadget.props.last_index; i += 1) {
+        list.push(listenToInput(gadget, i));
      }
+      return RSVP.all(list);
+    })
+    .declareService(function () {
+      var gadget = this;
+      return loopEventListener(gadget.props.element, 'add_relation_input', false, function () {
+        var list = [],
+          i;
+        for (i = gadget.props.default_index; i < gadget.props.last_index; i += 1) {
+          list.push(listenToInput(gadget, i));
+        }
+        return RSVP.all(list);
+      });
    });
-}(window, document, rJS, RSVP, URI, loopEventListener, promiseEventListener));
\ No newline at end of file
+}(window, rJS, RSVP, URI, loopEventListener, promiseEventListener, document,
+  SimpleQuery, ComplexQuery, Query, QueryFactory, Handlebars, Event, $));
--- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_zuite/relationfield_zuite/testMultiRelationFieldCreate.zpt
+++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_zuite/relationfield_zuite/testMultiRelationFieldCreate.zpt
@@ -90,118 +90,221 @@

 <tr>
  <td>waitForElementPresent</td>
-  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']</td>
+  <td>//input[@name='field_my_foo_category_title']</td>
  <td></td>
 </tr>


 <tr>
  <td>type</td>
-  <td>//input[@name='subfield_my_bar_category_title_list_0']</td>
-  <td>A new foo</td>
+  <td>//input[@name='field_my_foo_category_title']</td>
+  <td>a1</td>
 </tr>

 <tr>
  <td>fireEvent</td>
-  <td>//input[@name='subfield_my_bar_category_title_list_0']</td>
+  <td>//input[@name='field_my_foo_category_title']</td>
  <td>input</td>
 </tr>

 <tr>
  <td>waitForElementPresent</td>
-  <td>//div[@class='subfield_my_bar_category_title_list_0']/div/div/div/div/a[@class='ui-first-child ui-last-child ui-btn ui-corner-all ui-btn-inherit ui-btn-active ui-btn-icon-right ui-icon-delete']</td>
+  <td>//li[@data-relative-url='portal_categories/foo_category/a/a1']</td>
  <td></td>
 </tr>


 <tr>
-  <td>waitForElementPresent</td>
-  <td>//input[@name='subfield_my_bar_category_title_list_1']</td>
+  <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>//input[@name='subfield_my_bar_category_title_list_1']</td>
-  <td>Another new foo</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>//input[@name='subfield_my_bar_category_title_list_1']</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>//div[@class='subfield_my_bar_category_title_list_1']/div/div/div/div/a[@class='ui-first-child ui-last-child ui-btn ui-corner-all ui-btn-inherit ui-btn-active ui-btn-icon-right ui-icon-delete']</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>verifyText</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[1]//div[@class="ui-tag-list ui-tag-list-inset"]//li</td>
+  <td>Create:Foo</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>//input[@name='field_my_foo_category_title']</td>
-  <td>a1</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>//input[@name='field_my_foo_category_title']</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[@data-relative-url='portal_categories/foo_category/a/a1']</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[@data-relative-url='portal_categories/foo_category/a/a1']</td>
+  <td>//li[@name="Foo"]
  <td></td>
 </tr>

+
+<tr>
+  <td>verifyText</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[2]//div[@class="ui-tag-list ui-tag-list-inset"]//li</td>
+  <td>Create:Foo</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>verifyValue</td>
-  <td>//input[@name='subfield_my_bar_category_title_list_0']</td>
-  <td>A new foo</td>
+  <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>//input[@name='subfield_my_bar_category_title_list_1']</td>
-  <td>Another new foo</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>//input[@name='field_my_foo_category_title']</td>
-  <td>a1</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[2]//input</td>
+  <td>Another Foo</td>
 </tr>

-<!--
+
 <tr>
  <td>click</td>
-  <td>//div[@class='subfield_my_bar_category_title_list_0']/a</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[1]//a[contains(@class, "ui-icon-plane")]</td>
  <td></td>
 </tr>

 <tr>
  <td>waitForElementPresent</td>
-  <td>//a[@data-i18n='Jump']</td>
+  <td>//a[@data-i18n="Editable"]</td>
  <td></td>
 </tr>

+
 <tr>
-  <td>verifyValue</td>
-  <td>//input[@name='field_my_title']</td>
-  <td>A new foo</td>
+  <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_bar_category_title_list']//fieldset[2]//a[contains(@class, "ui-icon-plane")]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>click</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[2]//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>Another Foo</td>
+</tr>
+
+

 </tbody></table>
 </body>

--- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_zuite/relationfield_zuite/testMultiRelationFieldSearchWithListbox.xml
+++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_zuite/relationfield_zuite/testMultiRelationFieldSearchWithListbox.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>testMultiRelationFieldSearchWithListbox</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>
--- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_zuite/relationfield_zuite/testMultiRelationFieldSearchWithListbox.zpt
+++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_zuite/relationfield_zuite/testMultiRelationFieldSearchWithListbox.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>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>storeLocation</td>
+  <td>url</td>
+  <td></td>
+</tr>
+
+
+<tal:block metal:use-macro="here/Zuite_CommonTemplate/macros/wait_for_activities" />
+
+<tr>
+  <td>open</td>
+  <td>${url}</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>waitForElementPresent</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[1]//input</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>verifyText</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[1]//div[@class="ui-tag-list ui-tag-list-inset"]//li</td>
+  <td>Create:Foo</td>
+</tr>
+
+
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[2]//input</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>verifyElementPresent</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[2]//input</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>type</td>
+  <td>//input[@name="field_my_title"]</td>
+  <td>TEST</td>
+</tr>
+
+
+
+<tr>
+  <td>click</td>
+  <td>//input[@name="field_my_frozen"]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>assertChecked</td>
+  <td>//input[@name="field_my_frozen"]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>type</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[2]//input</td>
+  <td>search</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[@data-explore="true"]</td>
+  <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[@data-explore="true"]</td>
+  <td></td>
+</tr>
+
+
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//input[@name="search"]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>type</td>
+  <td>//input[@name="search"]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>click</td>
+  <td>//input[@class="search_button"]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>waitForElementNotPresent</td>
+  <td>//a[@data-i18n="Previous"]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//a[@data-i18n="Previous"]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//tbody/tr[1]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>click</td>
+  <td>//tbody/tr[1]//a</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//input[@name="field_my_title"]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>verifyValue</td>
+  <td>//input[@name="field_my_title"]</td>
+  <td>TEST</td>
+</tr>
+
+
+<tr>
+  <td>assertChecked</td>
+  <td>//input[@name="field_my_frozen"]</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>verifyText</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[1]//div[@class="ui-tag-list ui-tag-list-inset"]//li</td>
+  <td>Create:Foo</td>
+</tr>
+
+
+
+<tr>
+  <td>verifyValue</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[2]//input</td>
+  <td>2</td>
+</tr>
+
+<tr>
+  <td>verifyElementPresent</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[3]</td>
+  <td></td>
+</tr>
+
+<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/save" />
+
+</tbody></table>
+</body>
+</html>
\ No newline at end of file
--- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_zuite/relationfield_zuite/testMultiRelationFieldUnknownIcon.xml
+++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_zuite/relationfield_zuite/testMultiRelationFieldUnknownIcon.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>testMultiRelationFieldUnknownIcon</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>
--- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_zuite/relationfield_zuite/testMultiRelationFieldUnknownIcon.zpt
+++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_zuite/relationfield_zuite/testMultiRelationFieldUnknownIcon.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>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>storeLocation</td>
+  <td>url</td>
+  <td></td>
+</tr>
+
+
+<tal:block metal:use-macro="here/Zuite_CommonTemplate/macros/wait_for_activities" />
+
+<tr>
+  <td>open</td>
+  <td>${url}</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>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[1]//input</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>type</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[1]//input</td>
+  <td>unknowntext</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>waitForElementPresent</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[2]//input</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>verifyElementPresent</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[2]//input</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>type</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[2]//input</td>
+  <td>search</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[@data-explore="true"]</td>
+  <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[@data-explore="true"]</td>
+  <td></td>
+</tr>
+
+
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//input[@name="search"]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>click</td>
+  <td>//h1[@class="ui-title"]//a</td>
+  <td></td>
+</tr>
+
+
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[1]//a[contains(@class, "ui-icon-warning")]</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-warning")]</td>
+  <td></td>
+</tr>
+
+
+</tbody></table>
+</body>
+</html>
\ No newline at end of file
--- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_zuite/relationfield_zuite/testMultiRelationFieldWithNonSavedPageContent.xml
+++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_zuite/relationfield_zuite/testMultiRelationFieldWithNonSavedPageContent.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>testMultiRelationFieldWithNonSavedPageContent</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>
--- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_zuite/relationfield_zuite/testMultiRelationFieldWithNonSavedPageContent.zpt
+++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_zuite/relationfield_zuite/testMultiRelationFieldWithNonSavedPageContent.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>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>storeLocation</td>
+  <td>url</td>
+  <td></td>
+</tr>
+
+
+<tal:block metal:use-macro="here/Zuite_CommonTemplate/macros/wait_for_activities" />
+
+<tr>
+  <td>open</td>
+  <td>${url}</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>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[1]//input</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>verifyText</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[1]//div[@class="ui-tag-list ui-tag-list-inset"]//li</td>
+  <td>Create:Foo</td>
+</tr>
+
+
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[2]//input</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>verifyElementPresent</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[2]//input</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>type</td>
+  <td>//input[@name="field_my_title"]</td>
+  <td>TEST</td>
+</tr>
+
+<tr>
+  <td>type</td>
+  <td>//input[@name="field_my_foo_line_foo_category_title"]</td>
+  <td>TEST1</td>
+</tr>
+
+<tr>
+  <td>fireEvent</td>
+  <td>//input[@name="field_my_foo_line_foo_category_title"]</td>
+  <td>input</td>
+</tr>
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//li[@name='Category']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>fireEvent</td>
+  <td>//input[@name="field_my_foo_line_foo_category_title"]</td>
+  <td>blur</td>
+</tr>
+
+<tr>
+  <td>click</td>
+  <td>//li[@name='Category']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>waitForTextPresent</td>
+  <td>Create:Category</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>click</td>
+  <td>//input[@name="field_my_frozen"]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>assertChecked</td>
+  <td>//input[@name="field_my_frozen"]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>type</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[2]//input</td>
+  <td>search</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[@data-explore="true"]</td>
+  <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[@data-explore="true"]</td>
+  <td></td>
+</tr>
+
+
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//input[@name="search"]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>click</td>
+  <td>//h1[@class="ui-title"]//a</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//input[@name="field_my_title"]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>verifyValue</td>
+  <td>//input[@name="field_my_title"]</td>
+  <td>TEST</td>
+</tr>
+
+<tr>
+  <td>verifyValue</td>
+  <td>//input[@name="field_my_foo_line_foo_category_title"]</td>
+  <td>TEST1</td>
+</tr>
+<tr>
+  <td>verifyTextPresent</td>
+  <td>Create:Category</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>assertChecked</td>
+  <td>//input[@name="field_my_frozen"]</td>
+  <td></td>
+</tr>
+
+
+<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>verifyText</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[1]//div[@class="ui-tag-list ui-tag-list-inset"]//li</td>
+  <td>Create:Foo</td>
+</tr>
+
+
+
+<tr>
+  <td>verifyValue</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[2]//input</td>
+  <td>search</td>
+</tr>
+
+
+<tr>
+  <td>verifyElementNotPresent</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[3]</td>
+  <td></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[@data-explore="true"]</td>
+  <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[@data-explore="true"]</td>
+  <td></td>
+</tr>
+
+
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//input[@name="search"]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>click</td>
+  <td>//a[@data-i18n="Modules"]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//a[@data-i18n="Foos"]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>click</td>
+  <td>//a[@data-i18n="Foos"]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//tbody/tr[1]/th/a</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>click</td>
+  <td>//tbody/tr[1]/th/a</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>//a[@data-i18n='Actions']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//a[@data-i18n='Editable']</td>
+  <td></td>
+</tr>
+
+
+
+<tr>
+  <td>click</td>
+  <td>//a[@data-i18n='Editable']</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//input[@name="field_my_title"]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>verifyNotValue</td>
+  <td>//input[@name="field_my_title"]</td>
+  <td>TEST</td>
+</tr>
+
+
+
+<tr>
+  <td>verifyNotValue</td>
+  <td>//input[@name="field_my_foo_line_foo_category_title"]</td>
+  <td>TEST1</td>
+</tr>
+<tr>
+  <td>verifyTextNotPresent</td>
+  <td>Create:Category</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>assertNotChecked</td>
+  <td>//input[@name="field_my_frozen"]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>verifyNotValue</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[1]//input</td>
+  <td>A New Foo</td>
+</tr>
+
+<tr>
+  <td>verifyElementNotPresent</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[1]//div[@class="ui-tag-list ui-tag-list-inset"]//li</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>verifyElementNotPresent</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[2]</td>
+  <td></td>
+</tr>
+
+
+</tbody></table>
+</body>
+</html>
\ No newline at end of file
--- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_zuite/relationfield_zuite/testProxyListBox.xml
+++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_zuite/relationfield_zuite/testProxyListBox.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>testProxyListBox</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>
--- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_zuite/relationfield_zuite/testProxyListBox.zpt
+++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_zuite/relationfield_zuite/testProxyListBox.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>
+<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>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 Line</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>click</td>
+  <td>//h1[@class="ui-title"]/a</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>waitForTextPresent</td>
+  <td>Foo Category</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 Line</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>storeLocation</td>
+  <td>url</td>
+  <td></td>
+</tr>
+
+
+<tal:block metal:use-macro="here/Zuite_CommonTemplate/macros/wait_for_activities" />
+
+<tr>
+  <td>open</td>
+  <td>${url}</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//h1[@class="ui-title"]/a</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>click</td>
+  <td>//h1[@class="ui-title"]/a</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>waitForTextPresent</td>
+  <td>Foo Category</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_bar_category_title_list']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>type</td>
+  <td>//input[@name='field_my_bar_category_title_list']</td>
+  <td>search</td>
+</tr>
+
+<tr>
+  <td>fireEvent</td>
+  <td>//input[@name='field_my_bar_category_title_list']</td>
+  <td>input</td>
+</tr>
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//li[@data-explore="true"]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>fireEvent</td>
+  <td>//input[@name='field_my_bar_category_title_list']</td>
+  <td>blur</td>
+</tr>
+
+
+<tr>
+  <td>click</td>
+  <td>//li[@data-explore="true"]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//input[@name="search"]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//th[@data-i18n="Title"]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>verifyElementPresent</td>
+  <td>//th[@data-i18n="Title"]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>verifyElementPresent</td>
+  <td>//th[@data-i18n="Quantity"]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>click</td>
+  <td>//h1[@class="ui-title"]//a</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//input[@name="field_my_bar_category_id_list"]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>type</td>
+  <td>//input[@name="field_my_bar_category_id_list"]</td>
+  <td>search</td>
+</tr>
+
+
+<tr>
+  <td>fireEvent</td>
+  <td>//input[@name='field_my_bar_category_id_list']</td>
+  <td>input</td>
+</tr>
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//li[@data-explore="true"]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>fireEvent</td>
+  <td>//input[@name='field_my_bar_category_id_list']</td>
+  <td>blur</td>
+</tr>
+
+
+<tr>
+  <td>click</td>
+  <td>//li[@data-explore="true"]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//input[@name="search"]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>verifyTextPresent</td>
+  <td>Select Template</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>type</td>
+  <td>//input[@name="search"]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>click</td>
+  <td>//input[@class="search_button"]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>waitForElementNotPresent</td>
+  <td>//a[@data-i18n="Previous"]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//a[@data-i18n="Previous"]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//tbody//tr[1]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>verifyElementPresent</td>
+  <td>//tbody//tr[1]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>verifyElementPresent</td>
+  <td>//tbody//tr[2]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>verifyElementPresent</td>
+  <td>//tbody//tr[3]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>select</td>
+  <td>//select</td>
+  <td>index=1</td>
+</tr>
+
+<tr>
+  <td>waitForElementNotPresent</td>
+  <td>//a[@data-i18n="Previous"]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//a[@data-i18n="Previous"]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>verifyValue</td>
+  <td>//select</td>
+  <td>Foo Listbox</td>
+</tr>
+
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//tbody//tr[1]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>verifyElementPresent</td>
+  <td>//tbody//tr[1]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>verifyElementNotPresent</td>
+  <td>//tbody//tr[2]</td>
+  <td></td>
+</tr>
+
+
+
+<tr>
+  <td>select</td>
+  <td>//select</td>
+  <td>index=2</td>
+</tr>
+
+<tr>
+  <td>waitForElementNotPresent</td>
+  <td>//a[@data-i18n="Previous"]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//a[@data-i18n="Previous"]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>verifyValue</td>
+  <td>//select</td>
+  <td>Foo Line Listbox</td>
+</tr>
+
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//tbody//tr[1]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>verifyElementPresent</td>
+  <td>//tbody//tr[1]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>verifyElementPresent</td>
+  <td>//tbody//tr[2]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>verifyElementNotPresent</td>
+  <td>//tbody//tr[3]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>type</td>
+  <td>//input[@name="search"]</td>
+  <td>id:2</td>
+</tr>
+
+
+<tr>
+  <td>click</td>
+  <td>//input[@class="search_button"]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>waitForElementNotPresent</td>
+  <td>//a[@data-i18n="Previous"]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//a[@data-i18n="Previous"]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//tbody//tr[1]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>verifyElementPresent</td>
+  <td>//tbody//tr[1]</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>verifyElementNotPresent</td>
+  <td>//tbody//tr[2]</td>
+  <td></td>
+</tr>
+
+
+
+
+
+</tbody></table>
+</body>
+</html>
\ No newline at end of file
--- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_zuite/relationfield_zuite/testSimpleMultiRelationField.zpt
+++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_zuite/relationfield_zuite/testSimpleMultiRelationField.zpt
@@ -88,170 +88,198 @@
  <td></td>
 </tr>

+
 <tr>
  <td>waitForElementPresent</td>
-  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']</td>
+  <td>//input[@name="field_my_title"]</td>
  <td></td>
 </tr>


-
 <tr>
  <td>type</td>
-  <td>//input[@name='subfield_my_bar_category_title_list_0']</td>
-  <td>Title 0</td>
+  <td>//input[@name="field_my_title"]</td>
+  <td>TEST</td>
 </tr>

-<tr>
-  <td>fireEvent</td>
-  <td>//input[@name='subfield_my_bar_category_title_list_0']</td>
-  <td>input</td>
-</tr>

-<tr>
-  <td>waitForElementPresent</td>
-  <td>//div[@class='subfield_my_bar_category_title_list_0']/div/div/div/div/a[@class='ui-first-child ui-last-child ui-btn ui-corner-all ui-btn-inherit ui-btn-active ui-btn-icon-right ui-icon-delete']</td>
-  <td></td>
-</tr>
-
-<tr>
-  <td>waitForElementPresent</td>
-  <td>//input[@name='subfield_my_bar_category_title_list_1']</td>
-  <td>Title 1</td>
-</tr>

 <tr>
  <td>type</td>
-  <td>//input[@name='subfield_my_bar_category_title_list_1']</td>
-  <td>Title 1</td>
+  <td>//input[@name='field_my_foo_category_title']</td>
+  <td>a1</td>
 </tr>

 <tr>
  <td>fireEvent</td>
-  <td>//input[@name='subfield_my_bar_category_title_list_1']</td>
+  <td>//input[@name='field_my_foo_category_title']</td>
  <td>input</td>
 </tr>

 <tr>
  <td>waitForElementPresent</td>
-  <td>//div[@class='subfield_my_bar_category_title_list_1']/div/div/div/div/a[@class='ui-first-child ui-last-child ui-btn ui-corner-all ui-btn-inherit ui-btn-active ui-btn-icon-right ui-icon-delete']</td>
+  <td>//li[@data-relative-url='portal_categories/foo_category/a/a1']</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>
+  <td>blur</td>
 </tr>

 <tr>
-  <td>waitForElementPresent</td>
+  <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>//li[@data-relative-url='portal_categories/foo_category/a/a1']</td>
+  <td>storeLocation</td>
+  <td>url</td>
  <td></td>
 </tr>

-<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/save" />
+ 
+<tal:block metal:use-macro="here/Zuite_CommonTemplate/macros/wait_for_activities" />

 <tr>
-  <td>click</td>
-  <td>//a[@data-i18n='Views']</td>
+  <td>open</td>
+  <td>${url}</td>
  <td></td>
 </tr>

+
+
+
 <tr>
  <td>waitForElementPresent</td>
-  <td>//a[@data-i18n='Relation Fields']</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']</td>
  <td></td>
 </tr>

 <tr>
-  <td>click</td>
-  <td>//a[@data-i18n='Relation Fields']</td>
-  <td></td>
+  <td>type</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[1]//input</td>
+  <td>TEST</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>//div[@data-gadget-scope='field_my_bar_category_title_list']</td>
+  <td>//li[@data-relative-url="foo_module/2"]
  <td></td>
 </tr>

+
 <tr>
-  <td>verifyValue</td>
-  <td>//input[@name='field_my_foo_category_title']</td>
-  <td>a1</td>
+  <td>fireEvent</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[1]//input</td>
+  <td>blur</td>
 </tr>

 <tr>
-  <td>verifyValue</td>
-  <td>//input[@name='subfield_my_bar_category_title_list_0']</td>
-  <td>Title 0</td>
+  <td>click</td>
+  <td>//li[@data-relative-url="foo_module/2"]
+  <td></td>
 </tr>

+
+
 <tr>
-  <td>verifyValue</td>
-  <td>//input[@name='subfield_my_bar_category_title_list_1']</td>
-  <td>Title 1</td>
+  <td>waitForElementPresent</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[2]</td>
+  <td></td>
 </tr>


 <tr>
  <td>type</td>
-  <td>//input[@name='subfield_my_bar_category_title_list_0']</td>
-  <td>Title 0</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[2]//input</td>
+  <td>TEST</td>
 </tr>

+
+
 <tr>
  <td>fireEvent</td>
-  <td>//input[@name='subfield_my_bar_category_title_list_0']</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>//div[@class='subfield_my_bar_category_title_list_1']/a[@class='ui-btn ui-corner-all ui-btn-icon-notext ui-icon-plane ui-shadow-inset ui-btn-inline']</td>
+  <td>//li[@data-relative-url="foo_module/2"]
  <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>verifyElementPresent</td>
-  <td>//div[@class='subfield_my_bar_category_title_list_1']/a[@class='ui-btn ui-corner-all ui-btn-icon-notext ui-icon-plane ui-shadow-inset ui-btn-inline']</td>
+  <td>click</td>
+  <td>//li[@data-relative-url="foo_module/2"]
  <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>//div[@class='subfield_my_bar_category_title_list_0']/a</td>
+  <td>//a[@data-i18n='Relation Fields']</td>
  <td></td>
 </tr>

 <tr>
  <td>waitForElementPresent</td>
-  <td>//a[@data-i18n='Jump']</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>TEST</td>
+</tr>
+
 <tr>
  <td>verifyValue</td>
-  <td>//input[@name='field_my_title']</td>
-  <td>A new foo</td>
+  <td>//div[@data-gadget-scope='field_my_bar_category_title_list']//fieldset[2]//input</td>
+  <td>TEST</td>
 </tr>
-->
+
+
+
+

 </tbody></table>
 </body>