Odoo add widget to website frontend

Question

I'm new to Odoo and I'm stuck at an easy point. I already added some widgets to the backend in my custom module. Now I want to add a widget to my website frontend and I don't get it work.

I have the following snippets:

frontend_views.xml

<openerp>
  <data>
    <!-- Templates -->
    <template id="assets_frontend" name="test_module_asset_frontend" inherit_id="website.theme">
      <xpath expr="." position="inside">
        <!-- Custom JS and CSS -->
        <link rel="stylesheet" href="/test_module/static/src/css/frontend.css" />
        <script type="text/javascript" src="/test_module/static/src/js/frontend.js" />
      </xpath>
    </template>
  </data>
</openerp>

And the JavaScript code for the widget: static/src/js/frontend.js

openerp.test_module = function(instance, local) {

  local.TestWidget = instance.Widget.extend({
    start: function() {
      console.log('Widget loaded!');
      this._super();
    },
  });

  instance.web.client_actions.add('example.action', 'instance.test_module.TestWidget');
}

How could I call the widget in my template? I tried the following things:

frontend_views.xml

<record model="ir.actions.client" id="action_client_example">
  <field name="name">Example Client Action</field>
  <field name="tag">example.action</field>
</record>

<template id="details">
  <t t-call="website.layout">
    <t t-set="title">Details</t>
    <div class="oe_structure">
      <div class="container">
        <button id="test" name="action_client_example" sequence="0" type="object">Run Widget</button>
      </div>
    </div>
  </t>
</template>

But I don't get the Widget running. I'm a little confused, maybe I don't understand the whole thing how to integrate a widget because in the backend i just put in the following line to add the widget

<widget type="test_module.MyWidget" />

But how to do that in in frontend?

Answer 1

Please check the following, this can be found in the source code of odoo.

openerp.base = function(instance) {

instance.base.apps_remote = null;
instance.base.apps_client = null;

var _t = instance.web._t;

instance.base.Apps = instance.web.Widget.extend({
    template: 'EmptyComponent',
    remote_action_id: 'loempia.action_embed',
    failback_action_id: 'base.open_module_tree',

    init: function(parent, action) {
        this._super(parent, action);
        var options = action.params || {};

        if (options.apps_user) {
            sessionStorage.setItem('apps.login', options.apps_user);
        }
        if (options.apps_access_token) {
            sessionStorage.setItem('apps.access_token', options.apps_access_token);
        }

        this.params = options; // NOTE read by embedded client action
    },

    get_client: function() {
        // return the client via a deferred, resolved or rejected depending if the remote host is available or not.
        var check_client_available = function(client) {
            var d = $.Deferred();
            var i = new Image();
            i.onerror = function() {
                d.reject(client);
            };
            i.onload = function() {
                client.session.session_bind(client.origin).then(function() {
                    // check if client can authenticate
                    client.authenticate().then(
                       function() {     /* done */
                        d.resolve(client);
                    }, function() {     /* fail */
                        if (client.login === 'anonymous') {
                            d.reject(client);
                        } else {
                            sessionStorage.removeItem('apps.login');
                            sessionStorage.removeItem('apps.access_token');
                            client.bind_credentials(client.dbname, 'anonymous', 'anonymous');
                            client.authenticate().then(
                               function() {     /* done */
                                d.resolve(client);
                            }, function() {     /* fail */
                                d.reject(client);
                            });
                        }
                    });
                });

            };
            var ts = new Date().getTime();
            i.src = _.str.sprintf('%s/web/static/src/img/sep-a.gif?%s', client.origin, ts);
            return d.promise();
        };
        if (instance.base.apps_client) {
            return check_client_available(instance.base.apps_client);
        } else {
            var Mod = new instance.web.Model('ir.module.module');
            return Mod.call('get_apps_server').then(function(u) {
                var link = $(_.str.sprintf('<a href="%s"></a>', u))[0];
                var host = _.str.sprintf('%s//%s', link.protocol, link.host);
                var dbname = link.pathname;
                if (dbname[0] === '/') {
                    dbname = dbname.substr(1);
                }
                var login = (sessionStorage ? sessionStorage.getItem('apps.login') : null) || 'anonymous';
                var passwd = (sessionStorage ? sessionStorage.getItem('apps.access_token') : null) || 'anonymous';
                if (_.isNull(instance.base.apps_remote)) {
                    instance.base.apps_remote = new openerp.init();
                }
                var client = new instance.base.apps_remote.web.EmbeddedClient(null, host, dbname, login, passwd);
                instance.base.apps_client = client;
                return check_client_available(client);
            });
        }
    },

    destroy: function() {
        if (instance.base.apps_client) {
            instance.base.apps_client.destroy();
        }
        return this._super();
    },

    start: function() {
        var self = this;
        // desactivated for now because apps does not work anyway due to changes in the framework
        /*return self.get_client().
            done(function(client) {
                client.replace(self.$el).
                    done(function() {
                        client.$el.removeClass('openerp');
                        client.do_action(self.remote_action_id, {hide_breadcrumb: true});
                    });
            }).
            fail(function(client) {*/
                self.do_warn(_t('Mwmy Apps will be available soon'), _t('Showing locally available modules'), true);
                self.rpc('/web/action/load', {action_id: self.failback_action_id}).done(function(action) {
                    self.do_action(action);
                    instance.webclient.menu.open_action(action.id);
                });
            //});
    },
});

instance.base.AppsUpdates = instance.base.Apps.extend({
    remote_action_id: 'loempia.action_embed_updates'
});

instance.web.client_actions.add("apps", "instance.base.Apps");
instance.web.client_actions.add("apps.updates", "instance.base.AppsUpdates");

};

and in the xml

<!-- Apps modules -->
<record model="ir.actions.client" id="modules_act_cl">
    <field name="name">Apps</field>
    <field name="tag">apps</field>
</record>
<menuitem id="module_mi" parent="base.menu_management" sequence="10" action="modules_act_cl"/>

<record model="ir.actions.client" id="modules_updates_act_cl">
    <field name="name">Updates</field>
    <field name="tag">apps.updates</field>
    <field name="params">{}</field>
</record>
<menuitem id="menu_module_updates" parent="base.menu_management" sequence="20" action="modules_updates_act_cl"/>

hope this help you.