Color Char Field

Odoo Custom Colored Field Widget (v15.0)


In this blog post, we'll dive into the creation of a custom widget in Odoo using JavaScript: the ColoredField widget. This widget extends the functionality of the standard character field (FieldChar) to display text in a colored badge format, based on a color value stored in the record.


The Code Explained


The JavaScript code snippet for creating this custom widget in an Odoo module is as follows:

odoo.define('my_module.ColoredField', function(require) {
    "use strict";

    var FieldChar = require('web.basic_fields').FieldChar;
    var fieldRegistry = require('web.field_registry');
    var ColoredField = FieldChar.extend({
        _renderReadonly: function() {
            console.log(this.record)
            console.log(this.$el)
            this._super();
            var color = this.record.data.color;
            var $div = $('<div/>', {
                class: 'o_field_many2manytags o_field_widget' 
            });
            var $div2 = $('<div/>', {
                class: 'badge badge-pill  o_tag_color_'+color
            });
            $div2.append(this.$el);
            $div.append($div2);
            this.setElement($div);
        },
    });
    fieldRegistry.add('colored_field', ColoredField);
    return ColoredField;
});


# python file
class MyModuleModel(models.Model):
    ....
    color = fields.Integer('Color', default=0)


Let's break it down:

  • Module Definition and Dependencies:
    In Odoo 15/16 The odoo.define function defines a new module named 'my_module.ColoredField'. It requires two dependencies from Odoo's web framework: web.basic_fields and web.field_registry.
  • Extending the FieldChar Widget:
    The ColoredField class extends FieldChar, inheriting its properties and methods. This allows our custom widget to behave like a standard character field with additional features.
  • Rendering the Widget in Read-Only Mode:
    The _renderReadonly method is overridden to customize how the field displays when it's not editable. It fetches the color field from the record data to determine the color of the badge.
  • Creating the Badge Elements:
    The method uses jQuery to create two div elements. The first div ($div) serves as a container, while the second div ($div2) is styled as a badge with a dynamic class based on the color value.
    It will have the same representation as many2many_tags
  • Appending the Elements:
    The original field element (this.$el) is appended to $div2, and then $div2 is appended to $div. Finally, this.setElement($div) replaces the widget's root element with our custom container.
  • Registering the Widget:
    The new widget is registered in Odoo's field registry, making it available for use in views.


Use Case and Benefits

This custom widget can be particularly useful in scenarios where you want to visually highlight certain information in your Odoo views, such as status indicators, priority levels, or categorizations based on color coding. It enhances user experience by providing a more interactive and visually appealing way to present data.

Conclusion


Creating custom widgets in Odoo is a powerful way to extend its functionality and tailor the ERP system to meet specific requirements. The ColoredField widget serves as a great example of how you can leverage Odoo's extensible architecture to enhance data representation in your application.

One2many tracking