People often find JavaScript difficult to learn and use; Odoo uses this JavaScript framework to manage the web client and the dynamic interface contents. The Point of Sale interface in Odoo is almost entirely built using JavaScript. The Javascript framework is changing rapidly, resulting in changes in every odoo version. Therefore migrating apps with JavaScript customizations to a newer Odoo version will most likely require some significant amount of work. Odoo itself suggests making solutions in python rather than JavaScript due to this reason.
Let’s first look into the things about the webClient. It is the root component of the whole Odoo user interface. It controls all the subcomponents and provides services such as RPC, local storage, and more. In the case of the webclient, instead of requesting the full page, it only requests what it needs from the server. The URL of the page will be in sync with the web client state, and the sub-components in the page will be frequently created/destroyed to update the contents in the page.
Now, we are creating a custom module for Odoo with some JavaScript elements. By the convention of Odoo, all the .js files should be inside the directory your_module_name > static > src > js . The .js file should be added to the assets; then, only the file will be loaded along with all other JavaScript files in the web client. The javascript, CSS, SCSS files will be defined as bundles in XML. For that, we create an ‘assets.xml’ file inside your_module_name > views. It will look like this,
<?xml version="1.0" encoding="utf-8"?>.
<odoo>
<template id="assets_backend" name="add_javascript assets" inherit_id="web.assets_backend">
<xpath expr="." position="inside">
<script type="text/javascript" src="/your_module_name/static/src/js/hello_world.js"></script>
</xpath>
</template>
</odoo>
Using the above code, we have inherited the XML template ‘assets_backend’, which contains all the backend JavaScript resources and then we added our files to the assets. The JavaScript framework will know the location of our JavaScript file and be loaded along with other JavaScript asset files. As we know, we have to mention the path of this XML file in the manifest file of our module like this,
'data': [ 'views/assets.xml', ],
After restarting the odoo server, upgrade our module, and our new JavaScript file should start working. We needed the basic information to add a new JavaScript file to Odoo. Now let’s go deeper into the JavaScript Module System.
We can define a JavaScript module using the ‘odoo.define’ method. For example, let’s say we are writing the hello_world.js file. The format will be as given below,
odoo.define(‘your_module_name.HelloWorldWidget', function (require) {
"use strict";
var A = ...;
return A;
});Now let’s say we are defining another module that depends on the above module which is ‘your_module_name.HelloWorldWidget' It will be written as,
odoo.define(‘your_module_name.TestRun', function (require) {
"use strict";
var A = require('your_module_name.HelloWorldWidget ');
var B = ...;
return B;
});In the above examples ‘your_module_name.HelloWorldWidget’ and ‘your_module_name.TestRun' are the module names. It should be a unique string. Conventionally the module name is created using the odoo module name ( in this case, it is ‘your_module_name’ ) followed by a specific description of the module we are writing. The module name should be unique; else it will lead to errors.
We use this same module name while using a module depending on another module. The module name will be written inside the ‘require’ statement.
There are some situations where a module needs to perform before it is ready, like loading some data using RPC. We can use Asynchronous modules in such situations where before registering the module, the module system waits for the promise (the eventual result) to complete.
odoo.define('your_module_name.HelloWorldWidget, function (require) {
"use strict";
var ajax = require('web.ajax');
return ajax.rpc(...).then(function (result) {
//Your code here
return something;
});
});For simplifying some use cases, we can use these asynchronous modules. For example, in odoo, there is a ‘web.dom_ready’ module that returns a promise when the DOM is ready. So if any other module that requires the DOM can use require('web.dom_ready') statement, the module will execute only when the DOM is ready.
This is about the JavaScript Module system in Odoo. There are still many more topics related to JavaScript in Odoo, such as widgets, events, services, etc. But they are separate topics for another blog as there is much more to convey.