How to Add Colors to 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. Whe

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 a tree view for the listing of the records and the 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 to Webuters for more unexplored Odoo features.

Related Posts

Nodejs Debugging
Read Time5 min read
12 Jun 2023
By

Efficient Debugging Techniques for Node.js Developers

From the standpoint of a coder, Node.js is one of the finest runtime platforms for JavaScript. If software development is […]

Log4j Software Vulnerability
Read Time5 min read
13 Dec 2021
By

The Log4j Software Vulnerability Prompts an Urgent Warning by the US Government’s Cybersecurity Agency

If you have not heard of the Log4j software vulnerability, this article provides a brief background on what the Log4j […]

Read Time5 min read
31 Oct 2020
By

Why to Have a Family-like Environment at Workplace?

The family is the cornerstone for every evolution. It is the pillar that binds the individuals in a close knot […]

Lets work together
Do you have a project in mind?