
Learn how to customize color in Odoo tree view using decoration classes. Improve your Odoo UI with record color customization for better visual organization.
Odoo offers various customization options to enhance user experience, and one of the most effective features is the ability to add colors to records in the tree view. By assigning different colors based on field values or conditions, you can easily highlight important data and make your records more visually appealing. In this blog, we will explore how to add color to tree view records in Odoo.
Applying colors to the tree view in Odoo allows you to visually differentiate records based on specific criteria. For instance, you might want to highlight overdue tasks in red or completed tasks in green. This feature is highly useful for improving the user experience, especially when dealing with large datasets.
Follow these steps to add colors to tree view records in Odoo based on specific conditions:
First, you need to define the condition for applying the color. This is done within the tree view XML definition using the decoration
attribute. Here's an example:
<tree string="Task List" decoration-danger="state == 'overdue'" decoration-success="state == 'done'">
<field name="name"/>
<field name="state"/>
</tree>
In this example, records where the state is 'overdue' will be marked in red (using decoration-danger
), and records marked as 'done' will be colored green (using decoration-success
).
Odoo provides several built-in classes that you can use to add color to your records:
These decoration classes help to quickly convey the status of records based on their values.
While the default decoration classes provide a good starting point, you can also customize the colors by adding your own CSS. Here’s how you can do it:
<tree string="Task List" decoration-danger="state == 'overdue'">
<field name="name"/>
<field name="state"/>
</tree>
<style>
.o_data_row.decoration-danger {
background-color: #ffcccc !important;
}
</style>
This customization changes the background color of overdue tasks to a lighter shade of red using custom CSS. You can apply any color by adjusting the background-color
value.
Once you've added the necessary conditions and customized the colors, save the XML view and reload your Odoo application. The tree view will now reflect the color changes based on the field conditions you defined.
Here are some practical examples of how you can use colors in the tree view:
Want to explore more about Odoo customizations? Check out these helpful resources:
Adding color to tree view records in Odoo is a simple yet powerful way to enhance your interface. It allows users to quickly identify key records based on specific conditions, improving overall productivity and user experience. Whether you’re highlighting important tasks, overdue invoices, or completed orders, Odoo’s decoration feature gives you the flexibility to visually organize your data.
Start implementing this feature today and make your Odoo application more dynamic and user-friendly!
Your email address will not be published. Required fields are marked *