It is possible to inherit a function and add a code line in JS

Question

I'm trying to add a code line in a created JS function but I'm not able inject in in the middle of an event trying to inherit the function.

For example, I had this variable: var my_new_var = $(this).val().toString();

This is the allready defined code, where I need to inject my new variable in the params: {} dictionary:

odoo.define('portal.signature_form', function (require){
    "use strict";
    // vars and requires

    var SignatureForm = Widget.extend({
        template: 'portal.portal_signature',
        events: {
            'click #o_portal_sign_clear': 'clearSign',
            'click .o_portal_sign_submit': 'submitSign',
            'init #o_portal_sign_accept': 'initSign',
        },
 // init sign and clear sign events

        submitSign: function (ev) {
            ev.preventDefault();

            var self = this;
            var $confirm_btn = self.$el.find('button[type="submit"]');

            var partner_name = self.$("#o_portal_sign_name").val();
            var signature = self.$("#o_portal_signature").jSignature('getData', 'image');
            var is_empty = signature ? this.empty_sign[1] === signature[1] : true;

            this.$('#o_portal_sign_name').parent().toggleClass('o_has_error', !partner_name).find('.form-control, .custom-select').toggleClass('is-invalid', !partner_name);
            this.$('#o_portal_sign_draw').toggleClass('bg-danger text-white', is_empty);
            if (is_empty || ! partner_name) {
                return false;
            }

            $confirm_btn.prepend('<i class="fa fa-spinner fa-spin"></i> ');
            $confirm_btn.attr('disabled', true);

            return rpc.query({
                route: this.options.callUrl,
                params: {
                    'res_id': this.options.resId,
                    'access_token': this.options.accessToken,
                    'partner_name': partner_name,
                    'signature': signature ? signature[1] : false,
// ****************** HERE I NEED TO ADD MY NEW LINE **************************
                    'my_new_var': my_new_var,
                },
            }).then(function (data) {
                self.$('.fa-spinner').remove();
                if (data.error) {
                    self.$('.o_portal_sign_error_msg').remove();
                    $confirm_btn.before(qweb.render('portal.portal_signature_error', {message: data.error}));
                    $confirm_btn.attr('disabled', false);
                }
                else if (data.success) {
                    $confirm_btn.remove();
                    var $success = qweb.render("portal.portal_signature_success", {widget: data});
                    self.$('#o_portal_sign_draw').parent().replaceWith($success);
                }
                if (data.force_refresh) {
                    if (data.redirect_url) {
                        window.location = data.redirect_url;
                    } else {
                        window.location.reload();
                    }
                }
            });
        },
...
});

Does someone know how to add this new code line?

By normal Inheritance I don't think you can, I was searching for something like this I didn't find a solution, when I used debug I find out that the request is immediately send to the server at this point I decided to override the function completely and luckily Odoo return the instance of the class in the return statement so I override that attribute and the inheritance flow was not broken. what I did was monkey patching — Charif DZ, Jul 10 '20 at 15:23
So if I understand it is possible to do it? If only by overwriting all the code and calling my new code? If it's possible, how I could do it (dissable the existing code and enable my new one) ? Thanks for your reply! @CharifDZ — arevilla009, Jul 13 '20 at 06:41

Alonso · Answer 1 · 2020-07-13T13:21:53.673

In order to make your extension works, you need to import your script. To do this, you must extend the XML file where odoo load all JS to be used. Here is an example:

<?xml version="1.0" encoding="utf-8"?>
<odoo>
 <data>
  <template id="assets_backend" name="my app extended assets" inherit_id="web.assets_backend">
   <xpath expr="." position="inside">
    <script type="text/javascript" src="/my_project/static/src/js/my_new_script.js"/>
   </xpath>
  </template>
 </data>
</odoo>

To make sure your code is works, try to add a break point ("debugger;" or an alert("debug");) and check if your browser developer tools stop here.

To edit a existing widget method in Odoo you need to import the widget and use the "include" property to edit the existing code. Here an example:

odoo.define('your_module.some_name', function (require) {
    "use strict";

    var OdooWidget = require('odoo_module.OdooWidget');

    OdooWidget.include({
        name_widget_method: function () {
            // current code
            // your code
            // current code
            // ...
        }
    });
});

I hope this helps!

I understand that with this code you are refering to add a new js file with the function totally overwrited? @Alonso — arevilla009, Jul 13 '20 at 06:43
Yes. In addition, you must inherit the widget. I gonna edit my answer to add some guide lines. — Alonso, Jul 13 '20 at 13:22

It is possible to inherit a function and add a code line in JS

1 Answers1