Create Tree View and a Tree Browser for any DocType

I created reference / tutorial app for creating Tree/Chart views for doctype

Useful Posts:

Fields in Doctype : Tree

  1. tree_name - Data
  2. parent_tree - Link:Tree
  3. is_group - Select:Yes/No
  4. lft - Int
  5. rgt - Int
  6. old_parent - Link:Tree

Tree Browser Page:

1 Like

Hi @revant_one

Thanks a lot for this great work. I think it really should be part of the core. Have you considered contributing this?

Kind regards,

This is part of core after Version 7 Update: Common tree view

Any doctype which inherits NestedSet and has _tree.js will have a tree view.

Is it possible to render a tree view in a dialog? I think that makes sense for navigating a warehouse with a lot of children and locations (EG Aisle 001 and bin 001) from stock entry, for example.

1 Like

Bringing this one back to life!

We have been working on creating a tree view for the Animal Group DocType in agriculture module as per @tmatteson’s suggestions.

So far we are able to create the tree view just fine.
Each animal group has two child tables.

One child table contains the “serialized” animals and their weights and weight uom’s.

The second one “unserialized” contains one row with a quantity, weight and weight uom’s as well.

What we want to do is load the individual child table rows for both serialized and unserialized animals as nodes under the Animal Group DocType, perhaps with a for loop or similar.

Any other ideas to accomplish this (aside from Revant’s excellent reference)?


take an look on how the chart of accounts that the data for the account tree

My suggestion, you can create one list, to return, distinct than the acc, and while you is looping the acc you check if it have childrens, if it have children, you can append the childrens into the tree.

Note: It’s an suggestion, and may not work properly in ERPNext.

Thanks Max, we were exploring that with Mario, and your post reinforces our search for solutions in the methods available there. Thanks for the prompt reply!

Update: Found this gem which helped us do a workaround to run some calculations on data in tree view. Ultimately, it will be in the _tree.js for the Animal Group DocType when it is finally Pulled into the Core.

1 Like

Boa tarde!
Max, li alguns dos seus post, e percebi que você é o programador mais ativo no grupo na adaptação do ERPNEXT para o Brasil, você ainda esta empenhado no projeto?
Desculpe por comentar seu post, mas não tinha como eu mandar uma msg no privado.

@djangons Sim ainda trabalho com ERPNext, mas em 90% do tempo com projetos fora do mercado brasileiro.

Apesar de eu ter uma experiencia sólida com ERPNext para o mercado Brasileiro, a nossa burocracia tem dificultado a tração do projeto em terras tupiniquins

Gostaria do seu contato de e-mail, só para trocar uma ideia com você, sobre um projeto de um erp para industria de calçados.

Sir i successfully implemented tree structure for my custom doctype using your reference.
Thank you so much
Sir i want to hide add_child, edit and delete button from tree view i just want only tree structure. So how i should hide that button. please help me out.
Thanks in advance.

@revant_one I have successfully implemented a tree structure for my custom doctype too thanks I, however, went through quite a hurdle. I will further elaborate how i did it

  1. I created a custom doctype the normal way as shown in the screenshot

  2. Add the fields:
    (i) test_name - Data (this field should be Mandatory)
    (ii)parent_test - Link:Tree
    (iii)is_group - Select:Yes/No
    (iv) lft - Int (this field should be hidden)
    (v)rgt - Int (this field should be hidden)
    (vi)old_parent - Link:Test (this field should be hidden)
    as shown in the screenshot below

  3. Save the doctype

  4. From your text edit open the doctype test and edit the file as shown in the screenshot below

  5. Now Create new file test_tree.js and add the code shown in the screenshot below

  6. Run bench migrate you are done now when you visit the test list you will see the tree view as shown in the screenshot below:

If you want to look at the code arrangement for this doctype checkout GitHub - Kipngetich33/Tree-View


Added a new Wiki Page for this.


I am not able to see the “Is Tree” flag on the New Doctype form.

ERPNext: v12.0.4 (version-12)
Frappe Framework: v12.0.4 (version-12)

I am trying to create a New Doctype in a Custom App.
Is there anything that I am missing?

1 Like

Boa tarde Max, ainda mexendo com o ERPNext?

@leoleonel sim, como sempre!

Estou tentando implementar ele, tem alguma dica? conhece alguma consultoria? Pelo pouco que eu vi, me parece que a curva de aprendizagem no inicio é bem complicada.

I’ve checked this box.
When I go to the list of documents (before creating the first one), Frappe displays the text “undefined” to the right of the folder symbol. It creates no document when I press the button “New child” or the button “New”.
These look like issues to me. How do we solve them?