How to make a component and add it to systray in Odoo

How to make a component
and add it to systray in Odoo
Enterprise

Introduction
Enterprise
The system tray icon in Odoo serves as a quick-access feature, allowing
users to easily interact with certain functionalities of the Odoo system
without navigating through the main interface.
It is located in the notification bar. The icons in the menu may vary
according to the modules installed. The marked area indicates the systray
icons

Enterprise
Let’s check how can we make a new icon to show on the systray
menu and add action to it. We can create a module directory for it.
The structure will be as follows

Enterprise
Inside the manifest, register the js and xml files as
'assets': {
'web.assets_backend': [
'systray_icon/static/src/js/systray_icon.js',
'systray_icon/static/src/xml/systray_icon.xml',
]
}

Enterprise
The file systray_icon.xml contains the xml code for showing our
custom icon in the view.
<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve">
<t t-name="systray_icon" owl="1">
<Dropdown>
<t t-set-slot="toggler">
<div class="new_icon">
<div class="icon_div">
<div class="toggle-icon" role="button">
<i id='create_order' class="fa fa-shopping-cart fa-1.5x"
role="img" aria-label="Sale/Purchase Order"/>
</div></div></div></t>
<t t-set-slot="default">
<DropdownItem><div t-on-click="_openSaleModel"> Sale Order </div></DropdownItem>
<DropdownItem><div t-on-click="_openPurchaseModel">Purchase Order</div></DropdownItem>
</t>
</Dropdown>
</t>
</templates>

Enterprise
This will make a new ‘shopping cart’ icon to be visible on the systray
which will then give a dropdown menu containing two buttons as
Sale Order and Purchase Order when clicked.

Enterprise
Now we need to define the Actions for the two buttons we added.
Let’s add a simple logic to open a form view to create new Sale
order or Purchase Order for the respective buttons. For that, we
type the code in js under static/src/js directory of the module.
The very step is to add the line /** @odoo-module **/ and to
import the registry, useService, Owl component, Dropdown and
Dropdown Item.
/** @odoo-module **/
import { registry } from "@web/core/registry";
import { useService } from "@web/core/utils/hooks";
import { Component } from "@odoo/owl";
import {Dropdown} from '@web/core/dropdown/dropdown';
import {DropdownItem} from '@web/core/dropdown/dropdown_item';

Enterprise
From the javascript code in Odoo, the classes are extended using
extend keyword. This is used to create a new class or component
from an existing class by inheriting all its properties and methods of
the parent class. New methods can be defined or existing ones can
be overridden or added with new functionalities.
Here we create the new class SystrayIcon from the existing class
Component as
class SystrayIcon extends Component

Enterprise
Along with the setup(), we need to define the two onclick methods
_openSaleModel and _openPurchaseModel we mentioned in the
xml file. Both of them will open the form views of sale.order and
purchase.order respectively.
And for these click events, we use this.action.doAction() method to
open a window action and pass the details such as type, name,
res_model, view_mode, etc about the view we need to open.

Enterprise
class SystrayIcon extends Component {
setup() {
super.setup(...arguments);
this.action = useService("action");
}
_openSaleModel() {
this.action.doAction({
type: "ir.actions.act_window",
name: "Sale Order",
res_model: "sale.order",
view_mode: "form",
views: [[false, "form"]],
target: "new",
});
}
_openPurchaseModel(){
this.action.doAction({
type: "ir.actions.act_window",
name: "Purchase Order",
res_model: "purchase.order",
view_mode: "form",
views: [[false, "form"]],
target: "new",
});
}
}

Enterprise
Now, give the template for the new class with the same template
name we created in xml. And register the component and
systrayItem as
SystrayIcon.template = "systray_icon";
SystrayIcon.components = {Dropdown, DropdownItem };
export const systrayItem = { Component: SystrayIcon,};
registry.category("systray").add("SystrayIcon", systrayItem, { sequence: 1 });

Enterprise
Now on clicking the first button ‘Sale Order’ from the shopping cart
systray icon, we get

Enterprise
Likewise, for the ‘Purchase Order’ button click, we get

For More Info.
Check our company website for related blogs
and Odoo book.
Check our YouTube channel for
functional and technical videos in Odoo.
Enterprise
www.cybrosys.com

How to make a component and add it to systray in Odoo

More Related Content

Similar to How to make a component and add it to systray in Odoo (20)

More from Celine George (20)

Recently uploaded (20)

How to make a component and add it to systray in Odoo