Skip to Content
Menu

Progress Bar Widget

by
Odoo

10.31

v 17.0 Third Party
Availability
Odoo Online
Odoo.sh
On Premise
Lines of code 63
Technical Name progressbar_widget
LicenseLGPL-3
You bought this module and need support? Click here!
Availability
Odoo Online
Odoo.sh
On Premise
Lines of code 63
Technical Name progressbar_widget
LicenseLGPL-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.

Key Features
  • 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.
About this Module

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')
Screenshots

Form View:


Tree View:

Note

  1. 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

  • The author can leave a single reply to each comment.
  • This section is meant to ask simple questions or leave a rating. Every report of a problem experienced while using the module should be addressed to the author directly (refer to the following point).
  • If you want to start a discussion with the author or have a question related to your purchase, please use the support page.
There 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
by
Anthony Mukami
on 5/5/25, 5:20 AM Author