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?

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?

• javascript
• xml
• widget
• odoo

• Have you solved it @Tob0t ? – orhan bengisu Commented Sep 8, 2017 at 11:33

2 Answers 2

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.

If u want to learn from the staring from the scratch then you should follow the below link from the slide share

Click To Refere the Slide Share Link For Odoo Dynamic Widget

I hope this should helpful for you ..! :)