How to Change the Color of the Progress Bar in Odoo 16?

The user experience plays a vital role in the success of any application. Odoo, the popular open-source ERP and business management platform, offers a range of powerful features to improve usability. There are many widgets available in Odoo that may be utilized to improve your application’s usability and user experience. The progress bar is one of the widgets in Odoo. The progress bar widget can be helpful in a variety of situations where you need to graphically represent the progress or completion status of a task, process, or other object. It provides an instantaneous visual representation of the amount of progress made on certain task and visual progress tracking for project managers and team members. The progress bar widget’s overall goal is to improve the user experience by giving a visual depiction of progress or completion status. The application becomes more user-friendly and informative by enabling users to track and understand the status of activities, processes, or operations.

In Odoo, inside the tasks of the project module, we can see the progress bar. The progress bar’s width, along with the percentage, will rise as we start to enter the duration of time spent on each task. The progress bar in Odoo is by default, a bluish-green color. We can customize the progress bar’s color by using JavaScript and CSS. Through this blog, we will discuss how to change the color of the progress bar in Odoo 16.

Initially, we need to create a CSS file for creating different classes, and provide four different colors for each class as red, yellow, light green, and dark green.

CSS:

.o_progressbar .o_progress .o_progressbar_complete.o_progress_red {
 background-color: #FF0000;
 height: 100%;
}
.o_progressbar .o_progress .o_progressbar_complete.o_progress_yellow {
 background-color: #FFFF00;
 height: 100%;
}
.o_progressbar .o_progress .o_progressbar_complete.o_progress_light_green {
 background-color: #00FF00;
 height: 100%;
}
.o_progressbar .o_progress .o_progressbar_complete.o_progress_green {
 background-color: #008000;
 height: 100%;
}

After creating the CSS file, we need to provide the file into the __manifest__.py file.

'assets': {
   'web.assets_backend': [
       'prgress_bar/static/src/scss/progress_bar.css',
   ],
},

JS: To change the color of the progress bar, we can use the following code.

/** @odoo-module **/
import { ProgressBarField } from "@web/views/fields/progress_bar/progress_bar_field";
import { patch } from "@web/core/utils/patch";
const { onMounted, useEffect } = owl;
patch(ProgressBarField.prototype, 'prgress_bar_custom',{
   setup(v){
       var value = this.props.value;
       console.log(this)
       this._super(...arguments)
       useEffect(() => this._render_value());
   },
   _render_value: function (v) {
       var value = this.props.value;
       var max_value = this.state.maxValue;
       if (!isNaN(v)) {
           if (this.edit_max_value) {
               max_value = v;
           } else {
               value = v;
           }
       }
       value = value || 0;
       max_value = max_value || 0;
       var widthComplete;
       if (value <= max_value) {
           widthComplete = value/max_value * 100;
       } else {
           widthComplete = 100;
       }
       $('.o_progress').toggleClass('o_progress_overflow', value > max_value)
           .attr('aria-valuemin', '0')
           .attr('aria-valuemax', max_value)
           .attr('aria-valuenow', value);
           $('.o_progressbar_complete').toggleClass('o_progress_red', widthComplete > 0 && widthComplete <= 40).css('width', widthComplete + '%');
           $('.o_progressbar_complete').toggleClass('o_progress_yellow', widthComplete > 40 && widthComplete <= 70).css('width', widthComplete + '%');
           $('.o_progressbar_complete').toggleClass('o_progress_light_green', widthComplete > 70 && widthComplete <= 90).css('width', widthComplete + '%');
           $('.o_progressbar_complete').toggleClass('o_progress_green', widthComplete > 90 && widthComplete <= 100).css('width', widthComplete + '%');
   },
})

In Js, here we patch the ProgressBarField, and inside the patched method, it fetches the progress value and toggles the created css classes by checking the width of the progress bar.

If the width of the progress bar is between 0 to 40 percent, it toggles the class having red background color.

If the width of the progress bar is between 40 to 70 percent it toggles the class's yellow background color.

If the width of the progress bar is between 70 to 90 percent it toggles the class having light green background color.

If the width of the progress bar is above 90 percent, the progress bar has the green color.

After creating the JS file, we need add the file in the __manifest__.py

'assets': {
   'web.assets_backend': [
       'prgress_bar/static/src/scss/progress_bar.css',
       'prgress_bar/static/src/js/progress_bar.js',
   ],
},

Using this technique, we can change the color of the progress bar anywhere it appears in Odoo. By adjusting the value and width, we may customize the progress bar’s colors.

Have a look at the following blog to learn more about how to change the color on a progress bar in the Odoo 15. How to Change the Color on a Progress Bar in the Odoo 15