Odoo add widget to website 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?
Answer
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.