webuters Blog

Tree View in Odoo is also known as List View. This view shows multiple records in the form of a list, consisting of rows and columns. Where each row is a record of the database…

How to Add Colors to Tree View in Odoo?

Understanding the Tree View in Odoo

Tree View in Odoo is also known as List View. This view shows multiple records in the form of a list, consisting of rows and columns. Where each row is a record of the database table.

You can easily do operations like filter, sorting and group by on the tree view.

How to create Tree View in Odoo

In Odoo, all views are stored in the database under ir.model.view model. We declare an <record> element for adding a view in a module. The view is described in an XML file which is loaded into the database at the time of module installation. <tree> is the root element of Tree View inside which you need to define all the fields to add to the tree view.

Now how you can add colors to tree view? Adding colors to tree view would be something you might don’t know yet. In this article, we will discuss how you can add colors to the tree view based on conditions.

How to Add Colors to Tree View?

As in the Odoo backend we have tree view for the listing of the records and kanban view. The kanban view shows records as “cards”, midway between a list view and a non-editable form view.  In the list view we have default data grid table with rows and columns like shown in the picture below.

Tree view

Now, we have a requirement where we need to highlight certain rows in the list view based on certain conditions in the current model. We highlight the rows using colors. Let’s see how we do it.

For the versions of Odoo below 10, we use colors property of the tree view.

XML Syntax

<tree colors=”your_color:field== ‘value'”>

Example

<tree colors=”your_color:field== ‘value'”>

For version 9 of Odoo, colors are replaced by the decorators. However, colors will still support up to version 10 of Odoo. But Odoo version 11 does not support colors, it supports decorators only. Developers should understand that this formatting depends on the bootstrap style.

This is definitely a wonderful feature that allows us to add colors to the tree view, what do you think? You must also be liking it like we are. Now when we know that we can add decorators to highlight the rows in the tree view. We must know the type of decorators we can use to highlight the rows.

The decorators that can be used are

decoration-it – shows the row in ITALICS
decoration-bf – shows the row in BOLD
decoration-danger – shows the row in LIGHT RED
decoration-primary – shows the row in LIGHT PURPLE
decoration-info – shows the row in LIGHT BLUE
decoration-warning – shows the row in LIGHT BROWN
decoration-muted – shows the row in LIGHT GRAY
decoration-success – shows the row in LIGHT GREEN

How we use decorators in our code?

Syntax

<tree decoration-type=”field==’value'”>

Example

<tree decoration-success=”state==’done'”>

The Output for the decorators will look like as shown in the below picture.

Decorators use

Example Code for tree view color code is show below

example code tree view

Conclusion:

The article discusses what is tree view in Odoo, how to create a Tree View and how to add colors to it. You can use this feature to add colors to Tree View based on conditions, but it does make the tree look like a decorated Christmas tree. That’s pretty incredible to work on.

Stay tuned for more unexplored Odoo features.

Please follow,share and like us:
2 Thoughts on How to Add Colors to Tree View in Odoo?
    Social Buddy
    23 Dec 2019
    1:59am

    Well… consider yourself added to my blogroll. I have like six other blogs I read on a weekly basis, guess that number just increased to seven! Keep writing!

      webuters
      21 Jan 2020
      7:40am

      It’s good to connect with you. Stay tuned.

Leave A Comment