Thêm tiện ích vào giao diện trang web

Question

Tôi mới sử dụng Odoo và tôi bị kẹt ở một điểm dễ dàng. Tôi đã thêm một số tiện ích vào chương trình phụ trợ trong mô-đun tùy chỉnh của mình. Bây giờ tôi muốn thêm một widget vào lối vào trang web của tôi và tôi không làm cho nó hoạt động.

Tôi có đoạn như sau:

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> 

Và mã JavaScript cho 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'); 
} 

Làm thế nào tôi có thể gọi widget trong mẫu của tôi không? tôi đã cố gắng những điều sau đây:

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> 

Nhưng tôi không nhận được Widget chạy. Tôi là một chút bối rối, có lẽ tôi không hiểu toàn bộ sự việc như thế nào để tích hợp một widget bởi vì trong backend tôi chỉ cần đưa vào dòng sau để thêm các widget

<widget type="test_module.MyWidget" /> 

Nhưng làm thế nào để làm điều đó trong trong lối vào?

Answer 1

Vui lòng kiểm tra những điều sau, điều này có thể được tìm thấy trong mã nguồn của 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"); 

}; 

và trong 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"/> 

hy vọng điều này giúp bạn.

Answer 2

Nếu u muốn học hỏi từ những nhìn chằm chằm từ đầu thì bạn nên làm theo các liên kết dưới đây từ trượt phần

Click To Refere the Slide Share Link For Odoo Dynamic Widget

Tôi hy vọng điều này nên hữu ích cho bạn ..! :)