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, and they are differentiated based on their status. Furthermore, the decoration-danger(red color indication) for the records that 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 assign color to the fields in the tree view. Furthermore, if we give different colors to the records in the tree view, it will be easier to identify the records. So let’s now see how to change tree view line 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 a student whose age is above 20. Furthermore, in the code below, I have given a decoration danger for the records with an age less than or equal to 20 which will decorate the record with a red color. The decoration-success for the records with an 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 a 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.