Try ERPNext Buy Support Partners Foundation

How to Override js function in erpnext v9

Hello,

I am trying to override js function named “calculate_item_values” is available in (erpnext=>erpnext=>public=>js=>controllers=>taxes_and_totals.js) erpnext.
to do a calculation for an amount in sales order lines.

Below is my code, I added in my custom application by creating controllers directory but it not working.

frappe.provide(“erpnext.public”);
frappe.provide(“erpnext.controllers”);
console.log(":::::::");
erpnext.TaxesAndTotalsCustomization = erpnext.taxes_and_totals.extend({
setup: function(){},
calculate_item_values: function() {
var me = this;
console.log(":::::CUSTOM:::::me:::::",me);
},
})

It is more prior to me. Please help me on this.

Thanks in advance :slight_smile:

1 Like

This won’t work because even after this, erpnext.taxes_and_totals is used to calculate the values and not your modified function. You can do this:

frappe.provide(“erpnext.public”);
frappe.provide(“erpnext.controllers”);

erpnext.TaxesAndTotalsCustomization = erpnext.taxes_and_totals.extend({
  setup: function(){},
  calculate_item_values: function() {
    var me = this;
    console.log(":::::CUSTOM:::::me:::::", me);
  },
});

erpnext.taxes_and_totals = erpnext.TaxesAndTotalsCustomization;
3 Likes

Hello @netchampfaris,

Thank you for replying. :slight_smile:
I improved my code as per your suggestion but still it not working,
And also tried commands to remove cache.

bench migrate
bench build
bench clear-cache
and then reloaded the browser, but still not working. :thinking:
Thanks

Make sure your js file is loaded. Maybe you’ll have to add it to build.json

Where do I need to add build.json file?
because I am not aware of build.json file.

Yes, my js file is loaded because I added one console.log() at the beginning of my js file and that is print when I reload the browser, because of my js file path is added to hooks.py ( app_include_js = “”).

Thanks

In that case, you dont need to add to build.json, You will have to check whether the erpnext.taxes_and_totals class is available before extending it. Try debugging it using the debugger statement in JS

1 Like

Hello @netchampfaris,

Sry for the late reply.
Thanks for the suggestion. I will try to fix it by the debugger.

Hello @netchampfaris,

Finally, I got the solution to override js function through the prototype.
Below is my code and it works fine.

erpnext.taxes_and_totals.prototype.calculate_item_values = function(){
var me = this;
console.log(":::::CUSTOM:::::me:::::",me);
}

Thanks. :slight_smile:

3 Likes

Hi,
Am trying to override the onload function of Item, from custom script. This is my code

frappe.provide(“erpnext.item”);

erpnext.item.prototype.onload = function()
{
frappe.msgprint(‘overriding onload from cust script’);
}

What am I missing?

TIA
Krithi

Hello Krithi,

where did you put this code?
I mean create a New and separate application?
you have to put the code in public directory ( for ex : public=>js=> file.js ) and also add the path of that file in hooks.py. (app_include_js)

Thanks

Yes. In a custom app,added a file under pubic/js/ and referred it in hooks under doctype_js.

Now tried adding under app_include_js also. Didn’t work. Still invokes core ‘onload’.

Hi @yogendrasinh @krithi_ramani I seem to be having a similar issue, I am trying to extend the functionality of the calculate_outstanding_amount method in the same script,
I have done everything stated here (added to app_include_js) and even added the file path to my build.json but still the core method is still being called, can i please get any guidance ? thank you

This is old topic but it came up as first result relating to override JS function, here is how to do it.

const TaxesAndTotalsExtend = erpnext.taxes_and_totals.extend({
	calculate_item_values: () => {
		console.log('Hello from extend taxes and total extend !!');
	},
});

$.extend(
	cur_frm.cscript,
	new TaxesAndTotalsExtend({frm: cur_frm}),
);

It’s work on version 12. Cheers ! :grin:

@pipech can you explain what it is you are doing with your code? Does it completely override the pre existing js or extends it? I tried it and it didn’t seem to work. I’ve been trying to override pre existing js functions.

// TaxesAndTotalsExtend is just variable name
// erpnext.taxes_and_totals is function contain function you want to override
const TaxesAndTotalsExtend = erpnext.taxes_and_totals.extend({
	// calculate_item_values is function you want to override
	calculate_item_values: () => {
		console.log('Hello from extend taxes and total extend !!');
	},
});

// this tell current form to use this override script
$.extend(
	cur_frm.cscript,
	new TaxesAndTotalsExtend({frm: cur_frm}),
);

Gotcha… I was thinking it was something completely different. Thank you for the explanation

Is this the same? The code below is called when the is_fixed_asset function is called, but i don’t think it replaces it. Its called from the core JS. I tried your code snippet, and it didn’t seem to work and i kept getting an error. I received a fatal error saying there was no erpnext.item.extend method when the script was called.

Your variation:

const ItemExtend = erpnext.item.extend({
	is_fixed_asset:() => {
		console.log("Hello from extend Item !! ");
	},
});
$.extend(cur_frm.cscript, new ItemExtend({frm: cur_frm}),
);

My variation:

$.extend(erpnext.item, {

    is_fixed_asset_custom: function() {
    		console.log('Some Message');
    },
});