Overview of List View Decoration Attributes in Odoo 18

The list view, sometimes referred to as the list view in Odoo, is a graphical user interface element that shows several records in a list format, with each row denoting a record from a database table.

The list view is one of the primary user interface views used to display multiple records in a tabular format. It is commonly seen when you open menus like Sales Orders, Customers, or Invoices, where each row represents a record and columns show key fields.

List View improves the user's ability to engage with and analyse the data displayed in the list by allowing users to execute a variety of actions, including sorting, filtering, and grouping, in addition to providing a visual representation of the data.

By using decorative attributes in Odoo, we can improve the visual representation of each record in a list view, making it possible to effectively differentiate and identify records according to particular criteria, such as factors or conditions.

In Odoo, decorations are applied to a list view depending on a particular field value using the <list> element with the decoration-type property. You can provide a condition under which the decoration shall be applied using the decoration-type attribute.

Syntax: 

<list decoration-type="field=='value'">

The allowed decorating characteristics and the properties that go with them are shown below and can be used in the list view.

Let's examine how the user interface incorporates these. The list view of the "Sales" module is displayed in the figure below, where we can observe that each sale order's state is indicated by a different colour.

Purchase Order List View

Let's look at a real-time example. Based on a few criteria, we'll alter the color of the Sale Order's "Total" field in the list view.

* If the total amount is between 0 and 500, the amount will appear in red.

* If it is between 500 and 1000, it will appear in orange.

* If it is between 1000 and 2000, it will appear in blue.

* If the total is greater than 2000, it will appear in green.

Let's see how this can be implemented. For that, we need to inherit the Sale Order list view and apply conditional formatting using decoration attributes.

<record id="sale_order_tree" model="ir.ui.view">
   <field name="name">sale.order.view.tree.inherit</field>
   <field name="model">sale.order</field>
   <field name="inherit_id" ref="sale.sale_order_tree"/>
   <field name="arch" type="xml">
       <xpath expr="//field[@name='amount_total']" position="replace">
           <field name="amount_total"
                  sum="Total Tax Included"
                  widget="monetary"
                  decoration-danger="amount_total &gt;0 and amount_total &lt; 500.00"
                  decoration-warning="amount_total &gt; 501.00 and amount_total &lt; 1000.00"
                  decoration-info="amount_total &gt; 1001.00 and amount_total &lt; 2000.00"
                  decoration-success="amount_total &gt; 2001.00"
                  optional="show"/>
       </xpath>
   </field>
</record>

The result of the above code can be shown as,

Through the use of distinct decorations for records with different "Total Amount" values, this XML specification improves the visual representation of the "sale. order" list view, allowing users to rapidly identify and classify records based on these visual cues.

In order to improve the visual presentation and make it simpler for users to identify and understand information in an Odoo module, we may use decoration attributes in the XML definition of the list view to dynamically change the style of a row's text based on the relevant attribute value.

To read more about List (Tree) View Decoration Attributes in Odoo 18, refer to our blog List (Tree) View Decoration Attributes in Odoo 18.