I am trying to customize the tree view for a doctype (called category) in a custom app. I know I can override the methods of the TreeView class. However, I want to create a new class called CategoryTreeView that extends the TreeView class. Here is the implementation of the CategoryTreeView in category_treeview.js
frappe.provide("frappe.views");
frappe.views.CategoryTreeView = class CategoryTreeView extends frappe.views.TreeView {
constructor(opts) {
console.log("Initiating the tree")
super(opts);
console.log('loaded')
}
select_node(node) {
this.args['type'] = node.data.type
var me = this;
if (this.opts.click) {
this.opts.click(node);
}
if (this.opts.view_template) {
this.node_view.empty();
$(
frappe.render_template(me.opts.view_template, {
data: node.data,
doctype: me.doctype,
})
).appendTo(this.node_view);
}
}
}
Next, I created a category_tree.js file where I instantiate the custom tree view
frappe.provide("frappe.views");
frappe.provide("frappe.treeview_settings");
frappe.treeview_settings['Category'] = {
get_tree_nodes: "moodle.moodle.doctype.utils.get_children",
filters: [
{
fieldname: "category",
fieldtype:"Link",
options: "Category",
label: __("Category"),
},
],
breadcrumb: "Programs Directory",
get_tree_root: false,
root_label: "MSB",
ignore_fields: ["parent_category"],
onload: function(me) {
frappe.treeview_settings['Category'].page = {};
$.extend(frappe.treeview_settings['Category'].page, me.page);
me.make_tree();
},
toolbar: [
{
label:__("Add Multiple"),
condition: function(node) {
return node.expandable;
},
click: function(node) {
this.data = [];
const dialog = new frappe.ui.Dialog({
title: __("Add Multiple Tasks"),
fields: [
{
fieldname: "multiple_tasks", fieldtype: "Table",
in_place_edit: true, data: this.data,
get_data: () => {
return this.data;
},
fields: [{
fieldtype:'Data',
fieldname:"subject",
in_list_view: 1,
reqd: 1,
label: __("Subject")
}]
},
],
primary_action: function() {
dialog.hide();
return frappe.call({
method: "erpnext.projects.doctype.task.task.add_multiple_tasks",
args: {
data: dialog.get_values()["multiple_tasks"],
parent: node.data.value
},
callback: function() { }
});
},
primary_action_label: __('Create')
});
dialog.show();
}
}
],
extend_toolbar: true
};
let category_treeview = new frappe.views.CategoryTreeView(frappe.treeview_settings['Category']);
In my hooks.py, I’ve referenced the two files:
app_include_js = [
“/assets/moodle/js/moodle/views/category_treeview.js”
]
doctype_js = {
“Category” : “moodle/doctype/category/category_tree.js”
}
When I open the tree view of the category doctype, I get the fllowing error TypeError: frappe.router.current_route is null. I am not sure what I’m doing wrong and after a few days of trying to figure it out I had to ask for help. Any help will be much appreciated.