Meet Odoo 16 to Modify the Color of the Progress Bar

User experience is a crucial factor in the success of any application, and Odoo, the popular open-source ERP and business management platform, recognizes this importance. To enhance usability and user experience, Odoo offers a wide range of powerful features. Including various widgets that can be utilized effectively. One such widget is the progress bar, which proves to be valuable in numerous scenarios where the graphical representation of progress or completion status is needed.

Progress Bar Widget in Odoo

The progress bar widget in Odoo serves as a visual indicator of the progress made on a task, process, or any other object. It gives a graphical representation of progress, helping project managers and team members track it quickly. By incorporating the progress bar widget, Odoo aims to improve the overall user experience by offering a visual depiction of progress or completion status.

By utilizing the progress bar widget, applications built on Odoo become more user-friendly and informative. Users are empowered to easily track and comprehend the status of various activities, processes, or operations within the application. This visual representation fosters a greater sense of control and understanding, as users can quickly gauge the progress made and assess the remaining work.

With the progress bar widget, users can easily identify completed tasks, track ongoing processes, and anticipate the time or effort required to finish pending activities. This not only enhances the user experience but also promotes efficiency and productivity within the application.

Odoo emphasizes widgets like the progress bar to ensure a comprehensive user experience. By leveraging these widgets effectively, developers and administrators can design applications that are not only feature-rich but also visually engaging and user-centric, ultimately leading to a superior user experience and higher user satisfaction.

1. Create a CSS file to define the different classes and colors for the progress bar. Let’s name it custom.css.
2. Open the custom.css file and define the CSS classes and their corresponding colors. For example:

.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 + '%');
   },
})

After creating the JS file, we need to 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.

DOWNLOAD ERP