Odoo uses menu items to do actions such as view data from the database and show the result corresponding to user action. These menu items basically act as button action.
This blog will discuss how to invoke a js function in a menu item click. Let's check how the menu item calls a js action.
First, you want to create a new menu item to trigger this action. Moreover, certain basic attributes are needed for a menu item for this unique operation which is as follow:
Id: It’s a mandatory field and it is an identifier of a menu item moreover, it must be unique.
Name: It is used for an easy understanding of the menu.
Parent: This attribute helps to assign the menu to a specific model or a child menu item of a model.
Action: Specify the id of theirs.actions model.
Sequence: This is used to set a The following code can be used to create a menu item:
<menuitem id="menu_js_action"
name="JS Action"
parent="module_name.parent_menu"
action="action_toggle_js_function"
sequence="100"/>
Furthermore, the menu will have appeared only when the menu item action and a record id matches.
Therefore, you should create a record for getting this menu item activated.
Moreover,
In this case, one can use two types of methods to load a js function.
Load js function by using ir.actions.server and ir.actions.client.
Load js function by only using ir.actions.client.
Load js function by using ir.actions.server and ir.actions.client
First, you want to create a record with model ir.actions.server and set the action of menuitem as the id of the record.
There are some important fields for creating this type of record.
<record id=”action_toggle_js_function” model=”ir.actions.server”>
<field name=name>Load JS Function</field>
<field name=”model_id” ref=module_name.model_name/>
<field name=”state”>code</field>
<field name=”code”>action = model.env.ref(‘model.client_action_record’).read()[0]</field>
</record>
Here I am using a field state that is used for writing python code on record creation form. You can see the next line I used a code field to write a python code for another action.
If you want to get more information about ir.actions.server
In this action call a record with id client_action_record. This record must be ir.actions.client.
Create a record with the model ir.actions.client and with the same id that already specified on the code of the server action.
Client action is triggered when an action is implemented by the client.
<record id=”client_action_record’” model=”ir.actions.client”>
<field name=name> JS function</field>
<field name=tag>js_function</field>
</record>
Here I am using a field tag. The string specified on the tag field must be added to the action registry of the js file in the same model.
You can check how this case used in the website module by referring to the view website_views.xml
Load js function by only using ir.actions.client
In this case, create a record with ir.actions.client. Then specify the menu item action as record id.
To create a record,
<record id=”action_toggle_js_function” model=”ir.actions.client”>
<field name=name> JS function</field>
<field name=tag>js_function</field>
</record>
These are different ways to trigger client action. Here I am using the second method to load a JS function.
The above steps are for the XML part. So we completed the XML side of this operation.
Let us move to the JS part of the operation.
Create JS file in static > src > js > load_js_function.js
This js file contains:
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({
//You can create your own actions.
});
core.action_registry.add(‘js_function’. FunctionName);
//One can add multiple action_registry
});We must specify the name of the function invoked by the corresponding ir.actions.client tag string.
After that declare a space of the js part in our asset form. To create an XML file and specify the path of the JS file. for example
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="assets_backend" inherit_id="web.assets_backend">
<xpath expr="//script[last()]" position="after">
<script type="text/javascript" src="path_of_your_js_file"/>
</xpath>
</template>
</odoo>
Finally, ensure that all the files are correctly specified on the manifest part of your project. This is how to load JS function in menuitem click by client action model.