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.
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
| Attribute | Required | Type | Description |
|---|---|---|---|
| field_value | Yes | Field 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. |
| colors | Yes | JSON object literal | Maps each field value to a Bootstrap colour name. Valid colours: muted, success, warning, danger. Values not listed in colors default to muted. |
| sum_field | No | Field 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
| Color value | Visual appearance | Typical use case |
|---|---|---|
| success | Green | Completed, won, approved, done |
| warning | Orange / amber | In progress, pending, needs attention |
| danger | Red | Blocked, overdue, rejected, failed |
| muted | Grey (default) | Draft, new, unclassified, not started |
Basic Example — Kanban View with Progress Bar
<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.
<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.
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`:
<!-- 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
<!-- 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
| Symptom | Likely cause | Fix |
|---|---|---|
| Progress bar does not appear at all | Kanban 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 colour | The field values in the database don't match the keys in the colors attribute | Check 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 appear | The sum_field is not declared as a <field> inside the <kanban> element | Add <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/upgrade | Invalid JSON in the colors attribute — single quotes used instead of double quotes inside the JSON value | The 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 counts | The field referenced by field_value is not declared inside <kanban> and Odoo isn't fetching its values | Add <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
| Odoo version | Key changes affecting the Kanban progressbar |
|---|---|
| Odoo 15 | No breaking changes to <progressbar>. field_value, colors, and sum_field attributes unchanged. Behaviour identical to Odoo 13/14. |
| Odoo 16 | Kanban 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 17 | Full 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 & 19 | No 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.
Frequently Asked Questions
How do I add a progress bar to an Odoo Kanban view?
Why does the Kanban progress bar not show up?
What are the valid color values for the Odoo Kanban progressbar?
Can I show a monetary total in the Kanban progress bar?
Does the progressbar work with a Many2one field instead of a Selection field?
How do I add a progressbar to an existing standard Odoo Kanban view?

iWesabe Editorial Team
Practitioner insights on Odoo ERP, ZATCA compliance, and Saudi enterprise digital operations — written by iWesabe's consulting, finance, and engineering teams.
Related Articles
How to Show an Image in QWeb Odoo — Web, Reports & Portal (Odoo 16–19)
A complete developer reference for rendering images in Odoo QWeb templates: the /web/image controller, t-att-src patterns, t-field widget='image', PDF report images, and common troubleshooting. Verified for Odoo 18 & 19.
How to Add Colors to List View Rows and Cells in Odoo
Use decoration-* attributes to colour-code rows and individual cells in Odoo list views based on field values — with expression syntax, all decoration types, and a migration note for the tree → list rename. Verified for Odoo 18 & 19.
Context and Domain in Odoo — Developer Reference (Odoo 16–19)
A practical guide to Odoo domains (record filtering) and context (key–value state passing) — how they work, where they appear, and the syntax rules for Odoo 16 through 19. Verified for Odoo 18 & 19.
Explore Related Solutions
CRM & Customer Relationship Management
Turn every lead into a closed deal. Odoo CRM gives your sales team a structured Kanban pipeline, automated follow-up sequences, and a 360° customer view — all connected natively to Accounting, Inventory, and Email Marketing.
ExploreFinancial Management
Automate your Saudi Arabia accounting — ZATCA Phase 2 e-invoicing, VAT returns, Zakat provisioning, multi-currency bank reconciliation, and real-time financial reporting — all inside one connected Odoo platform. Fully localised for KSA and the GCC by iWesabe.
ExploreSupply Chain Management
From purchase order to final delivery — Odoo Supply Chain connects procurement, multi-warehouse inventory, demand forecasting, and vendor management into one real-time platform. Purpose-configured for Saudi Arabia and the GCC by iWesabe.
ExploreManufacturing Management ERP
Run lean, traceable production with Odoo Manufacturing — work orders, Bills of Materials, quality control, and real-time OEE dashboards built for KSA factory floors.
Explore