Extending DataImportTool class from javascript

Frappe Framework App Development
3

check pos.js

https://github.com/frappe/erpnext/blob/develop/erpnext/accounts/page/pos/pos.js#L26

4

@Sangram thx for the hint, i’ve tried on data import tool but it seems not allowing to extend.

5

What you tried?

6

probably i’m doing something wrong …

frappe.data_import_tool = frappe.data_import_tool.extends({
	init: function (wrapper) {
		this.onload();
	},

	onload: function () {
		var me = this;
		console.log(me);
	}
});
7

if you are creating a new js file for customization. Then you have to include your .js file in data_import_tool.js

8

it rise an error while importing:

{% include "frappe/core/page/data_import_tool/data_import_tool.js" %}

Uncaught SyntaxError: Unexpected token %

9

Cant get to work :frowning: …do u have any other hint?

10

can someone help on how to extend DataImportTool page?! i’m really getting frustrated …

11

@JoEz
After some tries got one solution :smile:
Refer Simple JavaScript Inheritance to know more

Write following script in your custom js file

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

You have to call this Class from data_import_tool.js

Changes in data_import_tool.js

{% include path to your custom js' %}

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

There is an another way to do it If you have custom app. Simply add your own data_import_tool.js include it in app_include_js via hooks.py

12

Thx, i’ll have a test on second option …i’ll let you know

13

HI @Sangram, i’m getting an error:

TypeError: undefined is not an object (evaluating 'frappe.DataImportTool.extend')

Seems DataImportTool is not found

14

seems like you did something wrong. It is working perfectly for me.
Have you made changes in data_import_tool.js as I suggested?
Please check it again.

Edit:

include custom js exactly above the

frappe.pages['data-import-tool'].on_page_load = function(wrapper) {

15

I think the problem is not on importing in data_import_tool.js, seems more a problem extending DataImportTool class.

And importing file in js will rise another exception:

SyntaxError: Unexpected token '%'

16

always getting :

SyntaxError: Unexpected token '%'

17

Where did you import it?
Import it just before below line as it is executing sequentialy
frappe.pages['data-import-tool'].on_page_load = function(wrapper) {

see

{% include js file %}

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

it doesn’t in what line i import, it keep giving me SyntaxError: Unexpected token '%' error. Not sure why, but seems {% include 'path/to/js/file' %} is not correct even if it should be …

19

FrappeTeam …any hint on this? Seems page DataImportTool is not affected by custom js code and can’t be extended …can u suggest some way to fix it?

20

All day on this …but no results …what version are u using?

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?