The marked area shows the systray of Odoo.
Let’s look at how to add an icon to the systray.
Firstly, we have to create a view for the icon, for that let’s create a template.
For example, to add a cloud icon to the systray I have created the following template.
<?xml version="1.0" encoding="UTF-8" ?><templates><t t-name="systray_cloud.myicon"><li class="new_icon"><label class="my_icon" style="margin-bottom:0px;"title="My Icon"><div class="icon_div"><div class="toggle-icon"><i class="fa fa-cloud"id="fa-icon"/></div></div></label></li></t></templates>
We need a Javascript file to add the icon to the SystrayMenu.
We can extend the widget class for that. Widget class is an important building block of the user interface. The widget class has defined the web. Widget module. We also require SystrayMenu class, since we are adding new icons to the systray (SystrayMenu is a class that manages the icons in the menu bar).
Followed we have to extend the widget class. We can do that by using the following code.
//define the odoo.define method var SystrayMenu = require('web.SystrayMenu'); var Widget = require('web.Widget'); var ActionMenu = Widget.extend({ template: 'systray_cloud.myicon',//provide the template name events: { //add events here }, //some functions }); SystrayMenu.Items.push(ActionMenu);//add icon to the SystrayMenu return ActionMenu;//return widget });
In the above image, you can see that a cloud icon is added to the systray.
In the JS file, I have added a click event to the icon and the corresponding function to display the current date and time when clicking on the icon.
odoo.define('systray_cloud.systray_cloud', function(require) {
"use strict";
var SystrayMenu = require('web.SystrayMenu');
var Widget = require('web.Widget');
window.click_num=0;
var ActionMenu = Widget.extend({
template: 'systray_cloud.myicon',
events: {
'click .my_icon': 'onclick_myicon',
},
onclick_myicon:function(){
click_num++;
$('.toggle-icon').on('click', function() {
if(click_num%2 != 0)
{
$("#fa-icon").append("<div class='test_div dropdown dropdown-menu dropdown-menu-right show'><div style='height:30px;width:250px;'><p>Date/Time:<span id='datetime'></span></p></div></div>");
var dt = new Date();
document.getElementById("datetime").innerHTML=dt.toLocaleString();
}
else
{
$('.test_div').hide();
}
});
},
});
SystrayMenu.Items.push(ActionMenu);
return ActionMenu;
});
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<data>
<template id="assets_backend" name="systray_new_icon" inherit_id="web.assets_backend">
<xpath expr=".">
<script type="text/javascript" src="/systray_cloud/static/src/js/systray_theme_menu.js"/>
</xpath>
</template>
</data>
</odoo>
And finally, add your XML file to your manifest and update your module.
In the below image you can see the division that contains the current date and time.
