In Odoo, data is commonly presented through list views, but visually scanning through multiple records can sometimes feel tedious when they all look alike. Developers typically enhance readability by applying styles such as text colors, bold fonts, or italics to highlight specific entries.
Using background shading offers a clearer, more intuitive way to distinguish records at a glance and improves user experience in list-heavy modules. To demonstrate this feature, we will walk through applying background coloring to the Sales Orders tree view in Odoo 19.
Step 1: Define the field in Python
As an example, let’s create a new model ‘my.tasks’ and define the necessary fields.
# -*- coding: utf-8 -*-
from odoo import models, fields
class MyTasks(models.Model):
_name = "my.tasks"
_description = "My Tasks"
name = fields.Char(string='Name', required=True, help="Name of task")
status = fields.Selection([
('draft', 'Draft'),
('in_progress', 'In Progress'),
('done', 'Done'),
], default='draft', string='Status', help="Status of task")
due_date = fields.Date(default=fields.Date.today(), string='Due Date', help="Due date of task")
estimated_hours = fields.Float(default=0, string='Estimated Hours', help="Estimated hours of task")
priority = fields.Selection([('low', 'Low'), ('medium', 'Medium'), ('high', 'High')], default='low', string='Priority', help="Priority of task")
Step 2: Define the xml views for the model
To apply color styling to records in Odoo, you can use decorations within the list view. These decoration attributes allow you to highlight records based on specific conditions. For example, you can visually group or differentiate entries by applying colors to entire rows or individual columns. This is especially useful when you want to distinguish records. For instance, separating tasks or employees by their department or status.
<!-- for applying color to the list row-->
<?xml version="1.0" encoding="UTF-8" ?>
<odoo>
<record id="my_tasks_view_list" model="ir.ui.view">
<field name="name">my.tasks.view.list</field>
<field name="model">my.tasks</field>
<field name="arch" type="xml">
<list
decoration-warning="status == 'draft'"
decoration-info="status == 'in_progress'"
decoration-success="status == 'done'"
>
<field name="name"/>
<field name="due_date"/>
<field name="estimated_hours"/>
<field name="priority"/>
<field name="status"/>
</list>
</field>
</record>
</odoo>
The list view will look like this:
You can also color the fields in a record. For that you have to define the colors corresponding to the fields.
<!-- for applying color to the columns in list view-->
<record id="my_tasks_view_list" model="ir.ui.view">
<field name="name">my.tasks.view.list</field>
<field name="model">my.tasks</field>
<field name="arch" type="xml">
<list>
<field name="name"/>
<field name="name"/>
<field name="due_date"/>
<field name="estimated_hours"/>
<field name="priority"
decoration-info="priority == 'low'"
decoration-warning="priority == 'medium'"
decoration-danger="priority == 'high'"/>
<field name="status"/>
</list>
</field>
</record>
The list view will now look like this now:
You can apply these decoration attributes in tree views to improve readability and make record analysis faster. Odoo provides several visual decorators that help highlight the status or condition of a record:
- decoration-success – light green
- decoration-primary – light purple
- decoration-info – light blue
- decoration-muted – light gray
- decoration-warning – light brown
- decoration-danger – light red
In addition to colors, you can also use text-style decorators to emphasize specific rows:
- decoration-bf – displays the text in bold
- decoration-it – displays the text in italic
By combining these decorators, you can create more intuitive and visually appealing tree views, making it easier for users to interpret information at a glance.
Conclusion
Using decorations in Odoo tree views is an effective way to make information easier to interpret at a glance. Color highlights and text styling help draw attention to important records, clarify their status, and improve overall navigation within the system. By incorporating these visual cues, you create a cleaner, more intuitive interface that supports faster decision-making and a better user experience.
To read more about List (Tree) View Decoration Attributes in Odoo 18, refer to our blog List (Tree) View Decoration Attributes in Odoo 18