Enable Dark Mode!
add-colors-to-tree-view-odoo-13.png
By: Abdul Afras

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.

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


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.

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


In addition, we can give different colors for the decoration by using the following codes:

decoration-muted: records will be light grey

decoration-danger: records will be light red

decoration-success: records will be light green

decoration-primary: records will be light purple  

decoration-info: records will be light blue 

decoration-warning: records will be light brown

decoration-bf: records will be bold

Decoration-it: records will be italic


In this way, we can add color to the tree view of any Custom module.
Refer to our previous blog on How to Delete a Record from XML Code in Odoo 


If you need any assistance in odoo, we are online, please chat with us.




0
Comments



Leave a comment

 
whatsapp
location

Calicut

Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635

location

London

Cybrosys Limited
Alpha House,
100 Borough High Street, London,
SE1 1LB, United Kingdom

location

Kochi

Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.

location

Bangalore

Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message