Styling Text in Odoo Tree View: Bold, Italic, and Color Customizations

Abid Patel
26-Oct-2024 Updated : 26-Oct-2024

Learn to apply bold, italic, and color styles to Odoo tree view fields using decoration-bf, decoration-it, and color attributes for better data visibility.

Styling Text in Odoo Tree View: Bold, Italic, and Color Customizations

In Odoo, enhancing tree view appearance helps users quickly identify critical information. With options to make text bold, italic, or even change colors, you can customize tree views to highlight essential data. Let’s explore how to use attributes like decoration-bf, decoration-it, and decoration-info in Odoo.

Making Text Bold in Tree View

To make text bold in a tree view, use the decoration-bf attribute. This attribute applies bold styling based on a condition. Here’s an example:

xml
<tree string="Sale Orders">
    <field name="name" decoration-bf="state == 'draft'" />
</tree>

In this example:

  • decoration-bf: Makes the text bold when the state field is set to draft. This helps visually emphasize draft records.

Making Text Italic in Tree View

To apply italic styling in a tree view, use the decoration-it attribute. It’s ideal for subtly differentiating certain records. Below is an example:

xml
<tree string="Sale Orders">
    <field name="name" decoration-it="state == 'cancel'" />
</tree>

Here, decoration-it is used to apply italic styling when state is cancel, making canceled records visually distinct.

Changing Text Color in Tree View

For coloring text, use attributes like decoration-info, decoration-danger, or decoration-warning. Here’s an example of how to change text color conditionally:

xml
<tree string="Sale Orders">
    <field name="name" decoration-info="state == 'sent'" />
    <field name="state" />
</tree>

In this case:

  • decoration-info: Applies an information color (typically blue) when state is sent.

Combining Multiple Decorations

You can apply multiple decorations to a single field, making the text bold, italic, and colored based on various conditions:

xml
<tree string="Sale Orders">
    <field name="name" decoration-bf="state == 'draft'" decoration-it="state == 'cancel'" decoration-danger="state == 'cancel'" />
</tree>

This example combines bold, italic, and color styling, making the record bold if it’s in draft and italic and red if canceled.

Conclusion

Using decoration-bf, decoration-it, and color options in Odoo tree views enhances data readability and makes important records easy to spot. By applying these styling attributes, you can tailor your interface to suit business needs and improve the user experience.

Make a Comment

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