WIP: Make Formulator Field work as a Customisable renderjs Gadget (!1037) · Merge requests · nexedi / erp5

WIP: Make Formulator Field work as a Customisable renderjs Gadget

This MR is aimed for a situation when we need to customise the default behavior of ERP5 Fields renderjs gadget. (web_page_module/erp5_gadget_feild_*)

Note: This MR is still work in progress and nothing is working currently.

Current way: Having both Formulator Field and GadgetField

Example: Customise 'keypress' event for a String Field

Formulator Field (for legacy UI)

key	value
id	my_title
class	StringField
enable	python:here.aq_parent.aq_parent.getPortalType() != 'Web Section'

Gadget Field (for renderjs_ui)

key	value
id	your_title
default	here/getTitle
class	GadgetField
gadget_url	gadget_erp5_field_string_custom.html
validator_form_id	erp5_core/Base_viewFieldLibrary
validator_field_id	my_core_mode_text_content_validator
enable	python:here.aq_parent.aq_parent.getPortalType() == 'Web Section'

`gadget_erp5_field_string_custom.html`

<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Tag number</title>

    <!-- renderjs -->
    <script src="handlebars.js" type="text/javascript"></script>

    <script src="rsvp.js" type="text/javascript"></script>
    <script src="renderjs.js" type="text/javascript"></script>

    <!-- custom script -->
    <script src="gadget_erp5_field_string_custom.js" type="text/javascript"></script>
  </head>
  <body>
    <div data-gadget-url="gadget_erp5_field_string.html" data-gadget-scope="field_string_gadget"></div>
  </body>
</html>

`gadget_erp5_field_string_custom.js`

/*global window, rJS */
/*jslint indent: 2, maxerr: 3 */
(function (window, rJS, document) {
  "use strict";
  rJS(window).ready(function (gadget) {})
  .onEvent('keypress', function click(event) {
     // some customisation come here for example
  }, false, false)
 // render() is the same with the default string field gadget,
 // so we use the gadget (gadget_erp5_field_string.html) as the declared sub gadget.
  .declareMethod('render', function render(option_dict) {
   // 'field_string_gadget' is specified at data-gadget-scope in 'gadget_erp5_field_string_custom.html'
    return this.getDeclaredGadget('field_string_gadget')
      .push(function (field_gadget) {
        return field_gadget.render({field_json: option_dict});
      });
  })
  .declareMethod('getContent', function () {
    return this.getDeclaredGadget('field_string_gadget')
      .push(function (gadget) {
        var title = gadget.element.querySelector("#field_your_title");
        return {'title': title.value};
      });
  }, {mutex: 'changestate'});
}(window, rJS, document));

New way: Formulator Field also work as a customisable renderjs gadget

Formulater Field has gadget_url property to customise the default behavior on renderjs_ui.

Formulator Field for both legacy UI and renderjs_ui

key	value
id	my_title
class	StringField
gadget_url	gadget_erp5_field_string_custom_new.html

`gadget_erp5_field_string_custom_new.html`

<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Tag number</title>

    <!-- renderjs -->
    <script src="handlebars.js" type="text/javascript"></script>

    <script src="rsvp.js" type="text/javascript"></script>
    <script src="renderjs.js" type="text/javascript"></script>

    <!-- custom script -->
    <script src="gadget_erp5_field_string_custom_new.js" type="text/javascript"></script>
  </head>
  <body>
     <!-- here is nothing -->
  </body>
</html>

`gadget_erp5_field_string_custom_new.js`

/*global window, rJS */
/*jslint indent: 2, maxerr: 3 */
(function (window, rJS, document) {
  "use strict";
  rJS(window).ready(function (gadget) {})
  .onEvent('keypress', function click(event) {
     // some customisation come here for example
  }, false, false)
  // Acquire the render() and the getContent() from the parent string field gadget.
  // XXX-tatuya: I am still not sure how should we make this acquire is possible.
  // one way is adding a hook into all the methods of erp5_gadget_feild_*.js.
  // another way is adding a hook into the methods of renderjs.js.
  .declareAcquiredMethod('render', 'render')
  .declareAcquiredMethod("getContent", "getContent");
}(window, rJS, document));