Odoo Development

How to Show a Progress Bar in Odoo Kanban View (Odoo 16–19)

A complete developer reference for the Odoo Kanban <progressbar> element: field_value, colors, sum_field attributes, selection field setup, and troubleshooting. Verified for Odoo 18 & 19.

iWesabe Editorial TeamAugust 6, 20208 min read

The Odoo Kanban view supports a built-in `` element that displays a colour-coded bar at the top of each Kanban column, showing the distribution of records across the values of a selection field. This gives users an at-a-glance status summary without opening individual records — for example, showing how many deals in a sales pipeline are 'Won', 'In Progress', or 'Blocked'. The progressbar is declared directly in the view XML with three attributes: the field to segment by, the colour mapping, and an optional numeric field for column totals.

The <progressbar> Element — Attribute Reference

Odoo Kanban <progressbar> attributes — Odoo 16–19
AttributeRequiredTypeDescription
field_valueYesField name (string)The selection or many2one field whose values determine the bar segments. Must be a field on the model, declared in the <fields> list inside the kanban view.
colorsYesJSON object literalMaps each field value to a Bootstrap colour name. Valid colours: muted, success, warning, danger. Values not listed in colors default to muted.
sum_fieldNoField name (string)An optional numeric field (Integer, Float, Monetary). When set, Odoo shows the sum of this field's values for the records in each colour segment, displayed beside the bar.

Valid Color Values

progressbar color values and their visual meaning
Color valueVisual appearanceTypical use case
successGreenCompleted, won, approved, done
warningOrange / amberIn progress, pending, needs attention
dangerRedBlocked, overdue, rejected, failed
mutedGrey (default)Draft, new, unclassified, not started

Basic Example — Kanban View with Progress Bar

xml
<record id="view_my_model_kanban" model="ir.ui.view">
    <field name="name">my.model.kanban</field>
    <field name="model">my.model</field>
    <field name="arch" type="xml">
        <kanban>

            <!-- Step 1: Declare the fields the kanban needs -->
            <field name="name"/>
            <field name="state"/>
            <field name="priority"/>

            <!-- Step 2: Add the progressbar element.
                 Place it as a direct child of <kanban>, before <templates>. -->
            <progressbar
                field_value="state"
                colors='{"draft": "muted", "in_progress": "warning", "done": "success", "blocked": "danger"}'
            />

            <!-- Step 3: Kanban card template -->
            <templates>
                <t t-name="kanban-box">
                    <div class="oe_kanban_global_click">
                        <div class="oe_kanban_details">
                            <strong class="o_kanban_record_title">
                                <field name="name"/>
                            </strong>
                        </div>
                    </div>
                </t>
            </templates>

        </kanban>
    </field>
</record>

Adding sum_field — Show Monetary Totals Per Colour Segment

The `sum_field` attribute adds numeric totals to the progressbar display. This is commonly used in CRM and sales pipelines to show expected revenue per stage segment (e.g. the total value of won vs. in-progress deals). The field referenced by `sum_field` must be a numeric field (Integer, Float, or Monetary) and must be declared in the Kanban view's `` list.

xml
<kanban>
    <field name="name"/>
    <field name="state"/>
    <field name="expected_revenue"/>  <!-- must be declared here -->

    <progressbar
        field_value="state"
        colors='{"new": "muted", "in_progress": "warning", "won": "success", "lost": "danger"}'
        sum_field="expected_revenue"
    />

    <templates>
        <t t-name="kanban-box">
            <div class="oe_kanban_global_click">
                <strong><field name="name"/></strong>
                <div class="oe_kanban_bottom_right">
                    <field name="expected_revenue" widget="monetary"/>
                </div>
            </div>
        </t>
    </templates>
</kanban>

Python Model — Setting Up the State Field

The `field_value` in the progressbar must reference a field that exists on the model. A `fields.Selection` field is the most common choice — its values map directly to the `colors` dictionary keys. The field does not have to be named `state`; any selection field works.

python
from odoo import models, fields

class MyModel(models.Model):
    _name = 'my.model'
    _description = 'My Model'

    name = fields.Char(string='Name', required=True)

    # Selection field — values must match the keys in the progressbar colors attribute
    state = fields.Selection(
        selection=[
            ('draft', 'Draft'),
            ('in_progress', 'In Progress'),
            ('done', 'Done'),
            ('blocked', 'Blocked'),
        ],
        string='Status',
        default='draft',
    )

    # Optional: numeric field for sum_field
    expected_revenue = fields.Monetary(
        string='Expected Revenue',
        currency_field='currency_id',
    )
    currency_id = fields.Many2one(
        'res.currency',
        default=lambda self: self.env.company.currency_id,
    )

The Progressbar Only Appears When Records Are Grouped

The `` element only renders when the Kanban view has an active `group_by`. Without a grouping, records appear in a single ungrouped list and the progressbar has no column to attach to. Typically Kanban views are grouped by a `stage_id` Many2one or by a selection field. You can set a default grouping in the view's action using `context`:

xml
<!-- ir.actions.act_window — set default grouping so the progressbar appears -->
<record id="action_my_model_kanban" model="ir.actions.act_window">
    <field name="name">My Model</field>
    <field name="res_model">my.model</field>
    <field name="view_mode">kanban,list,form</field>
    <!-- group_by stage_id so the Kanban columns + progressbar are visible by default -->
    <field name="context">{"default_stage_id": 1, "search_default_group_by_stage_id": 1}</field>
</record>

<!-- Or group by the state selection field directly: -->
<field name="context">{"search_default_group_by_state": 1}</field>

Adding a Progress Bar to an Existing Kanban View via Inheritance

xml
<!-- Inherit an existing kanban view and add a progressbar -->
<record id="view_sale_order_kanban_inherit_progressbar" model="ir.ui.view">
    <field name="name">sale.order.kanban.progressbar</field>
    <field name="model">sale.order</field>
    <field name="inherit_id" ref="sale.view_sale_order_kanban"/>
    <field name="arch" type="xml">

        <!-- Insert the progressbar before the <templates> element -->
        <xpath expr="//kanban/templates" position="before">
            <progressbar
                field_value="state"
                colors='{"draft": "muted", "sent": "warning", "sale": "success", "cancel": "danger"}'
                sum_field="amount_total"
            />
        </xpath>

        <!-- Ensure the fields needed by progressbar are declared -->
        <xpath expr="//kanban/field[@name='name']" position="after">
            <field name="amount_total"/>
        </xpath>

    </field>
</record>

Troubleshooting

Common Kanban progressbar problems and fixes
SymptomLikely causeFix
Progress bar does not appear at allKanban view is not grouped. The progressbar only renders when records are grouped into columns.Add a default group_by to the action context: {"search_default_group_by_stage_id": 1}. Without grouping, there are no columns and no bar to render.
All segments appear grey (muted) — no colourThe field values in the database don't match the keys in the colors attributeCheck that colors keys exactly match the stored selection values (not the display labels). E.g. {'in_progress': 'warning'} not {'In Progress': 'warning'}.
sum_field shows 0 or doesn't appearThe sum_field is not declared as a <field> inside the <kanban> elementAdd <field name="your_numeric_field"/> inside the <kanban> element (before <templates>). The field must be listed there even if it's already used in the card template.
XML validation error on module install/upgradeInvalid JSON in the colors attribute — single quotes used instead of double quotes inside the JSON valueThe colors attribute value must be valid JSON. Use double quotes for keys and values: colors='{"draft": "muted"}'. The outer attribute delimiters use single quotes.
Progress bar segments don't match actual record countsThe field referenced by field_value is not declared inside <kanban> and Odoo isn't fetching its valuesAdd <field name="state"/> (or whatever field_value references) inside the <kanban> element. Without this declaration, the ORM doesn't load the field value for Kanban records.

Version Notes

Kanban progressbar changes by Odoo version
Odoo versionKey changes affecting the Kanban progressbar
Odoo 15No breaking changes to <progressbar>. field_value, colors, and sum_field attributes unchanged. Behaviour identical to Odoo 13/14.
Odoo 16Kanban view JavaScript was partially refactored (OWL component migration). The <progressbar> XML element and attributes are unchanged — existing XML definitions continue to work without modification.
Odoo 17Full OWL migration of the Kanban view. <progressbar> element and attributes remain the same — no changes to XML syntax required. The progressbar rendering logic moved from legacy widgets to OWL components internally, but the developer-facing XML API is unchanged.
Odoo 18 & 19No breaking changes. <progressbar> field_value, colors, and sum_field behave as documented. Kanban view performance improvements in Odoo 18 reduce load time for large grouped datasets.

Need Custom Kanban Views or Pipeline Dashboards for Your Odoo System?

Our certified Odoo developers build custom Kanban views, CRM pipeline configurations, and visual workflow dashboards tailored to Saudi business processes — including Arabic RTL layouts and bilingual stage names.

WhatsApp

Frequently Asked Questions

How do I add a progress bar to an Odoo Kanban view?
Add a `` element as a direct child of the `` element, before ``. Set three attributes: `field_value` (the selection field to segment by), `colors` (a JSON object mapping selection values to colour names), and optionally `sum_field` (a numeric field to sum per colour segment). Also declare the `field_value` field in the kanban's `` list so the ORM loads it. Example: ``.
Why does the Kanban progress bar not show up?
The most common reason is that the Kanban view is not grouped. The `` element only renders when records are grouped into columns (typically by stage_id or a selection field). If you see records in a single flat list, the bar has no column to display on. Fix: add a default `group_by` to the window action's context — e.g. `{"search_default_group_by_stage_id": 1}`. Also confirm the field referenced by `field_value` is declared as a `` inside ``.
What are the valid color values for the Odoo Kanban progressbar?
There are four valid colour values: `success` (green — for completed or won states), `warning` (orange/amber — for in-progress or pending states), `danger` (red — for blocked, overdue, or failed states), and `muted` (grey — the default for draft, new, or unclassified states). Any selection value not listed in the `colors` attribute defaults to `muted`. These map directly to Bootstrap contextual colour classes used in Odoo's frontend.
Can I show a monetary total in the Kanban progress bar?
Yes — use the `sum_field` attribute. Set it to a numeric field name (Integer, Float, or Monetary) and Odoo will display the sum of that field's values for the records in each colour segment, shown beside the progressbar. The field must be declared in the kanban's `` list. Example: ``. Make sure `amount_total` is also declared as `` inside ``.
Does the progressbar work with a Many2one field instead of a Selection field?
Technically yes — `field_value` can reference a Many2one field and Odoo will attempt to segment by the related record IDs. However, the `colors` attribute maps to specific stored values (integer IDs for Many2one), which makes static colour mapping fragile because IDs differ between databases. The recommended pattern is to use a `fields.Selection` field for `field_value` so that colour mappings are stable string values independent of database state.
How do I add a progressbar to an existing standard Odoo Kanban view?
Use view inheritance. Create a new `ir.ui.view` record with `inherit_id` pointing to the original view and use an XPath to insert the `` element before ``: ``. Also add an XPath to declare any fields the progressbar needs if they're not already in the view. This approach is upgrade-safe — your custom progressbar is added on top of the standard view without touching the base module.
iWesabe Editorial Team

iWesabe Editorial Team

Practitioner insights on Odoo ERP, ZATCA compliance, and Saudi enterprise digital operations — written by iWesabe's consulting, finance, and engineering teams.

About iWesabe

Related Articles