Odoo combines both Python and JavaScript to deliver its full functionality, with Python handling the backend logic and JavaScript enhancing the user interface and client-side interactions.
In this blog, let’s have a look at how to load the js function in the menu item click in
Odoo 17.
First, we can create a menu item that loads the JavaScript function when clicked. The Following code will help create a menu item.
<menuitem
id="menu_load_js"
name="Load JS"
parent="menu_dashboard"
action="load_js_func"
sequence="100"
groups="base.group_user"
/>
To ensure the menu item appears, we must create either a server action or a client action with an ID that corresponds to the action name specified in the menu item. There are two methods that can be utilized to load a function into the menu item - ir.actions.client and ir.actions.server.
Let’s check how we can load a function using server action -
<record model="ir.actions.server" id="load_js_func">
<field name="name">Load JS Function</field>
<field name="model_id" ref="module.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 code, it is important that the record id aligns with the action name of the menu item. When the menu item is clicked, a Python function is triggered using ir.actions.server. The code specifies a field named state with a value of code, indicating that a Python script will be executed upon clicking the menu item. Additionally, within the defined code field, the Python code intended for execution has been included. This is the process of linking a method to a menu item using the ir.actions.server.
Now let’s check how we can do the same using ir.actions.client -
<record id="load_js_func" model="ir.actions.client">
<field name="name">Load JS Function</field>
<field name="tag">js_function</field>
</record>
The field tag is used to bind the js action with the menuitem. The specified value for the tag is used to match the corresponding action within the registry.
The next step is to add the js function,
Create a new js file and add the following code,
/** @odoo-module **/
import { registry } from "@web/core/registry";
import { Component } from "@odoo/owl";
class LoadJs extends Component{
// Add your js code here
}
registry.category("actions").add('js_function', LoadJs);
Declare this file in the manifest like this,
'web.assets_backend': [
'module/static/src/js/load_js.js',
],
To bind a JavaScript function to the record actions, we use the action registry by creating a new component that extends the Component class. This allows us to define any additional events and functions associated with the menu item. Once the component is defined, we register it in the action registry using a unique identifier. Finally, ensure that all files are properly configured to allow for correct execution.
We have explored how to load JavaScript functions on menu item clicks in Odoo 17 by creating a menu item and setting up either a client or server action. We hope this guide helps you implement these features effectively!