We need to add the QWeb definition in the manifest and change the JavaScript code so that we can use it. Follow these steps to get started:
- Import web.core and extract the qweb reference into a variable, as shown in the following code:
odoo.define('my_field_widget', function (require) {
"use strict";
var AbstractField = require('web.AbstractField');
var fieldRegistry = require('web.field_registry');
var core = require('web.core');
var qweb = core.qweb;
...
- Change the _renderEdit function to simply render the element (inherited from widget):
_renderEdit: function () {
this.$el.empty();
var pills = qweb.render('FieldColorPills', {widget: this});
this.$el.append(pills);
},
- Add the template file to static/src/xml/qweb_template.xml:
<?xml version="1.0" encoding="UTF-8"?>
<templates>
<t t-name="FieldColorPills">
<t t-foreach="widget.totalColors" t-as='pill_no'>
<span t-attf-class="o_color_pill o_color_#{pill_no} #{widget.value === pill_no and 'active' or ''}"
t-att-data-val="pill_no"/>
</t>
</t>
</templates>
- Register the QWeb file in your manifest:
"qweb": [
'static/src/xml/qweb_template.xml',
],
Now, with other add-ons, it is much easier to change the HTML code our widget uses, because they can simply override it with the usual QWeb patterns.