odoo creating custom backend form widget to render html view

Question

Hi i'm stuck on a widget creation that render a custom html content on a form view, I don't know how to follow. Here is my code

js:

(function (instance) {
    var _t = instance.web._t,
        _lt = instance.web._lt;
    var QWeb = instance.web.qweb;

    console.log('hi..........');  // Custome message to dispaly on console
    openerp.my_module = function (instance, local) {
        console.log(instance);
        instance.web.form.widgets.add('my_module.home', 'instance.my_module.Home');
        instance.my_module.Home = instance.web.form.FormView.extend({
            template: 'my_template',
            init: function (view, code) {
                console.log("::: INIT");
            },
            start: function () {
                console.log("::: START");
            }
        });

    }
})(openerp);

xml template

<?xml version="1.0" encoding="UTF-8"?>
    <templates id="template" xml:space="preserve">
        <t t-name="my_template">
            <div>
                Template content
            </div>
        </t>
    </templates>

At this point only show in the terminal the 'hi..........' and the object instance, but never run the widget code. So my questions are. How to use it in the form configuration and if i´m missing something here

    <record id="view_form_my_module" model="ir.ui.view">
        <field name="name">My Module</field>
        <field name="model">my.module</field>
        <field name="arch" type="xml">
            <form>
                <sheet>
                    **HOW TO ISE IT HERE**
                </sheet>
            </form>
        </field>
    </record>

Answer 1

It looks to me like you may really want to use a FormWidget rather than extending FormView. I am not an expert on javascript extensions. However if you follow the documentation for The Form View Custom Widgets found here you might find it easier to accomplish what you are going for. It is also easy to drop your widget in any form view, using the <widget/> tag.

local.YourWidgetClassName = instance.web.form.FormWidget.extend({
    start: function() {
        this._super();
        this.display_html();
    },
    display_html: function() {
        this.$el.html(QWeb.render("your_qweb_template", {
            "arg1": "Hello",
            "arg2": "World",
        }));
    }
});

instance.web.form.custom_widgets.add('widget_tag_name', 'instance.your_addon_name.YourWidgetClassName');

Now in you qweb I would call it like this.

<widget type="widget_tag_name"></widget>