Everything You Need to Know About Char Widgets in Odoo

The flexible open-source ERP system Odoo excels at customizing data fields for a smooth user experience. The Char field, which is one of the key field types, is designed to store short strings such as names, codes, emails, or URLs. Char fields are ideal for short alphanumeric data with a default character limit of 255. However, the real power of Char fields lies in their widgets. These UI elements determine how fields appear and function in different views, such as forms, lists, or kanban. Specialized widgets can transform the basic Char field into secure password fields, clickable links, or badges.

This guide provides an in-depth look at Char fields and their widgets, using examples.

What is a Char Field in Odoo?

from odoo import fields, models
class MyModel(models.Model):
    _name = 'my.model'
    _description = 'My Custom Model'
    name = fields.Char(string='Name', required=True)
    code = fields.Char(string='Code', index=True)
    description = fields.Char(string='Short Description', help='Enter a brief note')

In Python, a Char field is created using fields.Char, which is optimized for indexing and querying. It stores short text as a VARCHAR in Odoo's PostgreSQL database. Here's a simple example:

Key attributes include:

• string: Sets the label in the UI.
• required: Makes the field mandatory.
• index: Enables faster searches with a database index.
• help: Adds a tooltip for users.

Char fields display as plain text in list views and as single-line text inputs in forms by default. You can use them for status labels, contact details, or short identifiers.

Widgets in Odoo: The Basics

The widget attribute in XML views specifies which widgets to use in Odoo. These widgets change a field's appearance or behavior without altering its data type. For instance:

<field name="email" widget="email"/> <!-- Displays as a clickable email link -->

By incorporating formatting (such as badges), input validation (like email patterns), or interactivity (such as clickable links), Char field widgets enhance functionality.

Available Widgets for Char Fields

Here’s a detailed breakdown of the widgets that work with Char fields, along with use cases and explanations for each.

Basic Text Widgets

• Char (Default): Displays a single-line text field for simple text, like names or titles. This is the default setting, which is the same as not using the widget attribute. Use it to replace a Text field for single-line input or when simplicity is key.

<field name="name" widget="char"/>

• Text: Better suited for fields that need multiline input, this renders a textarea. You can use Text for quick notes with Char, but avoid overly long content due to length limits.

<field name="notes" widget="text"/>

• CopyClipboardChar: Ideal for shareable codes or API keys, this adds a "Copy to Clipboard" button next to the text input. It enhances the user experience when copying sensitive information.

<field name="api_key" widget="CopyClipboardChar"/>

Link and Contact Widgets

• Email: Converts the field into a clickable mailto link, perfect for partner or customer email addresses. It opens the user's default email client and checks for basic email formats.

<field name="email" widget="email"/>

• Phone: Changes the field into a tel link, optimized for direct calling on mobile devices. Use it for phone numbers.

<field name="phone" widget="phone"/> 

• URL: Creates a clickable link and automatically adds "http://" if it's missing. It opens in a new tab and is great for linking to websites or documentation URLs.

<field name="website" widget="url"/>

Secure and Formatted Widgets

• Password: Displays dots instead of characters and includes a toggle to reveal the input. Use the password="True" attribute to ensure security when handling sensitive data or login credentials.

<field name="password" widget="password" password="True"/>

• Badge: Perfect for status labels like "Active" or "Inactive," this badge shows the field value in a rounded, stylish manner. Use decoration-* attributes (like decoration-success) to customize colors.

<field name="status" widget="badge" decoration-bf="state=='draft'"/>

• Char_Emojis: Adds a fun element to user-facing fields like chat aliases by providing a text input with an emoji picker. This is great for apps such as Odoo Discuss.

<field name="nickname" widget="char_emojis"/>

Advanced/Utility Widgets

• Domain: Offers an interactive editor for creating Odoo domain filters, stored as strings like [('state', '=', 'done')]. Utilize dynamic search filters.

<field name="domain_filter" widget="domain"/>

• HTML: Works better for fields but allows a rich text editor. Because of Char's limited word count, use it carefully for short formatted content.

<field name="body" widget="html"/>

• Note: In non-form views like kanban, some widgets (like html and domain) may not display properly. Always test in your intended view. Widgets in Odoo 19 have improved visibility with dark mode support and better accessibility.

Implementing Widgets: Step-by-Step Examples

Let's create a "Partner" model that showcases different Char widgets.

Step 1: Define the Model (Python)

# models/partner.py
from odoo import fields, models
class Partner(models.Model):
    _name = 'custom.partner'
    _description = 'Custom Partner'
    name = fields.Char(string='Name', required=True)
    email = fields.Char(string='Email')
    phone = fields.Char(string='Phone')
    api_key = fields.Char(string='API Key')
    status = fields.Char(string='Status', default='Active')
    domain_filter = fields.Char(string='Filter Domain')

Step 2: Create the Form View (XML)

<!-- views/partner_views.xml -->
<odoo>
    <record id="view_partner_form" model="ir.ui.view">
        <field name="name">custom.partner.form</field>
        <field name="model">custom.partner</field>
        <field name="arch" type="xml">
            <form>
                <sheet>
                    <group>
                        <field name="name"/>
                        <field name="email" widget="email"/>
                        <field name="phone" widget="phone"/>
                        <field name="api_key" widget="CopyClipboardChar"/>
                        <field name="status" widget="badge"/>
                        <field name="domain_filter" widget="domain"/>
                    </group>
                </sheet>
            </form>
        </field>
    </record>
</odoo>

Expected UI

• Email: Clickable link like mailto:user@example.com.
• Phone: Tap to dial on mobile devices.
• API Key: Text input with a copy button.
• Status: Styled badge, green for "Active."
• Domain Filter: Interactive domain editor.

Char widgets create dynamic, user-friendly interfaces in Odoo by transforming plain text fields into secure inputs, interactive links, or stylish badges. By mastering these tools, you can build forms and views that feel natural to Odoo 19.

To read more about How to Create a Widget in Odoo 18, refer to our blog How to Create a Widget in Odoo 18.