How to overide stander js class like NumberCardWidget

Frappe Framework Customization
1

export default class NumberCardWidget extends Widget {
constructor(opts) {
opts.shadow = true;
super(opts);
}

get_config() {
return {
name: this.name,
number_card_name: this.number_card_name,
label: this.label,
color: this.color,
hidden: this.hidden,
};
}a

i wnat to overide

setbody furnction

2

i tried somthing like that in my cutom app but not worked


import NumberCardWidget from "../../../../frappe/frappe/public/js/frappe/widgets/number_card_widget";

NumberCardWidget.prototype.set_body = function () {
  console.log("set_body custom 🎉-------------------------------------");
  this.widget.addClass("number-widget-box");
  this.make_card();
};

and still the app call origibnal method set_body

3

Reference:

1 Like
4

many thanks pro for your help
i can overide the stander method only if it accessible through js namespace like

frappe.ui.form.CustomerQuickEntryForm = PartyQuickEntryForm;
frappe.ui.form.SupplierQuickEntryForm = PartyQuickEntryForm;

and its working ok

but i wnat to overide for class not linked with namesapece like the “NumberCardWidget”

import Widget from "./base_widget.js";

frappe.provide("frappe.utils");

export default class NumberCardWidget extends Widget {
	constructor(opts) {
		opts.shadow = true;
		super(opts);
	}

	get_config() {
		return {
			name: this.name,
			number_card_name: this.number_card_name,
			label: this.label,
			color: this.color,
			hidden: this.hidden,
		};
	}

and to acess it you have to acess through the file path also :disappointed_relieved:

5

this code will work if i but it in any frappe js stander js file “frappe/public/js”


import NumberCardWidget from "../../../../../frappe/frappe/public/js/frappe/widgets/number_card_widget";

NumberCardWidget.prototype.set_body = function () {
	console.log(
		"set_body custom 🎉-----------s---from inside---zzzzzddzzzzszz--------------------"
	);
	this.widget.addClass("number-widget-box");
	this.make_card();
};

but the issue that my cutom app will have seprate bundle so i think this the reson its not working :disappointed_relieved:

6

@nextgen any luck on this ? I also stuck in same situation. I want to override Grid class but in custom app it’s throwing error.

Uncaught SyntaxError: Cannot use import statement outside a module

7

i made custom cmd scribt that i have to run after any update to inject my custom code in stander code

echo After Update Script ......
# run  . apps/mycutomapp/after_update.sh after any update

parent_path=$( cd "$(dirname "${BASH_SOURCE[1]}")" ; pwd -P )

stander="$parent_path/apps/frappe/frappe/public/js/frappe/widgets/number_card_widget.js"
custom="$parent_path/apps/mycutomapp/mycutomapp/public/js/monkey_patch/number_card_widget__append.js"
sed -i '/\/\/begin_custom/,$d' "$stander"
cat "$custom" >> "$stander"```