add-colors-to-tree-view-odoo-13.png
Blogger_637068746542562782.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 them in some modules, for instance, in the list view, the records are separated with different colours. Based on the conditions,  the records are displayed in different colours. In this case, it becomes highly helpful to find and identify the records from the list based on the colour. In Odoo it's been used in most of the modules. Here we can see the list view of an operation in the Inventory. 


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


Here we can see some of the records in red colour. Here they have differentiated the records based on their status. We can see decoration-danger(red colour) for the records which are not in the state -done or canceled. 


 In this blog, I will show you how to add colours to the records in the tree view in a custom module. Based on the data in the record, one can provide colour to the fields in the tree view. As we know if we are giving different colours to the record in the tree view and it will be easier to identify the records. So let’s see how we can change tree view lines colours based on condition. 


This is the normal tree view of my custom module School:


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


In order to give colour for the records in odoo, we have to add decorations around the tree view. Here I am going to separate the records based on age. I am trying to separate the records of the student whose age is 20 or less than 20 and whose age is above 20. As you can see the code below I have given decoration-danger for the records with age less than or equal to 20 which will decorate the record with red colour. The decoration-success for the records with age greater than 20 will return the records with a green colour. Also, we have more options for decorating records in different colours. 


Every option is described below. 


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 colour will be as follows. Here we can see the records for which the age is greater than 20 is displayed in green colour and records for which the age is equal to or less than 20 displayed in red colour.


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


So this is how it works.


And we can give different colours 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 colour to the tree view of any Custom module.



cybrosys youtube

Comments

0


Leave a comment

 
Calicut

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

London

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

Kochi

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

Bangalore

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

Send Us A Message