Extending DataImportTool class from javascript

Frappe Framework App Development
21

I think this is not required. You just need to extend the frappe.DataImportTool class and make sure to include it in your hooks.py so that it loads after the frappe assets load. That should override the original data import tool.

22

@netchampfaris Hi there,

i’m trying to extend but it keeps giving me an error:

[Error] TypeError: frappe.DataImportTool.extend is not a function. (In 'frappe.DataImportTool.extend', 'frappe.DataImportTool.extend' is undefined)

this is my code:

frappe.DataImportTool = frappe.DataImportTool.extend({
	init: function(parent) {
		console.log("custom init")
		this._super(parent)
		this.onload()
	},
	onload: function(parent) {
		console.log(" custom onload")
	}
});

Any hint?

23

@JoEz
###1. Add a js file in hooks.py file.

# include js in page
page_js = {"data-import-tool" : "public/js/data_import_tool.js"}

###2. make “data_import_tool.js” file in yourapp/public/js folder

###3. wire below code in file the js file

frappe.DataImportTool = frappe.DataImportTool.extend({
	init: function(parent) {
		console.log("Hello this file is called.")
	},
})

frappe.pages['data-import-tool'].on_page_load = function(wrapper) {
	frappe.data_import_tool = new frappe.DataImportTool(wrapper);
}
24

@mainul thx for the hint …i have:

in hooks.py:

app_include_js = ["/assets/myapp/js/myapp.min.js" ]

in build.json

"myapp/js/myapp.min.js": [
    "public/js/app/utils.js",
]

public/js/app/utils.js:

frappe.DataImportTool = frappe.DataImportTool.extend({
	init: function(parent) {
		console.log("custom init")
		this._super(parent)
		this.onload()
	},
	onload: function(parent) {
		console.log(" custom onload")
	}
});

Isn’t the same thing?

25

@JoEz
yes it’s same thing.
but there have some difference.
your js file loade on server start.
So you extend frappe.DataImportTool class before defined.
But in my way in hooks file it will call after frappe.DataImportTool class defined. because when page load call hooks method and load our custom file.
#Please try my way hope it will work. :slight_smile:

and don’t forgot write below code.

frappe.pages['data-import-tool'].on_page_load = function(wrapper) {
	frappe.data_import_tool = new frappe.DataImportTool(wrapper);
}

Thanks

26

@mainul man …you’re right!!! it worked …a really big thx

1 Like