JavaScript extensions

How can we extend JavaScript code in Odoo version 9.0?

Cesar Lage


 

There are many changes in JavaScript code for Odoo version 9.0, they have improved the framework base of the application and the way to extend the code in new modules. This post has the goal to show some upgrades they did in the code and how can we extend now JavaScript functions with the new version. I have been diving into Odoo code to find out the differences. After this post I hope you can also do it and share your comments about.

Framework structure

There is a significant difference in the framework structure between versions 8.0 and 9.0. In version 8.0 there is a main file called openerpframework.js and some others (views.js, search.js) that uses the base classes defined in the first one. If you check in the new version you can find a new structure according to some improves and new features. There is a folder for framework, one for views, one for widgets and other files with general features. The main idea is the same, the framework defines base classes but there are more components now and with a better organization in order they can be used in more contexts.

It would be interesting to list all the components available in the framework and the way we can use it. But this time we are going to talk about how to extends JavaScript code in the new version. Now comes short explain with code samples.

Boot script

We are going to focus our attention in file '/web/static/src/js/boot.js' (boot). I don't know if you have ever seen it before, but it's quite interesting to take a look at it in order to discover why and how we can extend JavaScript code in Odoo.

The code in boot has the mission to start the JavaScript environment and defines how can we add more code in our modules in order to get desired behavior for new and existing functions. One interesting point is that boot file is the first one to load in version 9.0 instead of version 8.0, where this file is loaded just after '/web/static/src/openerpframework.js'.

The main difference is in the function definition inside boot. Here I show a short part of the code in both versions:

boot 8.0

/**

* @name openerp

* @namespace openerp

*/

(function() {

// copy everything in the openerp namespace to openerp.web

openerp.web = _.clone(openerp);

var inited = false;

_.extend(openerp, {

...

});

})();


In version 8.0 with the ‘_.extend()’ function we can, as we already know, extend JavaScript code by creating something like this:

openerp.<module> = function(instance) {

instance.web.DiagramView = instance.web.View.extend({

});

...

};

The instance parameter allows us to access to any resource in the application we need to use in our script. The main namespace is openerp.

boot 9.0

/**

* @name openerp

* @namespace openerp

*/

(function() {

"use strict";

...

var odoo = window.odoo = {

...

define: function () {

...

},

...

})();

Here is the new way. In version 9.0 we can see the odoo namespace and its 'define: function() {...}' , then in new modules we must extend code in this way:

odoo.define('<module>.<name>', function(require)){

'use strict';

var View = require('web.View');

var DiagramView = View.extend({

});

return DiagramView;

});

In this case we don't have instance parameter, if we need to access to some resource in the application we must import it by using 'require' function shown as parameter. We can't use anymore the old way because it can get some errors. At the end of the script, we may return what we want to have accessible for others scripts or simply nothing.


 

Qweb views

There is another change about importing views. In version 8.0 if we want to add a qweb view, we can do it in __openerp__.py file like this:

...

'qweb': ['static/src/xml/base_diagram.xml']

or inside JavaScript like this:

var website = openerp.website;

website.add_template_file('/website/static/src/xml/website.seo.xml');

Now in version 9.0, we can also do it inside the JavaScript file like this:

var ajax = require('web.ajax');

var core = require('web.core');

qweb = core.qweb;

ajax.loadXML('/web_diagram/static/src/xml/base_diagram.xml', qweb);

If we let it in the old way it works too (without errors), but this way is better for application performance.

This is my first checking new codes session for Odoo version 9.0. I hope this post will be useful for you and maybe will come back with more clarification updates.

About Cesar Lage

Python and odoo passionate/ he dives in the web but also in the ocean/ he wakes up to a different time zone.