how to customize color in Odoo tree view using decoration class

Abid Patel
27-Sep-2024 Updated : 27-Sep-2024

Learn how to customize color in Odoo tree view using decoration classes. Improve your Odoo UI with record color customization for better visual organization.

how to customize color in Odoo tree view using decoration class

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.

Why Use Colors in Tree View?

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.

Steps to Add Color to Tree View in Odoo

Follow these steps to add colors to tree view records in Odoo based on specific conditions:

Step 1: Define a Condition in XML View

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:

xml

<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).

Step 2: Available Decoration Classes

Odoo provides several built-in classes that you can use to add color to your records:

  • ▹ decoration-danger: Red color for urgent or overdue records
  • ▹ decoration-success: Green color for successful or completed tasks
  • ▹ decoration-warning: Yellow color for warning statuses
  • ▹ decoration-info: Blue color for informative data

These decoration classes help to quickly convey the status of records based on their values.

Step 3: Customizing Colors

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:

xml

<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.

Step 4: Implementing the Changes

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.

Examples of Use Cases

Here are some practical examples of how you can use colors in the tree view:

  • ▹ Highlight overdue invoices in red to prioritize them.
  • ▹ Mark tasks that are nearing deadlines in yellow to catch attention.
  • ▹ Indicate completed tasks or orders with a green background for clarity.

Further Reading and Resources

Want to explore more about Odoo customizations? Check out these helpful resources:

Conclusion

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!

Make a Comment

Your email address will not be published. Required fields are marked *