User experience plays a vital role in any business application, and visual indicators like progress bars are among the simplest yet most effective ways to represent ongoing tasks or goals. Whether it’s a project completion percentage, task status, or sales progress, a well-designed progress bar gives users a quick understanding of where things stand.
By default, Odoo 19 renders progress bars with standard styling. However, customizing their colours can make your interface more intuitive and visually engaging. For instance, you might want to display green for completed tasks, yellow for those in progress, and red for pending or delayed activities.
In this article, you’ll learn step-by-step how to change the colour of a progress bar in Odoo 19 using a combination of XML, JavaScript, and CSS.
Step 1: Update the XML File
Start by placing the progress bar field inside the required form view.
The example below adds a progress bar in a new tab or notebook given name as progressbar:
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<data>
<record id="view_partner_base_vat_form" model="ir.ui.view">
<field name="model">res.partner</field>
<field name="name">view.partner.base.vat.form</field>
<field name="inherit_id" ref="base.view_partner_form"/>
<field name="arch" type="xml">
<xpath expr="//page" position="after">
<page string="Progressbar" name="page_name">
<group>
<field name="progress" widget="progressbar"/>
</group>
</page>
</xpath>
</field>
</record>
</data>
</odoo>
Step 2: Extend the Progress Bar JavaScript
Next, improve the existing progress bar widget by adding custom behavior that updates its color based on the progress value. To achieve this, you’ll need to create or update a JavaScript file (progress_bar.js) that handles this logic.
Here is the JavaScript code:
/** @odoo-module **/
Import {progressBarField} from "@web/views/fields/progress_bar/progress_bar_field";
import { patch } from "@web/core/utils/patch";
patch(ProgressBarField.prototype, {
setup() {
super.setup(...arguments);
},
get progressBarColorClass() {
const widthComplete = this.currentValue;
if (widthComplete > 0 && widthComplete <= 40) {
return "o_progress_red";
} else if (widthComplete > 40 && widthComplete <= 70) {
return "o_progress_yellow";
} else if (widthComplete > 70 && widthComplete <= 90) {
return "o_progress_light_green";
} else if (widthComplete > 90 && widthComplete <= 100) {
return "o_progress_green";
}
return "bg-primary";
}
});
Here, the widget is patched so the color class depends on the current percentage value. Odoo automatically applies the returned class to the progress bar element.
Step 3: Adding Custom CSS Classes
To visually distinguish the different progress levels, you need to create your own set of CSS classes. These styles will be applied to the progress bar based on the class name returned by the progressBarColorClass method in your JavaScript code.
Add or modify the progress_bar.css file with the following custom rules
.o_progress_red {
background-color: red !important;
}
.o_progress_yellow {
background-color: yellow !important;
}
.o_progress_light_green {
background-color: lightgreen !important;
}
.o_progress_green {
background-color: green !important;
}These style rules override Odoo's default progress bar background and make the color transitions noticeable to the user.. The !important directive ensures that these styles override any default ones.
Step 4: Load the CSS and JS Files
Finally, inform Odoo to load your custom assets by adding them to the backend bundle in your __manifest__.py:
Here is an example of how to update the __manifest__.py file:
{
'name': 'ProgressBar',
'version': '19.0.1.0.0',
'category': 'Category',
'summary': 'Summary',
'description': 'Description',
'depends': ['base'],
'data': [
'views/res_partner.xml',
],
'assets': {
'web.assets_backend': [
'progressbar/static/src/js/progress_bar.js',
'progressbar/static/src/css/progress_bar.css',
],
},
'installable': True,
'application': False,
}The data section in the manifest links to your XML file, while the assets section registers the JavaScript and CSS files so they are automatically included when the Odoo backend loads.
Working of the JavaScript Logic
The core of this customization is handled by the JavaScript logic, especially the progressBarColorClass function.Here's an overview of how the logic functions:
For values greater than 0 and up to 40, the method assigns the CSS class o_progress_red, turning the progress bar red.
For values greater than 40 and up to 70, the method applies the CSS class o_progress_yellow, which changes the progress bar to yellow.
For values greater than 70 but does not exceed 90, the method assigns the CSS class o_progress_light_green, coloring the progress bar light green.
For values greater than 90 and up to 100, the method applies the CSS class o_progress_green, which changes the progress bar to green.
If the value does not fall within any of the defined ranges, the method assigns the bg-primary class, which applies the default Bootstrap primary color.
Once the JavaScript logic and custom styles are in place, Odoo automatically applies your color rules each time the progress bar is rendered or updated. As the value changes, the bar instantly switches to the appropriate color, giving users a clear visual indication of progress. With this enhancement, the progress bar becomes more than just a numeric indicator it becomes an intuitive UI element that highlights completion status at a glance. This not only improves the overall look of the interface but also helps users navigate and interpret information more efficiently.
To read more about How to Change the Color of a Progress Bar in Odoo 18, refer to our blog How to Change the Color of a Progress Bar in Odoo 18.