Enable Dark Mode!
By: Cybrosys Technologies

How to Add Background Color to Tree View Records in Odoo 16

Technical Odoo 16

As is common knowledge, a list of records can be found in a list view or tree view. Find it challenging to distinguish between them. As a result, we employ a variety of techniques, including text color changes and text formatting such as bold and italics. We already have a blog post about how to make the text in the tree/list view colored. Please refer to the blog link How to Add Colors to Tree View in Odoo 15 
In this blog, we are going to discuss how to add background color to tree view records in Odoo 16. It is much easier to differentiate between the records in a list view.
As an example, let's say we want to add background color to the tree view records of the "Sales Order" model in Odoo 16.

Step 1: Define the color field in the model

To add background color to tree view records, we first need to define a color field in the model. In our example, we will use the "Sale Order" model. We will add a new field called "color" to the model that will store the background color of the tree view record.
from odoo import models, fields

class SaleOrder(models.Model):
    _inherit = 'sale.order'

    color = fields.Char(string="Color")

Step 2: Modify the tree view

Next, we need to modify the tree view to display the color field. We do this by adding a new column to the tree view in the XML file of our custom module.
        <record id="sale_order_tree_view_inherit" model="ir.ui.view">
            <field name="name">sale.order.tree.inherit</field>
            <field name="model">sale.order</field>
            <field name="inherit_id" ref="sale.view_order_tree"/>
            <field name="arch" type="xml">
                <tree string="Sales Orders" colors="red:state == 'draft'; orange:state == 'sent'; green:state == 'sale'">
                    <field name="name"/>
                    <field name="partner_id"/>
                    <field name="date_order"/>
                    <field name="amount_total"/>
                    <field name="color" invisible="1"/>
In this example, we have added a new column for the "color" field, which is initially hidden from the user using the "invisible" attribute.

Step 3: Add JavaScript code to set the color

Now, we need to add JavaScript code to set the background color of the tree view record based on the value of the "color" field. We do this by adding a new JavaScript file to our custom module.
odoo.define('my_module.tree_color', function (require) {
    'use strict';
    var ListRenderer = require('web.ListRenderer');
        _renderRow: function (record, index) {
            var $row = this._super.apply(this, arguments);
            var color = record.data.color;
            if (color) {
                $row.css('background-color', color);
            return $row;
This code extends the default ListRenderer class in Odoo and adds a new method, "_renderRow". This method sets the background color of the tree view record based on the value of the "color" field.

Step 4: Update the manifest file

Finally, we need to update the manifest file of our custom module to include the JavaScript file we just created.
Also, we can change the existing color using a color picker on the tree view. For example, You can refer to the following app: Listview Change Background Color

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


Leave a comment




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



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



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

Send Us A Message