Odoo Help

Welcome!

This community is for beginners and experts willing to share their Odoo knowledge. It's not a forum to discuss ideas, but a knowledge base of questions and their answers.

0

How to override JS code in Odoo?

By
Alejandro Santana
on 2/4/15, 2:20 PM 3,066 views

Summary:

  • I have a situation where I inherit from im_chat module and I want to hide the top menu chat button from all users but the ones belonging to a group I created.
  • I can add the button in case user belongs to that group, but I am not able to remove the one created by inherited module, nor prevent its creation because my JS function is executed before the one in im_chat.
  • First I have tried to set the groups policy in the button with qweb, but without any luck (see forum thread: https://www.odoo.com/forum/help-1/question/how-to-use-groups-policies-in-qweb-templates-74256 and bug issue report in Github: https://github.com/odoo/odoo/issues/5058 )
  • This is my first encounter with JS

Detailed explanation:

I am writing a new module that depends on im_chat module. I want to hide the top menu chat button (the one with the chat bubbles) from all users but the ones belonging to a security group I created.

In the im_chat module, I find what I should modify. In addons/im_chat/static/src/js/im_chat.js I find this code, starting with:

(function(){

    "use strict";

    console.log("Original WTF");
    var _t = openerp._t;
    var _lt = openerp._lt;
    var QWeb = openerp.qweb;
    var NBR_LIMIT_HISTORY = 20;
    var USERS_LIMIT = 20;
    var im_chat = openerp.im_chat = {};

...code continues almost till the end, where is the key part, an isolated if condition, which adds the button if user belongs to base.group_users and is an employee:

    im_chat.ImTopButton = openerp.Widget.extend({
        template:'im_chat.ImTopButton',
        events: {
            "click": "clicked",
        },
        clicked: function(ev) {
            ev.preventDefault();
            this.trigger("clicked");
        },
    });

    if(openerp.web && openerp.web.UserMenu) {
        openerp.web.UserMenu.include({
            do_update: function(){
                var self = this;
                var Users = new openerp.web.Model('res.users');
                Users.call('has_group', ['base.group_user']).done(function(is_employee) {
                    if (is_employee) {
                        self.update_promise.then(function() {
                            var im = new openerp.im_chat.InstantMessaging(self);
                            openerp.im_chat.single = im;
                            im.appendTo(openerp.client.$el);
                            var button = new openerp.im_chat.ImTopButton(this);
                            button.on("clicked", im, im.switch_display);
                            button.appendTo(window.$('.oe_systray'));
                        });
                    }
                });

                return this._super.apply(this, arguments);
            },
        });
    }

    return im_chat;
})();

But, when I create addons/my_module/static/src/js/im_chat.js, I find no way to replace that behaviour, nor to extend or whatever. The function has no name, as file starts with just:

(function(){

and the if condition is not inheritable (no id, no name, no class).

So, if I put this code in addons/my_module/static/src/js/im_chat.js:

(function (){
    
    "use strict";
    var _t = openerp._t;
    var _lt = openerp._lt;
    var QWeb = openerp.qweb;
    var NBR_LIMIT_HISTORY = 20;
    var USERS_LIMIT = 20;
    var im_chat = openerp.im_chat = {};

    if(openerp.web && openerp.web.UserMenu) {
        openerp.web.UserMenu.include({
            do_update: function(){
                $("#oe_topbar_imbutton_icon").remove();
                var self = this;
                var Users = new openerp.web.Model('res.users');
                Users.call('has_group', ['my_module.group_my_module_manager']).done(function(is_employee) {
                    if (is_employee) {
                        self.update_promise.then(function() {
                            var im = new openerp.im_chat.InstantMessaging(self);
                            openerp.im_chat.single = im;
                            im.appendTo(openerp.client.$el);
                            var button = new openerp.im_chat.ImTopButton(this);
                            button.on("clicked", im, im.switch_display);
                            button.appendTo(window.$('.oe_systray'));
                        });
                    }
                });
                return this._super.apply(this, arguments);
            },
        });
    }

    return im_chat;
})();

It works fine... in its own. It adds a button if user belongs to group 'my_module.group_my_module_manager', but I have no control over im_chat. So I may get two buttons.

Even more... I cannot remove the button creaated in im_chat with mine, because my code seems to execute always after the code in im_chat.

 

So... how do I remove that im_chat button and keep the one I add in my module?

 

0
Alejandro Santana
On 2/11/15, 12:36 PM

The only way I have found so far (remember I am completely new to JS and could not get rid of its uncontrollable asynchronous behaviour) is to override the original im_chat.js file with the one in my module. How? Using this my_module/views/im_chat.xml file:

<?xml version="1.0" encoding="utf-8"?>

<openerp>
    <data>
        <template id="im_chat.assets_backend" name="im_chat assets" inherit_id="web.assets_backend">
            <xpath expr="." position="inside">
                <link rel="stylesheet" href="/im_chat/static/src/css/im_common.css"/>
                <link rel="stylesheet" href="/im_chat/static/src/css/im_chat.css"/>
                <script type="text/javascript" src="/my_module/static/src/js/im_chat.js"></script>
            </xpath>
        </template>
    </data>
</openerp>

And in /my_module/static/src/js/im_chat.js, I had to duplicate the whole code in /im_chat/static/src/js/im_chat.js but changing some lines almost at the end. Not pretty but it works. Final if condition, modified:


    if(openerp.web && openerp.web.UserMenu) {
        openerp.web.UserMenu.include({
            do_update: function(){
                var self = this;
                var Users = new openerp.web.Model('res.users');
                var im = new openerp.im_chat.InstantMessaging(self);
                Users.call('has_group', ['base.group_user']).done(function(is_employee) {
                    if (is_employee) {
                        self.update_promise.then(function() {
                            openerp.im_chat.single = im;
                            im.appendTo(openerp.client.$el);
                            console.log("Creating im_chat for users");
                        });
                    }
                });
                Users.call('has_group', ['my_module.group_my_modulemanager']).done(function(is_employee) {
                    if (is_employee) {
                        self.update_promise.then(function() {
                            openerp.im_chat.single = im;
                            im.appendTo(openerp.client.$el);
                            var button = new openerp.im_chat.ImTopButton(this);
                            button.on("clicked", im, im.switch_display);
                            button.appendTo(window.$('.oe_systray'));
                            console.log("Creating im_chat button for managers");
                        });
                    }
                });
                return this._super.apply(this, arguments);
            },
        });
    }

 

 

 

0
Shawn Varghese
On 2/5/15, 4:55 AM

I dont have a resolution, but I may be able to give some idea as to why this happens.

I think the problem is that you are returning the super method:

return this._super.apply(this, arguments);

As I understand it, 'super' calls the parent method, which in this case is the original function. Therefore, your function as well as the original function gets invoked. If you comment that return statement, you will find that only your custom button appears and the default button does not. At least, that's what I observed in my case. But obviously, that is not the way to go. The only thing that I have been able to do in such cases is to create a copy of the whole im_chat module, make all the modifications in the copy and only install that and not the original module.

Your Answer

Please try to give a substantial answer. If you wanted to comment on the question or answer, just use the commenting tool. Please remember that you can always revise your answers - no need to answer the same question twice. Also, please don't forget to vote - it really helps to select the best questions and answers!

About This Community

This community is for professionals and enthusiasts of our products and services. Read Guidelines

Question tools

1 follower(s)

Stats

Asked: 2/4/15, 2:20 PM
Seen: 3066 times
Last updated: 3/16/15, 8:10 AM