The user menu in Odoo serves as a centralized hub for quick access to essential features, allowing users to efficiently navigate through documentation, customize preferences, access shortcuts, seek support, and perform various user-specific actions from a single, convenient dropdown interface.
Odoo has enhanced its user interface, providing a more practical and user-friendly experience for creating new menus and associated actions in its 17th version.
Now, we can discuss the process of creating a new user menu in Odoo 17. Initially, it is essential to build a new module, followed by the addition of the provided value to the relevant Registries. These Registries play a pivotal role in enhancing the extensibility of the user interface. Once registered, the object becomes accessible to the rest of the web client, utilizing the ordered key/value map of Registries. Various features within the Odoo JavaScript framework query the registry, such as when defining objects like fields, views, client actions, services, and more.
Categories of Registries:
1. Effect Register: A comprehensive compilation of all available effects is housed within this registry.
2. Formatter Register: It contains functions designed for the formatting of values.
3. Parser Register: It contains functions for parsing values.
4. Main Component Register: It is used to add higher-level components to the web client.
5. Service Register: Listing of services that require activation.
6. Systray Register: It regulates the content visible on the right side of the navbar.
7. User Menu Register: Serves as the repository for all the menu items accessible when the user menu is activated, with the username prominently displayed in the upper right corner of the navigation bar.
Now that we want to incorporate a new user menu, it is imperative to extend the User Menu Registry, which houses all the displayed menu items upon opening the user menu, categorized under "user menu items.”
Additionally, the definition of user menu items involves the use of functions that accept the environment as an argument and generate an object containing the specified data.
Create a JS file:
/** @odoo-module **/
import { registry } from "@web/core/registry";
import { browser } from "@web/core/browser/browser";
import { _t } from "@web/core/l10n/translation";
const userMenuRegistry = registry.category("user_menuitems");
function debugItem(env) {
const urlParams = new URLSearchParams(window.location.search);
urlParams.set('debug', '1');
const debugURL = window.location.pathname + '?' +
urlParams.toString();
return {
type: "item",
id: "debug",
description: _t("Activate the developer mode"),
href: debugURL,
callback: () => {
browser.open(debugURL, "_self");
},
sequence: 50,
};
}
registry.category("user_menuitems").add("debug", debugItem)
The various properties, including description, href, and sequence, play distinct roles in defining the behavior and presentation of a menu item in the user interface.
Type: Declare the type of menu item,
Description: We can give the readable name of the menu item here.
Id: Give a unique ID for the menu item.
Href: Utilize the href property to embed the value of the item.
Callback: We can declare a callback function for the menu item here.
Sequence: The order of the menu item appears in the list.
Once the JavaScript is created, it must be incorporated into the manifest.py file in the assets section to ensure proper integration.
'assets': {
'web.assets_backend': [
'debug_mode/static/src/js/debug.js'
]Upon module installation, the "Activate the developer mode" menu item becomes visible on the user menu, situated at the top right corner of the navigation bar. By clicking on it, we can activate the debug mode.
The User Menu Registry effectively manages and catalogs the comprehensive array of menu items visible upon opening the user menu, offering a centralized structure for user interface customization in Odoo.
To read more about create & manage a new user menu in Odoo 16, refer to our blog How to Create & Manage a New User Menu in Odoo 16