How to use the color_picker widget in odoo

Hello odooers​  & developers, 


Exploring the Color Picker Widget in Odoo

Welcome to This Odoo Technical Blog! In this Blog, we will explore the color_picker widget in Odoo. This widget allows users to select colors using a visual interface, making it easier to store and display color-related data in your Odoo applications.

  • In this blog, you’ll learn:
    • What the color_picker widget is and when to use it
    • How to define an integer field for color storage
    • How to apply the color_picker widget in an XML view
    • A practical example in a custom module

What is the color_picker Widget in Odoo?

The color_picker widget in Odoo lets users choose colors easily in form views. The chosen color is saved as a number. It is often used in places where different colors help distinguish items, like project tags, product labels, or categories.

Why Use the color_picker Widget?

Using the color_picker widget enhances user experience by providing a simple way to choose colors visually instead of manually entering numerical values. It ensures consistency and improves UI design by allowing customizable colors.

Step-by-Step Implementation

1. Define the Color Field in the Model

To use the color_picker widget, first, you need to define a field in your Odoo model to store the color value. Since the color_picker widget stores colors as integers, we will use an Integer field.

Python Model Definition (.py file):

from odoo import models, fields

class Mall(models.Model):

    _name = 'mall.mall'

    _description = 'Mall'

    color = fields.Integer(string='Color')

This will create a color field in the mall.mall model to store the selected color as an integer.

2. Use the Color Picker Widget in the XML View

Now that we have defined our field, we need to integrate it into our form view using the color_picker widget. This widget provides a graphical interface for selecting colors.

XML View Definition:

.py

<record id="mall_form_view" model="ir.ui.view">

    <field name="name">mall.form.view</field>
    <field name="model">mall.mall</field>
    <field name="arch" type="xml">
        <form string="Mall Form">
            <group>
                <field name="color" widget="color_picker"/>
            </group>
        </form>
    </field>
</record>

How Does This Work?

  • The widget="color_picker" attribute in the field enables the color selection UI.
  • Users can pick a color, which gets stored as an integer value in the database.
  • This field can be used in reports, kanban views, or anywhere else color representation is required.

Conclusion

The color_picker widget in Odoo makes it easy for users to select colors. It helps organize and differentiate items visually and can be added to any model where colors are needed.

If you want odoo technical training on any odoo version , please let us know by mail at [email protected]. Then next, our odoo expert will conduct online or offline Odoo training with you 


Devintellecs & team are odoo training providers in the USA and INDIA, so we will try our best to give the training either individal or any bulk employee company.


If you want to check your odoo technical or functional knowledge, then we have prepared the odoo EXam practice test for the odoo technical & functional people.


Odoo DEV March 5, 2025
Share this post
Archive
Sign in to leave a comment
Understanding Related Field In Odoo