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));