Arsalan YasinHow to Add a New Item to the Cog Menu in Odoo 18
Through the cog menu in Odoo you can directly access different configuration and setting options for all models as well as functionalities. A cogwheel icon represents the cog menu which users can find in the upper-left corner of the user interface.
Understanding the Cog Menu
The image depicts the cog menu dedicated to the sale.order model along with options to export and import information.
The following guide demonstrates how to add a new menu to the Odoo 18 cog menu by using XML files and JavaScript files located in the static/src directory.
Steps to Add a New Item to the Cog Menu
1. Create a JavaScript File
In the static/src directory, create a JavaScript file that defines the new component and its functionality.
javascript
@odoo-module
import { _t } from “@web/core/l10n/translation”;
import { DropdownItem } from “@web/core/dropdown/dropdown_item”;
import { registry } from “@web/core/registry”;
import { Component } from “@odoo/owl”;
const cogMenuRegistry = registry.category(“cogMenu”);
export class NewCogMenu extends Component {
static template = “cog_menu.NewCogMenu”;
static components = { DropdownItem };
static props = {};
async onClickCogMenu() {
// Define the action for the menu item here…
}
}
export const NewCogMenuItem = {
Component: NewCogMenu,
groupNumber: 20,
isDisplayed: ({ config }) => {
const { actionType, actionId, viewType } = config;
return actionType === “ir.actions.act_window” && actionId && viewType !== “form”;
},
};
cogMenuRegistry.add(“new-cog-menu”, NewCogMenuItem, { sequence: 10 });
This script registers a new menu item called NewCogMenuItem, making it available in the cog menu based on specified conditions.
2. Create an XML File
The XML file defines the structure of the new menu item.
Cog_menu.xml
xml
<?xml version=”1.0″ encoding=”UTF-8″?>
<templates xml:space=”preserve”>
<t t-name=”cog_menu.NewCogMenu”>
<DropdownItem class=”‘o_new_cog_menu'” onSelected.bind=”onClickCogMenu”>
Test Cog Menu
</DropdownItem>
</t>
</templates
This template adds a dropdown item labeled “Test Cog Menu” to the cog menu.
3. Register the Assets in __manifest__.py
To ensure the JavaScript and XML files are included, update your module’s __manifest__.py file as follows:
Python
‘assets’: {
‘web.assets_backend’: [
‘cog_menu/static/src/cog_menu.js’,
‘cog_menu/static/src/cog_menu.xml’,
],
},
Once these files are added and registered, a new menu item called “Test Cog Menu” will appear in the cog menu across all models except those displayed in the form view.
How It Works
When the new cog menu item is clicked, the onClickCogMenu method is executed, allowing you to implement custom functionality.
The visibility of the menu item is controlled by the isDisplayed function:
javascript
isDisplayed: ({ config }) => {
const { actionType, actionId, viewType } = config;
return actionType === “ir.actions.act_window” && actionId && viewType !== “form”;
},
This ensures that the menu item is shown only when:
- The action type is “ir.actions.act_window”.
- There is a valid actionId.
- The view type is not “form” (meaning the menu item appears in list or kanban views but not in form views).
If any of these conditions are not met, the menu item will not be displayed.
Additionally, the groupNumber property determines the position of the item in the cog menu—items with lower values appear higher.
Conclusion
By following these steps, you can easily add a custom item to the cog menu in Odoo 18. This feature enhances flexibility in configuring the UI for different models and views. Additionally, you can improve functionality by integrating specific actions within the onClickCogMenu method and refining visibility conditions to align with your WMS warehouse management system integrated with Odoo.
Need help customizing Odoo for your business? Hire an Odoo implementation consultant today!
Follow me on LinkedIn for more latest updates