Tree View

Frappe shows a Tree View for any DocType that has the Is Tree option enabled (the DocType has an is_group field and nested set fields lft and rgt). The default view lets you expand nodes, add children, rename, and delete.

You customize the Tree View by setting frappe.treeview_settings[doctype] to an object of options. Put this in the DocType's tree script file, named {doctype}_tree.js (for example account_tree.js).

frappe.treeview_settings["Account"] = {
  breadcrumb: "Accounting",
  title: "Chart of Accounts",
  get_tree_nodes: "myapp.api.get_children",
  add_tree_node: "myapp.api.add_node",
  filters: [
    {
      fieldname: "company",
      fieldtype: "Link",
      options: "Company",
      label: __("Company"),
    },
  ],
  // fields shown in the "New" dialog
  fields: [
    {
      fieldtype: "Data",
      fieldname: "account_name",
      label: __("Account Name"),
      reqd: true,
    },
    { fieldtype: "Check", fieldname: "is_group", label: __("Is Group") },
  ],
};

Options

Server methods

get_tree_nodes is called with the current doctype, the parent node, and any active filter values. It must return a list of nodes, where each node is a dict with these keys:

• value: the node's name (used as its id)
• title: the label shown in the tree
• expandable: 1 if the node can have children, else 0

The default frappe.desk.treeview.get_children covers the common case. Write your own only when you need custom filtering or labels.

add_tree_node receives the values from the "New" dialog along with parent, doctype, and is_root, and is responsible for creating the document. The default is frappe.desk.treeview.add_node.

Filters

Each filter is a control definition, the same shape used in dialogs. When a filter value changes, the tree is rebuilt with the new value passed to get_tree_nodes. Use onchange to run extra logic on change.

filters: [
  {
    fieldname: "company",
    fieldtype: "Link",
    options: "Company",
    label: __("Company"),
    onchange: function () {
      // runs after the value changes, before the tree rebuilds
    },
  },
];

Menu items

menu_items adds entries to the page's ... menu. Each item has a label and an action function. An optional condition string is evaluated to decide whether the item shows.

menu_items: [
  {
    label: __("New Company"),
    action: function () {
      frappe.new_doc("Company", true);
    },
    condition: "frappe.boot.user.can_create.indexOf('Company') !== -1",
  },
];

Note the condition is a string, and the inner string literal uses single quotes inside the double-quoted condition.

Toolbar

toolbar defines buttons shown next to each node. Each button has a label, a condition(node) function that returns whether the button shows for that node, a click(node) handler, and an optional btnClass.

toolbar: [
  {
    label: __("Add Child"),
    condition: function (node) {
      return node.expandable;
    },
    click: function (node) {
      // handle click
    },
    btnClass: "hidden-xs",
  },
];

By default your toolbar replaces the built-in Edit, Add Child, Rename, and Delete buttons. Set extend_toolbar: true to keep the defaults and add your buttons alongside them. A button with the same label as a default replaces that default.

Lifecycle hooks

frappe.treeview_settings["Account"] = {
  onload: function (treeview) {
    // treeview is the TreeView instance
  },
  post_render: function (treeview) {},
  onrender: function (node) {},
  on_get_node: function (nodes) {},
};