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.
<odoo>
<data>
<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"/>
</tree>
</field>
</record>
</data>
</odoo>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');
ListRenderer.include({
_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.