+
+
+
+
+
+ 
+
+
+
+
+
+
+ Enterprise
+
+
+ Community
+
+
+ Odoo sh
+
+
+
+
+
+
+
+ 
+
+ + Progress Bar Widget +
+New progress bar + widget for Odoo 16
+ +
+
+
+
+ 
+
+
+ Explore This + Module
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ Overview +
+
+
+
+
+
+
+ This module creates a new widget for the progressbar.
+ Users can use widget="progress_bar_widget" for applying this widget. Also, able to adjust the value in
+ progress bar.It works with the float fields.
+
+
+
+
+
+ 
+
+
+ Features +
+
+
+
+
+
+
+
+
+ 
+ Widget for the progressbar.
+
+
+ Widget for the progressbar.
+
+
+ Use
+ widget="progress_bar_widget" for applying widget for float field
+
+
+ Use
+ widget="progress_bar_widget" for applying widget for float field
+
+
+
+
+ Adjustable progress bar.
+
+
+ Adjustable progress bar.
+
+
+
+ 
+
+
+ Screenshots +
+
+
+
+
+
+
+
+
+ 
+
+
+ Add widget="progress_bar_widget" code into a field.
+
+
+ 
+
+ New Progressbar view.
+
+
+
+
+ 
+
+
+ + Related + Products +
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ 
+
+
+ Our Services +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Odoo + Customization
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+
+
+ 
+
+
+ + Odoo + Support
+
+
+
+
+ 
+
+
+ + Hire + Odoo + Developer
+
+
+
+
+ 
+
+
+ + Odoo + Integration
+
+
+
+
+
+ 
+
+
+ + Odoo + Migration
+
+
+
+
+ 
+
+
+ + Odoo + Consultancy
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+ 
+
+
+ + Odoo + Licensing Consultancy
+
+
+
+
+ 
+
+
+ Our + Industries +
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Trading +
++ Easily procure + and + sell your products
+
+
+
+
+ 
+
+
+ + POS +
++ Easy + configuration + and convivial experience
+
+
+
+
+ 
+
+
+ + Education +
++ A platform for + educational management
+
+
+
+
+ 
+
+
+ + Manufacturing +
++ Plan, track and + schedule your operations
+
+
+
+
+ 
+
+
+ + E-commerce & Website +
++ Mobile + friendly, + awe-inspiring product pages
+
+
+
+
+ 
+
+
+ + Service Management +
++ Keep track of + services and invoice
+
+
+
+
+ 
+
+
+ + Restaurant +
++ Run your bar or + restaurant methodically
+
+
+
+ 
+
+
+ + Hotel Management +
++ An + all-inclusive + hotel management application
+
+
+
+ 
+
+
+ Support +
+
+
+
\ No newline at end of file
diff --git a/progress_bar_widget/static/src/css/progress_bar_widget.css b/progress_bar_widget/static/src/css/progress_bar_widget.css
new file mode 100644
index 000000000..fd75bee59
--- /dev/null
+++ b/progress_bar_widget/static/src/css/progress_bar_widget.css
@@ -0,0 +1,14 @@
+.progress_bar .pro-bar {
+ background: hsl(0, 0%, 97%);
+ box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.1) inset;
+ height: 4px;
+ width: 200px;
+ margin-bottom: 15px;
+ margin-top: 10px;
+ position: relative;
+}
+.progress_bar .progress_number {
+ float: right;
+ margin-top: 2px;
+ margin-right: 74px;
+}
\ No newline at end of file
diff --git a/progress_bar_widget/static/src/js/progress_bar_widget.js b/progress_bar_widget/static/src/js/progress_bar_widget.js
new file mode 100644
index 000000000..a37925921
--- /dev/null
+++ b/progress_bar_widget/static/src/js/progress_bar_widget.js
@@ -0,0 +1,62 @@
+/** @odoo-module **/
+import { FloatField } from '@web/views/fields/float/float_field';
+import { registry } from "@web/core/registry";
+const { onRendered, useRef, onMounted } = owl;
+import { useService } from "@web/core/utils/hooks";
+import { _lt } from "@web/core/l10n/translation";
+import { xml, Component, useState } from "@odoo/owl";
+import AbstractField from 'web.AbstractField';
+import fieldRegistry from 'web.field_registry';
+/** Extends FloatField to create ProgressBarWidget to create a widget for float fields **/
+export class ProgressBarWidget extends FloatField {
+ setup() {
+ super.setup();
+ this.state = useState({
+ range: this.props.value || '',
+ });
+ this.orm = useService("orm");
+ const Pro_Ref = useRef("Progress-Ref");
+ onMounted(() => {
+ this.ref = Pro_Ref.el
+ this.UpdateBar()
+ });
+ }
+ /** Updates the percentage based on value in bar **/
+ UpdateBar() {
+ var value = this.state.range;
+ var max_value = 100;
+ value = value || 0;
+ var widthComplete;
+ if (value <= max_value) {
+ widthComplete = parseInt(value/max_value * 100);
+ }else{
+ widthComplete = 100;
+ }
+ $(this.ref.querySelector('.progress_number')).text(widthComplete.toString() + '%');
+ }
+ /** Change function of progress **/
+ async _onChangeRange(value){
+ var field = this.props.name
+ console.log("this.props.name", this.props.name)
+ this.props.value = value
+ this.state.range = value
+ this.UpdateBar()
+ await this.orm.write(this.env.model.root.resModel, [this.env.model.root.data.id], {
+ [field]: this.state.range,
+ })
+ }
+}
+ProgressBarWidget.supportedTypes = ["float"];
+ProgressBarWidget.template = xml
+`
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+
`
+registry.category("fields").add("progress_bar_widget", ProgressBarWidget);