How to Add Colors to Tree View in Odoo 13

Technical Odoo 13

In Odoo sometimes we may need to differentiate records based on some factors. We have seen the feature in some modules, for instance, in the list view, the records are separated with different colors. Furthermore, based on the conditions the records are displayed in different colors. Therefore, it becomes highly helpful to find and identify the records from the list based on the color. Additionally, in Odoo it's been used in most of the modules.

The following image depicts the list view of an operation in the Inventory module.

Here we can see that some of the records are indicated in red color and they are differentiated based on their status. Furthermore, the decoration-danger(red color indication) for the records which are not in the state is done or canceled.

This blog will describe how to add colors to the records in the tree view in a custom module?

Based on the data in the record, you can provide color to the fields in the tree view. Furthermore, if we are giving different colors to the record in the tree view it will be easier to identify the records. So let’s now view how to change tree view lines colors based on condition.

The following image depicts the normal tree view of my custom module School:

add-colors-to-tree-view-odoo-13-cybrosys

In order to give color to the records in Odoo, we have to add decorations around the tree view. For example, here I am going to separate the records based on age. In addition, the classification will be made as per the following terms: a student whose age is 20 or less than 20 and whose age is above 20. Furthermore, in the code below I have given a decoration-danger for the records with age less than or equal to 20 which will decorate the record with red color. The decoration-success for the records with age greater than 20 will return the records with a green color. Additionally, we have more options for decorating records in different colors.

Here is the tree view of the model student. student

<record id="view_student_record_tree" model="ir.ui.view">
            <field name="name">Student</field>
            <field name="model">student.student</field>
            <field name="priority">2</field>
            <field name="arch" type="xml">
       <tree decoration-danger="age &lt;= 20" decoration-success="age &gt; 20" default_order="nationality desc">
                    <field name="name"/>
                    <field name="middle_name"/>
                    <field name="dob"/>
                    <field name="age"/>
                    <field name="nationality"/>
                </tree>
            </field>
        </record>

The records after giving the color will be as the ones depicted in the following image. Here we can see the records for which the age is greater than 20 is displayed in green color and records for which the age is equal to or less than 20 are indicated in red color.