Odoo 18 is a comprehensive ERP platform that integrates backend business logic with dynamic front-end experiences. Python powers the backend by managing workflows, models, and server-side processes, while JavaScript enhances the front end by providing responsive, interactive behavior within the user interface. Combining these two technologies allows Odoo to deliver both functional depth and a seamless user experience.
In this blog, we’ll walk through how to trigger a JavaScript function when a menu item is clicked. This can be achieved using either a server action (to run Python code) or a client action (to invoke JavaScript).
Step 1: Create a Menu Item
First, we need to define a menu item in XML. This menu item will be connected to an action that determines what happens when the user clicks it.
<menuitem
id="menu_load_js"
name="Load JS"
parent="menu_dashboard"
action="load_js_func"
sequence="100"
groups="base.group_user"
/>
To make this menu item functional, it must be linked to a corresponding action — either a client or server action — using the correct action ID.
Step 2: Load Function Using ir.actions.server
If you want the menu click to trigger Python logic, use a server action. This allows the execution of custom backend operations when the menu is selected.
<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 this setup:
* The id of the server action must match the action in the menu item.
* The state is set to "code" to indicate inline Python code.
* The logic defined inside the code field will run when the menu is clicked.
This approach is best suited for backend tasks such as data processing, approvals, or automation.
Step 3: Load Function Using ir.actions.client
To run JavaScript code from a menu item, we use a client action. This is ideal for launching frontend components, wizards, or custom interfaces.
<record id="load_js_func" model="ir.actions.client">
<field name="name">Load JS Function</field>
<field name="tag">js_function</field>
</record>
* The tag field links the client action to a JavaScript component.
* The tag value (js_function) must match the key used during JavaScript registration.
Step 4: Create the JavaScript Component
Next, create a
.js file and define the JavaScript logic using
OWL (Odoo Web Library). This file registers your component with the action registry:
/** @odoo-module **/
import { registry } from "@web/core/registry";
import { Component } from "@odoo/owl";
class LoadJs extends Component {
// Your JS logic here
}
registry.category("actions").add('js_function', LoadJs);
* LoadJs is the custom component that gets executed.
* 'js_function' must match the tag field in your XML client action.
Step 5: Add JavaScript to Manifest
Ensure the JS file is loaded by including it in your module's __manifest__.py under the web.assets_backend section:
'assets': {
'web.assets_backend': [
'your_module_name/static/src/js/load_js.js',
],
},This ensures the JS file is bundled and available in the Odoo backend.
Summary
In this guide, we’ve seen how to trigger custom behavior on menu item clicks in Odoo 18 using two methods:
* Server Action (ir.actions.server) – Executes Python logic on the backend.
* Client Action (ir.actions.client) – Invokes JavaScript for dynamic frontend behavior.
By correctly setting up the menu item, registering your action, and linking the appropriate logic, you can extend Odoo’s interface to suit a wide range of business needs. We hope this walkthrough helps you implement interactive and efficient features in your Odoo modules!
To read more about How to Load JS Function in Menu Item Click in Odoo 17, refer to our blog How to Load JS Function in Menu Item Click in Odoo 17.