Odoo is a highly extensible ERP system with a non-trivial codebase in python and javascript. Odoo has a widely arranged UI with multiple options and menus. Odoo uses both python and javascript methods to invoke actions to those menus.
In this blog, we’ll be discussing how we can invoke a js function on a menu item click in Odoo 15.
In order to trigger an action on a menu item click, we first need to create the menu item. The following set of codes will help us to define a menu item.
<menuitem
id="menu_reporting_config"
name="Configuration"
parent="menu_board_root"
action="load_js_function"
sequence="100"
groups="base.group_system"
/>
The above is an example of a menu item.
id: unique identifier to identify the menu item
name: character string for easy understanding of the menu item
action: specify the id of the action record
sequence: integer value used to sort the menu item in the menu
groups: specifies which group of users can see this menu
Next in order for the menu item to be displayed, we need to create a server action or client action with an ID matching the action name in the menu item. For that two types of methods can be used to load a function into the menu item.
ir.actions.client
ir.actions.server
Let's first check with the ir.actions.server.
<record model="ir.actions.server" id="load_js_function">
<field name="name">Load JS Function</field>
<field name="model_id" ref="module_name.model_name"/>
<field name="binding_model_id" ref="model_model_name" />
<field name="state">code</field>
<field name="code">
if records:
records.action_approve()
</field>
</record>
In the above example, you can see that the ID of the record should match with the action name of the menu item. A python function is loaded using the ir.actions.server on menu item click. As you can see in the code, we have used a field with name as state and value code to specify that a python code will be executed on the menu item. Further inside the field code that has been defined, we have added the python code which is to be executed. This is how to bind a method to a menu item using the ir.actions.server.
Next let us see how we can load the js function using the ir.actions.client method.
Client actions are triggered when the client implements an action.
<record id="load_js_function" model="ir.actions.client">
<field name="name">Load JS Function</field>
<field name="tag">js_function</field>
</record>
In the above code, the field tag is used to bind/load the js action registry. The value used for the tag will be used to match the corresponding action registry in the AbstractAction.
Above is all that we have to do in the XML section. Create the menu item and create a server/ client action for it.
Next, let us see how we can add the js function.
For that let’s create a js file static > src > js > load_js_function.js and add them into the assets.backend.
For that inside the manifest add the following;
'assets': {
'web.assets_backend': [
module_name/static/src/js/load_js_function.js',
],
},
Inside the js file add the following code block;
odoo.define('module_name.load_js_funtion', function (require){
"Use strict";
var core = require('web.core');
var AbstractAction = require('web.AbstractAction');
var FunctionName = AbstractAction.extend({
//Add the javascript code blocks here
});
core.action_registry.add('js_function', FunctionName);
});
In order to bind a js function to the record actions, we have to use the AbstractAction and extend it. After extending the AbstractAction, we can include the additional events and functions which will be bound to the menu item.
At last, we need to add the new method to the action_registry. Finally, you should ensure that all the files are correctly set up for the right execution.