Odoo Help


field color depending on value...

Fatih Piristine
on 12/3/17, 5:12 AM 969 views

I needed something like monetary field to show unit of value.  1kg 0.3IU etc. so far ok. this is done.

when I tried to add colors into foreground. I loose state and can't push color attributes in to field.

i only have style= but nothing else. code is below, any advice appreciated. thanks.


(function() {

var instance = openerp;
var _t = instance.web._t;

instance.web.form.FieldNutrient = instance.web.form.FieldFloat.extend({
template: "FieldNutrient",
widget_class: 'oe_form_field_float oe_form_field_nutrient',
init: function() {
this._super.apply(this, arguments);

_nutrient = {
'value': this.get_value(),
'unit': null,
'digits': [16, 2],
'position': 'after',
'range': 0.05,
'color_low': '#c02c2c',
'color_high': '#c02c2c',
'color_ok': '#078B01',
'color': 'color:#078B01'

if (this.options.unit) {
_nutrient.unit = this.options.unit;

if (this.options.position) {
_nutrient.position = this.options.position;

if (this.options.digits) {
if (this.options.digits.length === 1) {
this.digits = _nutrient.digits = [16, this.options.digits];
} else {
this.digits = _nutrient.digits = this.options.digits;

this.set({"nutrient": _nutrient});
this.on("change:nutrient", this, this.get_color);
start: function() {
var tmp = this._super();
this.on("change:nutrient", this, this.reinitialize);
return tmp;
get_color: function() {
_nutrient = this.get('nutrient');

if (_nutrient.value < 0) {
this.color = _nutrient.color = ''.concat('color:', _nutrient.color_low);
} else {
this.color = _nutrient.color = ''.concat('color:', _nutrient.color_ok);

this.set({"nutrient": _nutrient});
render_value: function() {
var show_value = this.format_value(this.get('value'), '');
if (!this.get("effective_readonly")) {
} else {
if (this.password) {
show_value = new Array(show_value.length + 1).join('*');
var char_content = this.$(".oe_form_char_content").text(show_value);
if (this.color) {
var _nutrient = this.get('nutrient');
_nutrient.value = this.get('value');
this.set({'nutrient': _nutrient});
char_content.parent().css('color', this.color);
parse_value: function(val, def) {
return instance.web.parse_value(val, {type: "float", digits: this.digits}, def);
format_value: function(val, def) {
return instance.web.format_value(val, {type: "float", digits: this.digits}, def);

instance.web.form.widgets = instance.web.form.widgets.extend({
'nutrient': 'instance.web.form.FieldNutrient'



<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

<t t-name="FieldNutrient" t-extend="FieldChar">
<t t-jquery="t:first" t-operation="before">
<t t-if="widget.get('nutrient') and widget.get('nutrient').unit and widget.get('nutrient').position === 'before'">
<t t-esc="widget.get('nutrient').unit"/>
<t t-jquery="t:last" t-operation="after">
<t t-if="widget.get('nutrient') and widget.get('nutrient').position and widget.get('nutrient').position === 'after'">
<t t-esc="widget.get('nutrient').unit"/>


form_view.xml where field is called. widget parameters coming from options, hard-coded.

definition of fields:

dry_matter: float

amount_ingr_dry: float, computed

diff_ingry_dry: float, computed

<td><label for="dry_matter"/></td>
<td><field name="dry_matter" class="oe_text_right" readonly="1" widget='nutrient' options="{'unit': 'kg', 'digits': [16,2], 'position': 'after'}"/></td>
<td><field name="amount_ingr_dry" class="oe_text_right" widget='nutrient' options="{'unit': 'kg', 'digits': [16,2], 'position': 'after'}"/></td>
<td><field name="diff_ingr_dry" class="oe_text_right" widget='nutrient' options="{'unit': 'kg', 'digits': [16,2], 'position': 'after'}"/></td>

any ideas?

edit: ok i got the colors and units as needed. but left unit optional for now. added new column next to it to make it more readable.     

next one. to refer need value in widget, compare it with diff to get the colors properly defined by range. green red orange blue etc etc.

About This Community

This platform is for beginners and experts willing to share their Odoo knowledge. It's not a forum to discuss ideas, but a knowledge base of questions and their answers.


Odoo Training Center

Access to our E-learning platform and experience all Odoo Apps through learning videos, exercises and Quizz.

Test it now

Question tools

1 follower(s)


Asked: 12/3/17, 5:12 AM
Seen: 969 times
Last updated: 12/4/17, 5:04 AM