In Odoo, the cog menu plays a vital role in providing access to various configuration options and settings associated with different models and functionalities. It is represented by a gear or cogwheel icon, usually found in the upper-left corner of the user interface.
The image above showcases the cog menu for the 'sale.order' model, which includes options for importing and exporting.
This blog demonstrates how to add a new option to the Cog Menu in Odoo 18 by creating an XML file and a JavaScript file in the static/src directory.
Create a JS file in the static/src directory. This file defines the component and its functionality.
cog_menu.js:
/** @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() {
// Include your action for the menu 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 });
Create an XML file in the static/src directory. This template defines the structure of the new menu item.
cog_menu.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>
Include them in the __manifest__.py file
'assets': {
'web.assets_backend': [
'cog_menu/static/src/cog_menu.js',
'cog_menu/static/src/cog_menu.xml',
],
},Adding the two files will introduce a new item, titled ‘Test Cog Menu,' to the Cog Menu across all models.
When clicked, the actionNewOption method is executed, allowing custom functionality to be implemented.
The new item, labeled ‘Test Cog Menu,’ will now appear in the Cog Menu for all models except those displayed in the form view as we have set conditions for this (isDisplayed). The NewCogMenuItem object includes a configuration property, isDisplayed, which controls the visibility of the menu item:
isDisplayed: ({ config }) => {
const { actionType, actionId, viewType } = config;
return actionType === "ir.actions.act_window" && actionId && viewType !== "form";
},The function returns true (show the menu item) only if:
* The action type is "ir.actions.act_window"
* There is a valid actionId (not empty or undefined).
* The view type is not "form", meaning the menu item will not be shown in form views but will appear in other views like list or kanban.
* If any of these conditions are not met, the function returns false, and the menu item will not be displayed.
The groupNumber property organizes items in the Cog Menu. Lower values appear higher in the menu:
By following these steps, you can add a new item to the Cog Menu in Odoo 18. This feature allows you to customize the menu dynamically for different models and views, enhancing user experience. You can extend this functionality by defining specific actions within the actionNewOption method and setting visibility conditions to tailor the menu to your needs.
To read more about How to Add New Item in CogMenu in Odoo 17, refer to our blog How to Add New Item in CogMenu in Odoo 17.