I'm very bad at JS. I've looked at the mail modules systray icons javascript and template files. I've read the javascript cheetsheet and referance documentation but I cannot get it to work.
I want to gave a systray icon that shows a number same as the mail systray icons and when you click on it, a div with the message apears. The number and message need to be gotten from a models method. This means that I've got a problem with asynchronous promise function. The custom module returns json dump of a dict
JS Code:
odoo.define('odoo13_demo_timer.DemoDays', function (require) { 'use strict'; var core = require('web.core'); var session = require('web.session'); var SystrayMenu = require('web.SystrayMenu'); var Widget = require('web.Widget'); var Qweb = core.qweb; var DemoDays = Widget.extend({ name: 'demo_days_menu', template: 'odoo13_demo_timer.DemoDays', events: { 'show.bs.dropdown': '_onDemoDaysShow', 'hide.bs.dropdown': '_onDemoDaysHide', }, start: function() { this._getDemoDaysData(); return this._super(); }, _getDemoDaysData: function() { var self = this; return self._rpc({ model: 'demo.installation', method: 'get_systray_dict', args: [], kwargs: {context: session.user_context}, }).then(function (data) { self.demo_days_data = data; self.$('.o_demo_days_counter').addClass(data.message_class); self.$('.o_demo_days_counter').text(data.expires); self.$('.demo_days_message').append(data.message); }); }, _onDemoDaysShow: function () { document.body.classList.add('modal-open'); }, _onDemoDaysHide: function () { document.body.classList.remove('modal-open'); }, }); DemoDays.prototype.sequence = 100; SystrayMenu.Items.push(DemoDays); return DemoDays; });
Template:
<?xml version="1.0" encoding="UTF-8"?> <templates> <t t-name="odoo13_demo_timer.DemoDays"> <li class="o_timer_systray_item"> <a class="dropdown-toggle o-no-caret" data-toggle="dropdown" data-display="static" aria-expanded="false" title="Demo Days" href="#" role="button"> <i class="fa fa-history" role="img" aria-label="Demo Days"/> <span class="o_demo_days_counter badge badge-pill"/> </a> <div class="o_demo_days_systray_dropdown dropdown-menu dropdown-menu-right"> <span class="demo_days_message"/> </div> </li> </t> </templates>
If I hard code the number and message in the start function it works. Getting the data from the model doesn't work. I wasted hours with trying different things but I just cannot get it to work.
start: function() {
this.$('.o_demo_days_counter').addClass('green');
this.$('.o_demo_days_counter').text('15');
this.$('.demo_days_message').append('some text for message');
},
Can someone help?
EDIT:
The data is now accessible, when I updated the code with the answer for promise. But it still does not show the data!? Really need help with this.
Finally I've got it to work.
Used @Ravi Gadhia answer for help with the promise. Moved the promise to willStart and only set the DOM elements in the start.