Availability |
Odoo Online
Odoo.sh
On Premise
|
Lines of code | 63 |
Technical Name |
progressbar_widget |
License | LGPL-3 |
Progressbar Widget for Odoo Views
This module adds a customizable progress bar widget for integer or float fields in Odoo views, allowing you to visually represent progress toward a defined goal.
- Add a dynamic progress bar to Odoo views based on any numeric field.
- Customizable maximum value via a separate Integer field.
- Displays percentage and next to a nice progress bar.
- Built with OWL for optimum frontend perfomance.
Description:
This addon adds a progress bar widget to Odoo.
This module provides a user-friendly progress bar widget for your Odoo views. Visually represent the progress of a numeric field (e.g. stage indicator) using an intuitive progress bar to your Odoo users.
The widget is especially useful for workflows where a numeric value reflects the progress of a multi-stage processâsuch as shipment tracking, approvals, or order fulfillment.
But there really is NO LIMITS! You can apply this widget on any model you like!
Example usage:
from odoo import models, fields, api
class MyModel(models.Model):
_name/_inherit = 'my.model'
status = fields.Selection([
("draft", "Draft"),
("confirmed", "Confirmed"),
("done", "Done"),
])
progress_stage = fields.Integer(compute="_compute_progress_stage")
max_progress = fields.Integer('Total Steps Field') # SEE MORE ABOUT THIS FIELD IN THE INSTALL SECTION BELOW
@api.depends('status')
def _compute_progress_stage(self):
stage_map = {
"draft": 1,
"confirmed": 2,
"done": 3,
}
for record in self:
record.progress_stage = stage_map.get(record.status, 0)
Then add the field representing the current stage in your views like this:
<field name="progress_stage" widget="progressbar_widget"/>
Installation:
Be sure to have these two fields in the model where you want to use the widget:
- Progress Field: This field (integer or float) represents the current progress.
- Total Steps Field: This MUST be an integer field and define the total steps in the process.
Default field name:max_progress
Or change this line in the module Javascript file:
const max = this.props.record?.data?.max_progress;
To match your custom field name at the end, like so:
const max = this.props.record?.data?.your_field;
Example:
class MyModel(models.Model):
_name/_inherit = 'your.model'
your_field/max_progress = fields.Integer('Total Steps Field')
Form View:

Tree View:

- Requires basic Odoo knowledge
This widget is intended for developers or integrators familiar with customizing Odoo views.
However if you name your total steps field as 'max_progress' then all you need is to do is add your current progress field in your view and assign the widget.
If you decide to name it something else then you will need to access the modules Javascript directory and make the necessary adjustments. This would require you to have basic knowledge of Odoo's module structure.
Please log in to comment on this module
Report comment
Any abuse of this reporting system will be penalizedThere are no ratings yet!
I dont know why the images are not showing but here are the links Form view>> https://drive.google.com/file/d/14MKTOwgtPV3GBq1zfrNK-Uby7JTXzhcZ/view?usp=sharing Tree view >> https://drive.google.com/file/d/1XWFlW4XWtDf6OiC7oK_WEdHD15866CqD/view?usp=sharing