javascript Odoo 向网站前端添加小部件

Odoo add widget to website frontend

提问by Tob0t

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.

我是 Odoo 的新手，我遇到了一个简单的问题。我已经在我的自定义模块的后端添加了一些小部件。现在我想在我的网站前端添加一个小部件，但我没有让它工作。

I have the following snippets:

我有以下片段：

frontend_views.xml

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

以及小部件的 JavaScript 代码： 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

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?

但是如何在前端做到这一点？

回答by zkjiao

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

请检查以下内容，这可以在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

并在 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.

希望这对你有帮助。

回答by DASADIYA CHAITANYA

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

单击以引用 Odoo 动态小部件的幻灯片共享链接

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

我希望这对你有帮助..！:)