Skip to Content
เมนู
คุณต้องลงทะเบียนเพื่อโต้ตอบกับคอมมูนิตี้
คำถามนี้ถูกตั้งค่าสถานะ
5 ตอบกลับ
21004 มุมมอง

Could someone tell me how to change the color on a progress bar. I would like it to change dynamically depending on the percentage in the progressbar. The specific progressbar I'm wanting to change is on the Tasks Form View under Projects The existing code looks like this:

                 .......
                 <field name="date_end" groups="base.group_no_one"/>
                <field name="progress" widget="progressbar"  invisible="context.get('set_visible',False)"/>
            </tree>
        </field>
    </record>
อวตาร
ละทิ้ง
คำตอบที่ดีที่สุด

I am having same issue for the Progressbar and finally I found the sollution using inheriting the javascript Code for the progressbar widget and got the desired output as per I want.


 

อวตาร
ละทิ้ง

You changed the colour in tree view or form view?

In tree view

คำตอบที่ดีที่สุด

You can inherit progressbar in progress_bar.js

add this code to set different colors in formview

do add css

.o_progressbar .o_progress .o_progressbar_complete.o_progress_gt_fty {
background-color: #456325;
height: 100%;
}
.o_progressbar .o_progress .o_progressbar_complete.o_progress_lt_fty {
background-color: #000000;
height: 100%;
}
ProgressBar.include({

_render_value: function(v) {
var value = this.value;
var max_value = this.max_value;
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 = max_value/value * 100;
}
this.$('.o_progress').toggleClass('o_progress_overflow', value > max_value);
this.$('.o_progressbar_complete').toggleClass('o_progress_gt_fty', widthComplete > 70).css('width', widthComplete + '%');
this.$('.o_progressbar_complete').toggleClass('o_progress_lt_fty', widthComplete <= 70).css('width', widthComplete + '%');

if(this.readonly) {
if(max_value !== 100) {
this.$('.o_progressbar_value').html(utils.human_number(value) + " / " + utils.human_number(max_value));
} else {
this.$('.o_progressbar_value').html(utils.human_number(value) + "%");
}
} else if(isNaN(v)) {
this.$('.o_progressbar_value').val(this.edit_max_value ? max_value : value);
}
}
});
     
อวตาร
ละทิ้ง
คำตอบที่ดีที่สุด

Probably the best way is to cusomise the css to show different colours. You can override the css by adding a static/css/mycss.css file, and include in your __openerp__.py.

If that doesnt work you will have to create your own widget by inheriting from the progressbar widget - but that requires a bit of developement and javascript knowledge.

Give a shout if you need help

อวตาร
ละทิ้ง

Hello Timothy, Which class do we need to change color for progress bar. Do we need to create our ownclass inside css? can send me steps for it.

คำตอบที่ดีที่สุด

Hi , 

Refer the blog:

https://www.cybrosys.com/blog/how-to-change-the-color-on-a-progress-bar-in-the-odoo-15

This blog post provides a step-by-step guide on how to change the color of a progress bar widget in Odoo

อวตาร
ละทิ้ง
คำตอบที่ดีที่สุด

you can do it just with css and xml without using javascript :)

อวตาร
ละทิ้ง
Related Posts ตอบกลับ มุมมอง กิจกรรม
6
ม.ค. 19
9414
3
เม.ย. 17
10450
1
มี.ค. 15
4895
Change default colour themes แก้ไขแล้ว
2
เม.ย. 25
9220
Unable to change button color แก้ไขแล้ว
2
ม.ค. 25
2976